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

123

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?

Aximili
fonte
32
Por que isso foi fechado como "não construtivo"? Parece uma pergunta válida a ser feita, e em particular a resposta mais bem classificada e a resposta aceita fornecem informações valiosas.
Damon
20
Eu concordo com Damon. Essa era uma pergunta válida e para a qual muitas pessoas gostariam de ouvir uma resposta. Eu acho que o SO se tornou muito zeloso ao fechar as perguntas.
Webdorm
O estouro de pilha é mais adequado para perguntas e respostas absolutas, ou seja, coisas técnicas que têm uma resposta concreta, não aquelas perguntas em que opiniões diferentes podem ser válidas ou onde a resposta correta depende estritamente do caso de uso / projeto.
Juan
a largura do site stackoverflow é de cerca de 1090px.odd!
Necktwi

Respostas:

221

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:

Mais sobre design responsivo:

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

Karl Fast
fonte
8
Você pode conferir: 960.gs, um site completo sobre designs usando 960 pixels em uma grade. A técnica é chamada "960 designs de grade".
BerggreenDK
3
Parece que o SO usa o 960 sem nada líquido. Apenas FYI
colítio
Seu site também não deve ter rolagem horizontal a 800 px. Talvez não pareça o melhor, mas tudo ainda deve se encaixar.
palswim
alguma atualização disso? Esta resposta tem vários anos agora.
Crashalot
29

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.

paxdiablo
fonte
14
Aguarde, 1024x768 pode ter o tamanho total da tela, mas isso geralmente é reduzido por barras do sistema, decoração de janelas, barras de menus, barras de ferramentas, barras de guias e potencialmente barras de rolagem e uma guia de navegação.
Svante
7
Mau conselho. Quem disse que o HTML não é para layout? Os layouts de líquidos são tão anos 90, onde a diferença na resolução era relativamente pequena. Tente ler alguns textos na fonte 10pt na tela 2560x1600 sem limite de largura imposto. Você começará a odiar esses layouts de líquidos muito em breve.
Wouter van Nifterick 19/01/09
1
@Pax: O que quero dizer é que é muito difícil criar um layout líquido que funcione bem em resoluções muito baixas e muito altas. Nunca encontrei um site que funcione bem no meu PDA e em um monitor de alta resolução, com o mesmo html. Os melhores são direcionados especificamente.
Wouter van Nifterick
1
concordado, layouts líquidos funcionam melhor para todos. Telas grandes sendo muito grandes não são um problema, pois esses usuários podem dimensionar seu navegador para as dimensões que melhor lhes convier.
Nailitdown
9
Para layouts líquidos, você sempre pode definir a largura máxima para colocar um limite superior para aqueles que executam um navegador maximizado em uma tela grande.
Richard
8

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 ...

Mark Brittingham
fonte
Eu estenderia a declaração para dizer que forçar a rolagem multidirecional é uma possível transgressão. O hori-scroll pode ser ótimo se feito corretamente. deanoakley.com thehorizontalway.com/html/css/urban-outfitters
typeoneerror
2
O que precisamos são de duas novas teclas no teclado, "Página à esquerda" e "Página à direita".
21420
@TypeOneError, também não se sente bem em navegar, não é natural.
UnkwnTech 19/01/09
@TypeOneError, o site do portfólio usou isso com bons resultados apenas por causa da "arrumação" e pela limpeza do design. No entanto, concordo com a Unkwntech de que não parece certo. Sem mencionar o fato de que a maioria dos usuários terá uma roda de rolagem vertical e não horizontal. Só isso torna a rolagem horizontal uma péssima idéia.
Eric
@ Eric, minha roda de rolagem rola horizontalmente nos dois sites vinculados. Eu diria que em portfólios onde você quer chamar a atenção e mostrar um estilo artístico, não há problema em mudar de ideia. Mas geralmente seria confuso para um usuário
monkeypushbutton
4

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.

Adam Dziendziel
fonte
É bom lembrar que as estatísticas do w3schools são para pessoas que visitam seu site. Seriam principalmente pessoas desenvolvendo páginas da web, o que não é uma seção transversal adequada da população. Olhando para as estatísticas dos navegadores, o firefox é de 44%, enquanto o IE é de 46%. Provavelmente não é uma boa amostra para avaliar a rede geral.
19409 Kibbee
3

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

Simon_Weaver
fonte
Você poderia adicionar um link para a palestra mencionada.
Sri Kadimisetty
3

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

Plynx
fonte
Link está morto. Agora faz parte do Google Analytics, acessível apenas com login, em Público-alvo> Tecnologia> Navegador e SO> selecione "Resolução da tela".
Dave Liepmann
2

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.

Kibbee
fonte
2

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.


fonte
Bravo, upvoting desde que você concorda comigo :-) embora em duas mentes sobre isso desde que você pode obter mais votos do que me :-( Oh bem, c'est la vie..
paxdiablo
+1 por aparentemente digitar esta resposta com o teclado do iphone. ;) Meu site parece ótimo em 1024 com o safari do iphone, fwiw.
Type1error
Com o iPhone acho que vai depender de como você segurá-la, vertical ou horizontal como, obviamente, as dimensões serão diferentes
Unkwntech
1
@TypeOneError não só eu digitá-lo no iPhone, eu estava andando para trás do pub também ;-)
@ Pax não, aparentemente eu não vou. ;-)
1

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

Nate879
fonte
1

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).

Greg Beech
fonte
Se você está com baixa votação, adicione um comentário sobre o motivo.
22411 Greg Beech
1

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.

Gato preto
fonte
1

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

typeoneerror
fonte
1

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

raio
fonte
1

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.

Sneakyness
fonte
Para acrescentar, comprei uma tela LCD widescreen de 23 polegadas 1080p (1920x1080) por US $ 150 nesta sexta-feira negra.
Sneakyness
2
Não vejo como a tela do desenvolvedor é importante para a questão? são os visitantes do site que são importantes como eu o vejo? Porque é uma boa recomendação para obter um monitor melhor ou mais de um monitor.
BerggreenDK
1

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.

Jesse
fonte
1

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.

Mike
fonte
1

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!

djdaniel150
fonte
0

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.

Wouter van Nifterick
fonte
Eu concordo totalmente com os dois pontos. Eu uso cerca de 960 de largura (assim, para uma tela de 1024x768). Os designers da Web também devem garantir que o comprimento da linha não seja muito longo, caso contrário, é realmente difícil de ler.
12613 Philip Morton
0

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.

EJ Brennan
fonte
0

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.

PartialOrder
fonte
0

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.

UnkwnTech
fonte
0

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.

XenF
fonte
0

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?


fonte