Resolução recomendada do site (largura e altura)? [fechadas]

Existe algum padrão na resolução comum de sites?

Nosso objetivo é monitorar monitores mais recentes, com pelo menos 1280px de largura, mas a altura pode variar e cada navegador também pode ter diferentes alturas da barra de ferramentas.

Existe algum tipo de padrão para isso?

O conselho hoje em dia é:

Otimize para 1024x768 . Para a maioria dos sites, isso abrange a maioria dos visitantes. A maioria dos logs mostra que 92-99% de suas visitas terão mais de 1024 de largura. Enquanto 1280 é cada vez mais comum, ainda existem muitos em 1024 e alguns abaixo disso. Otimize para isso, mas não ignore os outros.

1024 = ~ 960 . Contabilizar barras de rolagem, bordas da janela etc. significa que a largura real de uma tela de 1024x768 é de cerca de 960 pixels . Algumas ferramentas são baseadas em um tamanho um pouco menor, cerca de 940 . Essa é a largura padrão do contêiner no twitter bootstrap .

Não projete para um tamanho . Os tamanhos das janelas variam. Não presuma que o tamanho da tela seja igual ao tamanho das janelas. Crie um mínimo razoável, mas assuma que ele se ajustará.

Use design responsivo e layouts de líquidos . Use layouts que serão ajustados quando a janela for redimensionada. As pessoas fazem muito isso, especialmente em grandes monitores. Esta é apenas uma boa prática de CSS. Existem várias estruturas de front-end que suportam isso.

Trate o celular como um cidadão de primeira classe . Você está recebendo mais tráfego de dispositivos móveis o tempo todo. Isso introduz ainda mais tamanhos de tela. Você ainda pode otimizar para o 960, mas usar técnicas de design responsivo da Web significa que sua página será ajustada com base no tamanho da tela.

Informações de exibição do navegador de log . Você pode obter números reais sobre isso. Encontrei alguns números aqui e aqui e aqui . Você também pode montar seu site para coletar os mesmos dados.

O usuário irá rolar para não se preocupar muito com a altura . O argumento antigo era que os usuários não rolariam e algo importante deveria estar "acima da dobra". Isso foi derrubado anos atrás. Os usuários rolam muito .

Mais sobre as resoluções de tela:

• Resolução da tela e layout da página
• Melhor resolução de tela para criar sites
• Design para o tamanho do navegador - não para o tamanho da tela

Mais sobre design responsivo:

• Responsive Web Design (2010, 25 de maio), Ethan Marcotte, A List Apart.
• Responsive Web Design na Wikipedia
• Padrões de layout para vários dispositivos (2012, 14 de março) Luke Wroblewski. Cataloga os padrões mais populares para layouts de tela adaptáveis ​​para vários dispositivos.

Ferramentas e estruturas de front-end para design responsivo e layouts de líquidos:

• Twitter Bootstrap
• Fundação Zurb
• 50 ferramentas fantásticas para web design responsivo (2012, 24 de abril) Denise Jacobs & Peter Gasston

Má ideia, acredito. O objetivo principal de separar o conteúdo do layout era permitir que sua página da web fosse exibida em qualquer tipo de navegador.

Colocar limitações artificiais, como um tamanho mínimo de tela, limitará seu mercado.

Dito isto, acredito que todos os desktops devem poder exibir 1024x768. Mas e os navegadores executados em iPhones ou outros dispositivos com problemas de tela ou mesmo aqueles que não usam toda a área de trabalho para o navegador?

Em resposta à sua pergunta específica, não, não acredito que exista um padrão para uma área de exibição mínima ou comum nos navegadores.

Forçar o usuário a rolar horizontalmente é uma transgressão grave da interface do usuário. A menos que você esteja construindo especificamente um site para uma população com um tamanho de tela conhecido, é mais seguro garantir que seu design funcione com telas de até 800 pixels de largura (cerca de 8% da população de navegação na Web se a memória me servir corretamente). É aconselhável fazê-lo se adaptar bem a telas maiores, mas não às custas das pessoas que ainda navegam a 800x600.

Aqui está outra coisa a considerar também: nem todo mundo executa o navegador em tela cheia (não). Portanto, a ideia de que se está bem projetada para um "tamanho de tela" específico (e grande) realmente não funciona por várias razões.

Atualização em 15/12/2010: Quando respondi a essa pergunta pela primeira vez, 800 pixels era uma resposta apropriada. No entanto, neste momento, eu recomendaria 1024 pixels de largura (ou 960, como alguém indica). A tecnologia marcha sobre ...

Aqui estão as estatísticas da exibição do navegador em 2008: http://www.w3schools.com/browsers/browsers_display.asp

Cerca de 50% dos usuários ainda estão usando 1024x768. Se você deseja que seu site seja bonito em altas resoluções, use um layout flexível.

Na verdade, existem padrões da indústria para larguras (pelo menos de acordo com o Yahoo). As larguras suportadas são 750, 950, 974, 100%

Existem vantagens dessas larguras para suas grades predefinidas (layouts de colunas) que funcionam bem com dimensões padrão para anúncios, se você incluir algum.

Conversa interessante também vale a pena assistir.

veja YUI Base

Aqui está uma ferramenta incrível: Tamanho do navegador do Google Labs

Eu diria que você só deve esperar que os usuários tenham um monitor com resolução 800x600. O governo canadense possui padrões que listam isso como um dos requisitos. Embora isso possa parecer pouco para alguém com um monitor widescreen sofisticado, lembre-se de que nem todo mundo tem um monitor legal. Ainda conheço muitas pessoas rodando a 1024x768. E não é incomum encontrar alguém que esteja executando 800x600, especialmente em web cafés baratos enquanto viaja. Além disso, é bom ter a janela do navegador em tela cheia, se você não quiser. Você pode ampliar o site em monitores mais amplos, mas não faça o usuário rolar horizontalmente. Sempre. Outra vantagem de suportar resoluções mais baixas é que seu site funcionará em telefones celulares e o Nintendo Wii é muito mais fácil.

Uma nota em sua largura de pelo menos 1280, eu diria que isso é exagero. A maioria dos monitores não widescreen de 17 e até 19 polegadas suporta apenas uma resolução máxima de 1280x1024. E o laptop widescreen de 14 polegadas em que estou digitando agora tem apenas 1280 pixels de largura. Eu diria que a maior resolução mínima pela qual você deve se esforçar é 1024x768, mas 800x600 seria o ideal.

Até agora, todas as respostas falam sobre monitores de desktop, mas estou usando o estouro de pilha no meu iPhone e acho que você não deve excluir nenhuma plataforma móvel visando 1024 ou 1280 pixels horizontais. Marque sua página para que o navegador saiba o que tudo significa e a torne utilizável será gratuita, mesmo nos leitores de tela e em outro kit em que você não tenha pensado.

É melhor não procurar uma resolução específica, mas adaptar-se facilmente a muitas resoluções diferentes.

As diretrizes que usamos, que parecem bastante usadas e são respaldadas pelos números que obtemos do Google Analytics, são para projetar o site para que ele funcione em uma tela com 1024 pixels de largura e 768 pixels de altura (1024x768 e 1280x800 são as resoluções mais comuns que vemos, representando pelo menos 70% de todo o tráfego).

É por isso que você vê muitos sites (este incluído) que usam uma coluna central de aproximadamente 1000 pixels de largura e com o conteúdo mais importante nos 500-600 pixels principais, para que fique acima da dobra ao ser visualizado em telas desse tamanho.

O uso de um layout de 1000 pixels de largura funciona muito bem em tamanhos de tela de até 1680 pixels de largura (normalmente a altura que você verá em laptops, exceto os grandes de 17 "), mas começa a parecer um pouco bobo em 1920 pixels computadores amplos (computadores de ponta, geralmente estações de trabalho), no entanto, essas resoluções muito altas não representam uma grande porcentagem de tráfego na Internet em geral - 2% ou menos (por outro lado, se você tiver um público especializado como este site , o número com altas resoluções pode ser um pouco maior).

Embora a melhor largura possa até 1024, você terá que ajustar a altura para levar em conta várias configurações do navegador (barra de ferramentas de navegação, barra de favoritos, barra de status etc.) e levar em conta as configurações da barra de tarefas. Ele rapidamente reduzirá o 768 para cerca de 550.

Qualquer que seja o tamanho do seu navegador de destino, inclua espaço para as barras de ferramentas, as barras de status e as barras de rolagem do navegador, conforme acima. O Internet Explorer (IME) geralmente possui mais de 100 px de espaço vertical nas barras de ferramentas e nas barras de status. Normalmente, se estou fotografando para 1024 x 768, tentaria criar um design com cerca de 960 - 980px de largura e 600px de altura para ser seguro. Dessa forma, você pode acomodar a rolagem, se necessário, e algum espaço em branco agradável (se o design exigir). Eu recomendo grades YUI para instâncias em que você precisa segmentar tamanhos específicos:

Grade YUI

Recebo muitas perguntas dos designers sobre não apenas a largura, mas qual a altura a ser usada para "manter tudo acima da dobra". Aqui está uma resposta que eu dei recentemente -

Quanto à largura, não sou designer, mas li que a largura de 960px é o caminho a seguir atualmente, porque ela se divide em colunas que parecem bonitas e se encaixam perfeitamente na maioria das telas. Se puder, crie um layout líquido - mas isso nem sempre é prático, dependendo do seu designer, de suas habilidades em CSS, das imagens e da quantidade de texto.

(você sempre deseja que haja de 65 a 80 caracteres por linha, com uma altura de linha de cerca de 1,15). Essa é a largura ideal da coluna para o texto e foi comprovada a leitura muito mais rápida e agradável do que as colunas muito largas ou estreitas.

No que diz respeito "acima da dobra", tenho apenas de advertir contra o uso de qualquer conceito na Web. A rolagem horizontal pode e deve ser evitada, mas a rolagem vertical é algo que você não pode 100% evitar. Tudo o que posso dizer é que, em uma tela de 1024x768 (pelo menos 95% dos usuários têm isso ou mais), você deve estar bem com um bloco fixo de 600px de altura. Mas existem muitos formatos de exibição diferentes por aí, o cromo do navegador pode ocupar muito espaço e nem todos maximizam a janela do navegador.

aqui estão alguns outros sites que dizem mais ou menos a mesma coisa - mas planejar obter absolutamente tudo 'acima da dobra' para todos é difícil, porque então você pode ter apenas 400px, de acordo com as estatísticas reais.

E, finalmente, um bom artigo longo que entra em grandes detalhes (eu publicaria mais, mas a SO diz que sou burra demais) - Como criar tamanhos de navegador - baekdal.com

Pessoalmente, sempre ativei a largura máxima de 1000 px, centralizada no meio da página (via margem esquerda / direita: automática).

Se você estiver executando em algo menor que 1024x768, é hora de atualizar. Seriamente. É quase 2010. Você pode comprar monitores LCD de barganha com uma resolução nativa de 1280x1024.

Eu sugiro que você dê uma olhada nas consultas de mídia. Esta é uma nova adição útil ao CSS que realmente faz tanto sentido que você se pergunta por que isso não foi implementado antes. Basicamente, ele permite direcionar os atributos do navegador (como larguras máxima e mínima) diretamente via CSS e ramificar seu código de layout a partir daí. Semelhante à criação de uma folha de estilo de impressão, você pode criar layouts de área de trabalho e dispositivos móveis em paralelo no mesmo arquivo, o que é essencial para o desenvolvimento.

No entanto, layouts flexíveis ou líquidos restringem um pouco o design, por exemplo, se você usar imagens de segundo plano que correspondam à imagem de segundo plano do corpo.

Eu prefiro criar layouts de css diferentes para o site e aplicá-los dependendo da resolução do usuário, ou, se isso não for possível (ainda não foi explorado ainda), torne-o uma opção selecionável.

Tudo bem, eu vejo muita desinformação aqui. Para iniciantes, a criação de uma página da Web usando uma determinada resolução, por exemplo, 800x600, por exemplo, torna a página renderizada corretamente usando somente essa resolução! Quando a mesma página é exibida no laptop de outra pessoa ou no monitor do PC em casa, a página será exibida usando a resolução atual da tela, NÃO a resolução usada no design da página. Não crie páginas da web para uma resolução específica! Existem muitas proporções e resoluções de tela diferentes para esperar um cenário "tamanho único", que com o design da web não exista. Aqui está a solução: Use as Consultas de mídia CSS3 para criar código adaptável à resolução. Aqui está um exemplo:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Veja, o que acabamos de fazer foi especificar 3 conjuntos de estilos que são renderizados em diferentes resoluções. No caso do nosso exemplo, se a resolução de uma tela for maior que 800px, o CSS para 1024 será executado. Da mesma forma, se a tela que exibia o conteúdo fosse 1224px, o 1280 seria executado, pois 1224 é maior que 1024. O site em que estou trabalhando agora funciona com todas as resoluções de 800x600 a 1920x1080. Outra coisa a ter em mente é que nem todos os monitores com a mesma resolução têm telas do mesmo tamanho. Você pode colocar 15,4 laptops lado a lado, enquanto os dois parecem iguais, ambos podem ter resoluções drasticamente diferentes, pois nem todos os pixels têm o mesmo tamanho em diferentes telas de LCD. Portanto, use consultas de mídia e comece a criar seu site com uma tela de laptop com alta resolução, principalmente 1280+. Além disso, crie cada consulta de mídia usando uma resolução diferente no seu laptop. Você pode usar as configurações de resolução no Windows para ajustar 800x600 e criar uma consulta de mídia nesse res. Em seguida, alterne para 1024x768 e criar outra consulta de mídia nesse res. Eu poderia continuar, mas acho que vocês deveriam entender.

ATUALIZAÇÃO: Aqui está um link para o uso de consultas de mídia que ajudarão a explicar mais: design inovador da Web para dispositivos móveis com consultas de mídia

Esse tutorial mostrará como criar para todos os dispositivos. Também há tutoriais para consultas de mídia especificamente. Eu desenvolvi o site inteiro para renderizar em todos os dispositivos, telas e resoluções sem subdomínios e apenas CSS! Ainda estou trabalhando no suporte a tablets e smartphones. O site é renderizado perfeitamente em qualquer laptop ou na sua TV LCD de 50 polegadas, e muitas páginas funcionam perfeitamente em todos os dispositivos móveis. Se você colocar todo o seu código na página, suas páginas serão carregadas rapidamente! Além disso, preste atenção à discussão nesse artigo sobre o CSS "background-size: cover;" ou "contêm" propriedades, eles tornarão seus gráficos de plano de fundo fluidos e capazes de renderizar perfeitamente em todas as resoluções.

Siga os tutoriais dos sites e você pode criar uma única página da Web que é exibida em tudo e em qualquer coisa!

Tente direcionar 1024 como a largura mínima. Experimente a aparência de 800, mas não se preocupe muito em fazer esse trabalho. Em 800x600, quase nenhum dos principais sites funcionará; portanto, as pessoas que trabalham nessa resolução terão problemas o tempo todo.

Se você optar por um layout líquido, verifique se o texto não fica muito grande , porque quando as linhas são muito longas, elas ficam difíceis de ler. Essa é a principal razão pela qual a maioria dos sites tem uma largura fixa.

Eu viso os monitores de 1024 pixels (mas não use 100% desse espaço). Desisti daqueles com 800x600. Prefiro punir alguns com hardware desatualizado, fazendo-os rolar se necessário, em vez de punir todos com novos equipamentos, desperdiçando espaço.

Suponho que isso depende do seu público e da natureza do seu aplicativo.

Em última análise, não se trata de padrões ou práticas recomendadas para marcação, mas de conhecer o seu público e garantir que o site faça o que você deseja.

É mais importante considerar a largura da janela de exibição do navegador do que a resolução da tela - você não pode assumir que todos os pixels em uma tela serão alocados ao navegador (e, mesmo que seja, você deve subtrair o cromo do navegador). Se você tem acesso a análises que largura do navegador relatório ( nb largura do navegador, não resolução de tela), então preste muita atenção.

É bom tentar acomodar a maior variedade possível de viewports, mas existem algumas limitações. Alguns desafios podem ser tratados com tipos de mídia CSS , outros não. Alguns podem ser manipulados com layouts de fluidos. Porém, layouts de fluidos não podem funcionar em todas as situações, dependendo do tipo de informação a ser exibida, comprimento da linha, conforto de leitura etc. Alguns layouts de fluidos não funcionam em visores amplos. A maioria quebra quando dimensionada abaixo de uma certa largura, etc.

Por mais que eu queira projetar para viewports de ~ 960 pixels ou mais, nem sempre é possível fazê-lo. Portanto, em alguns casos, ainda é mais seguro projetar para viewports <= 760 pixels ou mais (exibição de 800 pixels de largura, maximizada) - embora possamos finalmente lançar essa limitação de uma vez por todas - para pelo menos a área de trabalho - está se aproximando muito rapidamente.

Onde as conversões são um problema - e você tem um layout de largura fixa - é melhor ter um bom motivo para colocar qualquer coisa em que o usuário precise clicar para que a caixa registradora vá "ka-ching" para qualquer lugar a leste do 760º pixel.

O mesmo vale para a navegação principal.

Por fim, teste seu layout em tudo o que você pode obter. Grande. Pequeno. Área de Trabalho. Portátil. Os trabalhos. Não há substituto.

Acabei de tirar uma amostra das resoluções de tela de todos os sites clientes aos quais tenho acesso. Isso inclui mais de 20 sites em mais de 8 setores. Aqui estão os resultados:
alt text http://unkwndesign.com/so/percentScreenResolutions.png
Com base nisso, eu diria que a aparência fica boa em 1024x768, já que é a maioria aqui por um longo tempo. Além disso, não se preocupe tanto com a altura; no entanto, tente evitar que a maioria das páginas tenha mais do que 1-2 páginas impressas no tamanho de fonte padrão, a maioria das pessoas não lê uma página por tanto tempo e se um usuário instalar uma barra de ferramentas que ocupa espaço vertical, minha preferência pessoal é que é problema deles, mas acho que não é grande coisa.

* observe que o percentual chega a 100,05% devido ao arredondamento.

Lembre-se de que quanto maior a resolução, menor a probabilidade de o navegador da Internet ser maximizado.

E alguns navegadores também têm barras laterais.

Depende do que você deseja renderizar, mas eu usaria um layout de largura variável que não se rompa com aproximadamente 800-900 de largura.

Altura não é realmente um problema.

A sbeam disse que 'você sempre quer que haja 65 a 80 caracteres por linha'. Isso não é verdade. A Wikipedia, por exemplo, pode ter 180 caracteres por linha. Ou era para ser um site específico?