Qual é a largura padrão para um site em pixels?


23

Qual é a largura padrão para um site em pixels ou onde estão as estatísticas?


2
Avançando rapidamente para hoje, o design responsivo da web está se tornando o padrão. Seu site deve se adaptar aos diversos tamanhos de tela. Pelo menos: tela HD, desktop, laptop, tablet e celular.
Mario Awad

Respostas:


23

Não há padrão, apesar da maioria dos desenvolvedores assumirem 1024x768 como padrão.

Existe um sistema de grade CSS chamado 960grid que assume a largura do corpo como 960px e, em seguida, quebra as colunas em 96 colunas com 10px ou 80 com 12px.

O problema é: as telas dos PCs estão ficando cada vez maiores, lentamente, em algumas regiões, mas o são.

Por outro lado, no topo da tecnologia, você tem telas menores em dispositivos móveis e netbooks.

Lidar com essa realidade pode ser doloroso. Existem consultas de mídia CSS para o resgate. Como alternativa, você pode usar o link de tag (com dispositivo portátil rel) para fornecer uma versão alternativa para dispositivos móveis.

Siga alguns links de referência para você


17

Qual é a largura padrão para um site em pixels?

Qualquer número maior que 0 e menor que infinito.

As práticas recomendadas atuais para Design Responsivo da Web (RWD) são oferecer suporte a todos os dispositivos, independentemente da largura em pixels. Normalmente, isso envolve o uso de consultas de mídia para fornecer estilos diferentes para diferentes intervalos de tamanhos de tela. Os intervalos reais usados ​​são menos importantes do que o design, sendo consistente entre os tamanhos, e o site mantendo a funcionalidade entre os tamanhos.

É muito provável que os usuários vejam diferentes tamanhos de tela sem pensar muito nisso, então você deseja minimizar a quantidade de surpresa quando arrasta uma janela para encaixar na metade da tela ou inclina o telefone.

Alguns intervalos de largura comuns usados ​​são:

  • extra pequeno : 0-480
  • pequeno : 480-768
  • médio : 768-1024
  • grande : 1024-1200
  • extra grande : 1200+

Esses intervalos são tão comuns que eu diria que são praticamente um padrão. Nem todos os intervalos precisam ser usados; por exemplo, um site pode ter largura de fluido abaixo de 768 e, em seguida, largura fixa e centralizada para 768+.

Com tudo isso dito, lembre-se de que os números que você usa não importam particularmente, desde que o site funcione em qualquer dispositivo que o usuário escolha para visualizá-lo.

onde estão as estatísticas?

Agora, para a parte complicada, os dados reais. Se você estiver reprojetando um site, os únicos dados importantes são os seus. O Wikipedia ou estouro de pilha, ou o Google, ou qualquer-outra-large-site que-poder-list-analytics-dados diz é irrelevante para os seus dados para o seu site.

Se suas estatísticas mostram a maioria dos usuários usando principalmente um intervalo específico de larguras de dispositivos, você provavelmente deve se concentrar em atender a esses usuários primeiro. Dito isso, se o seu design for adequado, você não precisará se concentrar em nenhum tamanho específico.

Para novos sites ou sites que não tinham análise anteriormente, considere o uso de uma abordagem para dispositivos móveis e certifique-se de usar a análise para que você possa se adaptar adequadamente à sua base de usuários.


Versão pré-RWD antiga e desatualizada por causa da posteridade

Estou surpreso que mais ninguém tenha pensado em mencionar o tamanho do navegador pelo google .

Quanto aos padrões:

80% dos espectadores podem lidar com largura de até 1000 px, mas os que podem lidar com mais de 1000 px de largura geralmente não. Com monitores de tela ampla, muitas pessoas alinham suas janelas à metade da tela. Agora que o Win7 suporta drag-n-dock, é provável que se torne ainda mais popular.

Quanto à altura: sua primeira impressão para o usuário está na parte superior da página, em torno de ~ 600px. No entanto, a maioria dos usuários sabe e espera que o conteúdo fique "abaixo da dobra" e está disposto e apto a rolar.

Se você deseja ir além de 1000 px, recomendo um layout fluido para que os usuários de netbooks e telas menores ainda possam ver o conteúdo corretamente.

~ 960px tende a ser uma largura padronizada, mas realmente depende do conteúdo e do estilo.


1
Se alguém estiver interessado, encaixar o Google Chrome em um lado do meu monitor de resolução 1920x1200 resultou em uma área útil de 927px (deixando espaço para a barra de rolagem).
Mattis

O link não funciona mais.
Alphamale


2

Como outros já disseram, não existe um padrão para esse tipo de coisa. Embora, aqui estão algumas dicas que podem criar ou frear seu site:

Sempre usei porcentagens ou uma compilação do pior cenário possível: a menor resolução de tela que você geralmente encontrará é de 800x600, e mesmo isso é raro. Qualquer coisa abaixo disso provavelmente está em um dispositivo móvel. A largura de 775px é um bom meio de usar, ou simplesmente 80%, se você souber que seu site ainda terá apelo quando for ampliado para uma tela maior. Os problemas mais comuns são que o conteúdo do texto (quando dimensionado para larguras de 1600 px) parece vazio e curto. Ter o seu site com 775px de largura corrigirá isso, no entanto, pode não parecer bom com um grande espaço aberto em ambos os lados.

NUNCA faça seus usuários rolarem para a esquerda ou direita. Cortar o conteúdo dos lados é a maneira mais rápida de perder clientes ou leitores em potencial.

Tenha sua navegação em algum lugar próximo ao topo ou em um local para o qual os usuários não precisem rolar para encontrá-la.

E apenas uma dica de conteúdo; possui gráficos altos / informações baixas ou informações altas / gráficos baixos. Tentar combinar os dois sempre parece terrível.



1

É útil saber o quão popular são as resoluções de tela e depois basear seu modelo com base no uso geral da maioria ... Pessoalmente, recomendo o Design Responsivo - para que seu site funcione em todos os dispositivos e em todas as resoluções.

A partir de janeiro de 2013.

  1. 1366x768 25,4%

  2. 1920x1080 11,0%

  3. 1280x1024 9,7%

  4. 1440x900 7,3%

  5. 1280x800 8,2%

  6. 1680x1050 5,7%

  7. 1600x900 5,0%

  8. 1920x1200 2,9%

  9. 1360x768 2,1%

  10. 2560x1440 1,1%

  11. Outros 11,6%


1

O Google Analytics registra as resoluções de tela do visitante. Você pode criar facilmente um relatório personalizado para verificar quais são os tamanhos de tela comuns de seus visitantes. Aqui estão as estatísticas (top 15) do meu site para maio de 2013:

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

As estatísticas variam de site para site, dependendo do tipo de tráfego que ele recebe, para que seja projetado de acordo. Eu próprio prefiro designs fluidos com largura percentual, 1000px min-widthe razoável max-width.


0

Não existe realmente o padrão, e as estatísticas dependem inteiramente da demografia alvo. Visar o pessoal técnico geralmente resulta em melhor hardware e resoluções mais altas, menos técnico ao contrário. Mas existem telefones, netbooks etc. que têm resoluções significativamente mais baixas do que a norma na maioria dos casos.

Para referência, geralmente assumo um mínimo de 1024x768 agora.

De qualquer forma, aqui estão alguns: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php


0

Eu acho que depende do conteúdo do site.

Por exemplo, se você não precisa de nenhuma barra lateral, etc., e se gosta de designs mínimos, pode definir a largura das páginas da Web como 500px.

Então, eu não acredito (e não gosto) de padrão sobre os tamanhos do layout da web.


0

960 pixels é o mais seguro, pois funciona em uma tela de 1024x768 e deixa espaço para a barra de rolagem, e também funciona em um iPhone no modo paisagem (porque o pixel dobra sua tela de 480x320 para uma efetiva 960x640 e não possui um Barra de rolagem).


0

Dado que a maioria dos monitores widescreen de hoje tem uma resolução de "1440x900" ou superior, eu pensaria que uma largura de 1280 pixels está se tornando mais o "padrão", especialmente quando se trata de exibir imagens.

NOTA: A largura de 1280 pixels era a largura de muitas telas mais antigas de proporção 4: 3 de 17 e 19 polegadas.


A maioria das telas 'USADAS' não vendidas são 1366x768px devido a macs e laptops. Veja minha resposta.
Simon Hayter

Como ainda não posso "adicionar comentário" à sua resposta, pedirei aqui. Qual é a fonte da sua lista de resoluções de tela? Estou curioso. Obrigado por fornecer as informações de 1366 x 768. Isso é útil saber.
J. Chin

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.