Qual largura do navegador devo usar para criar um site?

Estou trabalhando na parte de gráficos do site e fui convidado a criar um site no Photoshop. Eu me pergunto o que são dimensões e larguras médias de navegador para um site, para que eu possa criar minha maquete com essas dimensões.

Na era moderna do web design, a largura do navegador é irrelevante. Existem tantos dispositivos diferentes por aí que você PRECISA tornar seus projetos responsivos , pois eles funcionam para qualquer tamanho de tela.

Para fazer isso, você deve usar algum tipo de sistema de grade de largura de fluido e direcionar dispositivos específicos usando consultas @media .

As consultas de mídia são simplesmente conjuntos diferentes de regras CSS para diferentes tamanhos de porta de exibição. As consultas de mídia também respondem à alteração dinâmica da largura do seu navegador. À medida que você reduz o tamanho do navegador, a página responde eliminando os carros alegóricos ou passando de 12 colunas para 1 ou 2. A capacidade de resposta também reage aos usuários em dispositivos móveis e tabelas quando eles alteram a orientação de retrato para paisagem ou vice-versa.

Tamanhos direcionados:

• Dispositivo móvel de 320 x 480 no modo retrato
• Tablets pequenos de 480 x 640 ou um iPhone no modo paisagem
• Tablet 768 x 1024 no modo retrato
• Tablet 1024 x 768 no modo paisagem
• Mais de 1200 navegadores de desktop
• 2900 ++ exibições ou conferências de mídia grande (isso não é obrigatório, e se alguém estivesse vendo seu site em uma exibição muito grande).

Para ver isso em ação, dê uma olhada na grade Sem moldura . Na verdade, não é fluido, mas, à medida que você ajusta o navegador, ele passa de 14 colunas até 1

O Twitter Bootstrap , uma estrutura simples de CSS, HTML e JS criada com componentes populares da interface do usuário, também é um bom exemplo de práticas modernas de design responsivo.

Outra coisa que você também pode querer considerar é a densidade de pixels . O iPhone 4 e o novo iPad têm telas de retina duas vezes mais nítidas que as telas normais. Isso torna a prática de veicular sprites e imagens em vez de texto quase obsoleta. No iPad, as imagens com texto parecem horríveis.

Portanto, a resposta para a pergunta é que não existe uma largura padrão para o navegador que você deve criar. Você deve tomar suas decisões de design com base em seus usuários e fazê-lo onde for o mais acessível para a maior quantidade de pessoas.

Muitos modelos de layout usam largura de 960px, uma vez que se encaixa na resolução de tela ampla comum de 1024px, fornece algum espaço para a barra de rolagem e é facilmente dividível por 2, 3, 4, 5, 6, 8, 10, 12 e 16 - ideal para colunas o layout.

Veja http://960.gs para um exemplo.

Outras estruturas, como o bootstrap, usam 940px para contabilizar algumas margens entre as colunas.

Se você estiver segmentando navegadores de desktop, poderá facilmente acessar cerca de 1000 pixels de largura, se necessário.

Resolução de tela StatCounter

Por que cerca de 1000 pixels quando os monitores mais comuns têm 1024 pixels ou mais? Porque você precisa permitir as barras de rolagem e o cromo da janela.

Se você estiver segmentando especificamente navegadores móveis, 320 pixels de largura podem ser uma boa opção, embora os navegadores móveis normalmente dimensionem o conteúdo para se ajustar à largura da visualização, portanto, 950 ou 960 pixels de largura podem ser ótimos. Observe que 320 pixels em CSS / HTML equivalem a 640 pixels em dispositivos com alto DPI, como o iPhone.

Resolução de tela móvel StatCounter

Seu mercado-alvo também pode mudar as coisas. Se você está segmentando um público experiente em tecnologia, pode esperar que as coisas sejam enviesadas para dispositivos mais modernos. Se você estiver construindo um site do governo, precisará atender a uma variedade maior.

Além disso, como você está construindo o site? Se você estiver usando um sistema de grade, como o Blueprint CSS ou o 960 Grid System, também poderá determinar o tamanho (a maioria dos sistemas de grade também pode ser alterada para outros tamanhos).

Você também pode querer analisar o design responsivo se estiver tentando funcionar bem em dispositivos móveis e computadores.

neste momento, o tamanho da área de trabalho difamada em todo o mundo é 1024x768, é bom criar um site com tamanho 1003px ...