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

https://stackoverflow.com/questions/456250

19-08-2019
|

Pergunta

Existe algum padrão em resolução comum site?

Estamos mirando monitores mais recentes, talvez, pelo menos 1280px de largura, mas a altura pode varia, e cada navegador podem ter diferentes alturas da barra de ferramentas também.

Existe alguma espécie de padrão para isso?

Solução

O conselho nos dias de hoje é:

Otimizar para 1024x768 . Para a maioria dos sites esta cobrirá a maioria dos visitantes. A maioria dos registros mostram que 92-99% das suas visitas serão mais de 1.024 de largura. Enquanto 1280 é cada vez mais comum, ainda existem lotes em 1024 e alguns abaixo disso. Otimizar para isso, mas não ignore os outros.

1024 = ~ 960 . Respondendo por rolagem, bordas de janelas, etc, a largura real de uma tela de 1024x768 é cerca de 960 pixels . Algumas ferramentas são baseadas em um tamanho um pouco menor, cerca de 940 . Esta é a largura recipiente padrão na Twitter inicialização .

não projetar para um tamanho . tamanhos de janela variar. Não assuma o tamanho da tela é igual tamanho das janelas. Projetar para um mínimo razoável, mas assume que vai ajustar.

Use design responsivo e layouts líquidos . Use layouts que irá ajustar quando a janela é redimensionada. As pessoas fazem isso muito um, especialmente em monitores grandes. Esta é uma boa prática para CSS. Existem várias estruturas de front-end que suportam esta.

móvel Tratar como um cidadão de primeira classe . Está ficando cada vez mais o tráfego de dispositivos móveis o tempo todo. Estas introduzem ainda mais os tamanhos de tela. Você ainda pode otimizar para 960, mas usando técnicas de web design responsivo significa sua página irá ajustar com base no tamanho da tela.

exibição do navegador Log info . Você pode obter números reais sobre o assunto. Eu encontrei alguns números aqui e aqui e aqui . Você pode também rig seu site para recolher os mesmos dados.

usuário irá rolar por isso não se preocupar muito com altura . O velho argumento era que os usuários não iria rolar e qualquer coisa importante deve ser "acima da dobra". Este foi anulada anos atrás. Usuários rolar um monte .

Mais sobre resoluções de tela:

Saiba 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 Multi-dispositivo (2012, 14 Mar) Luke Wroblewski . Catálogos a maioria dos padrões populares para layouts de tela multi-dispositivos adaptáveis.

Ferramentas e frameworks front-end para o design responsivo e layouts líquidos:

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

Outras dicas

Bad idéia, eu acredito. A questão toda em separar o conteúdo de layout foi para permitir a sua página web a ser exibido em qualquer tipo de navegador.

Colocar em limitações artificiais, tais como um tamanho de tela mínima irá limitar o seu mercado.

Dito isto, eu acredito que cada área de trabalho deve ser capaz de exibir 1024x768. Mas o que acontece com os navegadores rodando em iPhones ou outros dispositivos desafiou-screen, ou mesmo aqueles que não usar toda a sua área de trabalho para o navegador?

Em resposta à sua pergunta específica, não, eu não acredito que haja qualquer padrão para uma área mínima ou monitor comum em browsers.

Forçar o usuário para rolar horizontalmente é uma transgressão UI sério. A menos que você está especificamente a construção de um web site para uma população com um tamanho de tela conhecida, você é a mais segura garantia de que seu projeto trabalha com telas tão pequenas como 800 pixels de largura (cerca de 8% da população de navegar na web, se a memória não me falha). É sábio para torná-lo se adaptam bem a telas maiores, mas não à custa das pessoas ainda surfar em 800x600.

Aqui está outra coisa a considerar assim: nem todo mundo corre o seu navegador em tela cheia (eu não). Assim, a ideia de que se está OK para projetar para uma específica (e grande) "tamanho da tela" realmente não funciona para um número de razões.

Atualização em 12/15/2010: Quando eu respondi pela primeira vez esta questão, a 800 pixels era uma resposta apropriada. No entanto, neste momento, eu recomendaria 1024 pixels de largura (ou 960 como alguém pontos mais para fora). marchas tecnologia em ...

Aqui estão as estatísticas de 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ê quiser que seu site aparência agradável em altas resoluções usar o layout flexível.

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

Existem vantagens destas larguras para as suas redes predefinido (layouts de coluna) que funcionam bem com dimensões padrão para anúncios Se você fosse para incluir qualquer.

conversa interessante também vale a pena assistir.

YUI Base de

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

Eu diria que você só deve esperar que os usuários tenham um monitor com resolução 800x600. O governo canadense tem padrões que listam este como um dos requisitos. Embora isso possa parecer baixo para alguém com uma fantasia widescreen monitor, lembre-se que nem todo mundo tem um bom monitor. Eu ainda conheço um monte de pessoas correndo em 1024x768. E não é de todo incomum se deparar com alguém que está sendo executado em 800x600, especialmente em cafés web barato, enquanto viaja. Além disso, é bom ter para fazer a janela do navegador de tela cheia se você não quiser. Você pode tornar o site mais amplo em monitores mais largos, mas não faça o pergaminho usuário horizontalmente. Sempre. Outra vantagem de suportar resoluções mais baixas é que o site irá funcionar em telefones celulares e Nintendo Wii é muito mais fácil.

Uma nota sobre a sua, pelo menos, 1280 de largura, eu teria que dizer que da maneira ao mar. Mais 17 e até o meu 19 polegadas widescreen não monitores só suportam uma resolução máxima de 1280x1024. Eo de 14 polegadas widescreen laptop que eu estou escrevendo neste momento é de apenas 1280 pixels de largura. Eu diria que a maior resolução mínima você deve se esforçar para é 1024x768, mas 800x600 seria o ideal.

Todas as respostas até agora falar sobre monitores de desktop, mas eu estou usando estouro de pilha no meu iPhone e eu não acho que você deve excluir qualquer plataforma móvel, visando 1024 ou 1280 pixels horizontais. Marcar sua página para o navegador sabe o que todos os meios e torná-lo utilizável virá de graça, mesmo em leitores de tela e outro kit que você não tenha pensado.

É melhor para não atingir qualquer resolução específica, mas para se adaptar facilmente a muitas resoluções diferentes.

As diretrizes que usamos, que parecem ser bastante utilizado e são apoiados pelas figuras que começa a partir do Google Analytics, são para projetar o site para que ele vai trabalhar em uma tela que é de 1024 pixels de largura e 768 pixels alta (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 utilizam uma coluna central, cerca de 1.000 pixels de largura e com o conteúdo mais importante no top 500-600 pixels por isso é acima da dobra quando está sendo visualizado em telas desse tamanho.

Usando uma ampla disposição 1.000 pixels funciona razoavelmente bem em tamanhos de tela de até cerca de 1680 pixels de largura (tipicamente tão elevada como você vai ver em laptops, exceto os grandes 17" queridos), mas não começar a olhar um pouco bobo em uns 1.920 pixels de largura (computadores high-end, geralmente estações de trabalho), no entanto estas resoluções muito altas não são responsáveis ??por uma grande percentagem de tráfego na internet em geral - 2% ou menos (por outro lado, se você tem um público especialista como este site, a figura com altas resoluções pode ser um pouco maior).

Embora a melhor largura pode por 1024 você vai ter que ajustar a altura para conta para várias configurações do navegador (barra de navegação, marcador barra de ferramentas, barra de ferramentas de status, etc) e são responsáveis ??por configurações da barra de tarefas. Ele vai rapidamente cair o 768 para cerca de 550.

Seja qual for o seu tamanho navegador de destino, certifique-se de incluir espaço para barras de ferramentas do navegador, barras de status e barras de rolagem como acima. Internet Explorer (IME), muitas vezes tem mais de 100px de espaço vertical em barras de ferramentas e barras de status. Normalmente, se eu estou disparando para 1024 x 768, eu iria tentar criar um projeto de cerca de 960 - 980px de largura e 600px alta para ser seguro. Dessa forma, você acomodar rolagem se necessário, e algum espaço em branco agradável (se o projeto exige isso). Eu recomendo grades YUI para casos em que você precisa para tamanhos específicos de destino:

YUI Grade

Eu recebo perguntas muito com os designers sobre não apenas a largura mas que altura a utilização de 'tudo manter acima da dobra'. Aqui está uma resposta que dei recentemente -

Para largura, eu não sou um designer, mas eu li que 960px de largura é o caminho a percorrer estes dias, porque se presta a ser dividida em colunas que aparência agradável, e se encaixa muito bem na maioria dos monitores. Se você puder, criar um layout líquido -. Mas isso nem sempre é prático, dependendo o seu designer, suas habilidades CSS, as imagens e a quantidade de texto

(você sempre quero que haja 65-80 caracteres por linha, com um line-height de cerca de 1,15). Esta é a largura da coluna ideal para o texto, e que tenha sido provado ser muito mais rápido e agradável de ler do que muito ampla ou colunas estreitas)

No que diz respeito 'acima da dobra', eu só tenho que advertem contra o uso de qualquer conceito na web. rolagem horizontal pode e deve ser evitado, mas a rolagem vertical é algo que você não pode 100% evitar. Tudo o que posso dizer é que em uma tela 1024x768 (pelo menos 95% dos usuários têm que ou superior) você deve estar OK com um 600px alta bloco fixo. Mas há muitos formatos de exibição diferentes para fora lá, o cromo navegador pode levar até um monte de espaço, e nem todo mundo maximiza a janela do navegador.

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

E, finalmente, um bom artigo longo que entra em grande detalhe (que eu ia postar mais, mas SO diz que eu sou muito de noob) - Como projetar para Tamanhos Browser - baekdal.com

Eu pessoalmente sempre preso a largura máxima de 1000px, centrado no meio da página (via margem esquerda / direita: auto).

Se você está rodando a nada menos do que 1024x768, é hora de atualizar. Seriamente. É quase 2010. Você pode comprar monitores escaninho do negócio LCD com um res nativa de 1280x1024.

Eu sugiro que você dê uma olhada no media-consultas. Esta é uma nova adição útil para CSS que realmente faz muito sentido, você se perguntaria por que isso não foi implementado muuuito mais cedo. Basicamente, ele permite que você direcione atributos navegador (como máximo e mínimo-larguras) diretamente via CSS e ramificar o código de layout a partir de lá. Semelhante à criação de uma folha de estilo de impressão, você pode criar o seu desktop e layouts móveis em paralelo no mesmo arquivo, que retrocede o burro para o desenvolvimento.

flexível ou layouts líquidos não Restringir o projetar um pouco embora, por exemplo, se você usar imagens de fundo que têm de coincidir com a imagem de fundo do corpo.

Eu faria um pouco diferentes layouts CSS para o site e ter-los a aplicar dependendo da resolução do usuário, ou se isso não for possível (não cavei para que até o momento), torná-lo uma opção choosable.

Tudo bem, eu vejo um monte de desinformação aqui. Para começar, a criação de uma página web usando uma determinada resolução, dizer 800x600 por exemplo, faz com que a página de processar corretamente usando apenas essa resolução! Quando essa mesma página é exibida no monitor do PC portátil, ou em casa de outra pessoa, a página será exibida usando resolução atual dessa tela, e não a resolução que utilizados na concepção da página. Não crie páginas da web para uma resolução específica! Há também muitos formatos diferentes e resoluções de tela para esperar uma "one size fits all" cenário, que, com web design não existe. Aqui está a solução: Use CSS3 consultas de mídia 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 nós fizemos foi especificar 3 conjuntos de estilos que tornam em diferentes resoluções. No caso do nosso exemplo, se uma resolução de tela é maior do que 800px, o CSS para 1024 será executado em seu lugar. Da mesma forma, se a tela que exibe o conteúdo foi 1224px, 1280 seria executado desde 1224 é maior do que 1024. O site que estou trabalhando agora funções em todas as resoluções 800x600 a 1920x1080. Outro aspecto a ter em mente é que nem todos os monitores com a mesma resolução têm as mesmas telas de tamanho. Você poderia colocar laptops lado 15,4 a lado, enquanto ambos têm a mesma aparência, tanto poderia ter drasticamente diferentes resoluções, uma vez que nem todos os pixels são do mesmo tamanho em diferentes telas de LCD. Assim, consultas de mídia de uso, e começar a criar seu site com uma tela de laptop com alta resolução, particularmente 1280+. Além disso, criar cada consulta de mídia usando uma resolução diferente em seu laptop. Você pode usar as configurações de resolução no Windows para ajustar para baixo 800x600 e criando uma consulta de mídia no que res, e depois mudar para 1024x768 e criar outra consulta de mídia no que res. Eu poderia continuar e continuar, mas eu acho que vocês devem chegar ao ponto.

UPDATE: Aqui está um link para usar consultas de mídia que vai ajudar a explicar mais, Web Design inovador para dispositivos móveis com o Media Queries

Esse tutorial irá mostrar-lhe como projetar para todos os dispositivos. Há também tutoriais para consultas de mídia especificamente. Eu desenvolvi o site inteiro para render em todos os dispositivos, todas as telas, e todas as resoluções usando nenhum subdomínios, e apenas CSS! Ainda estou trabalhando no suporte para tablets e smartphones. O site torna perfeitamente em qualquer laptop, ou a sua TV 50 polegadas LCD, e muitas páginas funcionam perfeitamente em todos os dispositivos móveis. Se você colocar todo o seu código na página, então suas páginas irá carregar relâmpago rápido! Além disso, não se esqueça de prestar atenção à discussão nesse artigo sobre a CSS "background-size: capa;" ou "conter" propriedades, eles vão fazer o seu fundo gráficos fluidos e capaz de tornar perfeitamente em todas as resoluções.

Siga os locais tutoriais e você pode fazer uma única página web que presta sobre tudo e qualquer coisa!

Tente alvejar 1024 como a largura mínima. Tente como fica a 800, mas não incomoda muito fazendo esse trabalho. No 800x600 quase nenhum dos grandes sites estão indo para o trabalho, para que as pessoas que trabalham com essa resolução vão ter problemas o tempo todo mesmo.

Se você estiver indo para ir para um layout líquido, certifique-se de que o texto não recebe muito grande , porque quando as linhas são muito longos, tornam-se difíceis de ler. Essa é a principal razão pela qual a maioria dos sites tem uma largura fixa.

Eu direcionar os 1024 monitores de pixels (mas não usar 100% desse espaço). Eu desisti sobre aqueles com 800x600. Eu prefiro punir os poucos com hardware desatualizado, fazendo-os rolar, se eles precisam, contra punir todos com novos equipamentos, desperdiçando espaço.

Suponho que isso depende do seu público, e a natureza de vocês app embora.

Em última análise, esta não é uma questão de padrões ou melhores práticas para marcação, mas sim conhecer o seu público e certificando-se o seu site faz o que você quer que ele faça.

É mais importante considerar a largura do navegador viewport em vez de resolução de tela - você não pode presumir que todos os pixels em uma tela será alocado para o navegador (e mesmo que seja, você tem que subtrair cromo navegador). Se você tem acesso a análises que largura do navegador relatório ( NB. largura do navegador, não resolução da tela), então preste muita atenção.

É bom para tentar acomodar o maior número possível de janelas de visualização, mas existem algumas limitações. Alguns desafios podem ser manuseados com tipos de mídia CSS , outras não. Alguns podem ser manuseados com layouts fluidos. Mas layouts fluidos não pode trabalhar em todas as situações, dependendo do tipo de informação a ser exibido, o comprimento da linha, conforto leitura, etc. Alguns layouts fluidos não funcionam em telas de largura. A maioria pausa quando dimensionada abaixo de uma determinada largura, etc.

Por mais que eu pessoalmente gostaria de projetar para viewports ~ 960 pixels e para cima, você não pode sempre fazê-lo. Assim, em alguns casos, ainda é mais seguro para projetar para viewports <= 760 pixels ou menos (visualização 800 pixels de largura, maximizado) - embora o momento em que finalmente pode lançar esta limitação uma vez por todas - para o desktop, pelo menos - é muito rápido se aproximando.

Onde conversões são um problema - e você tem um layout de largura fixa - é melhor ter um bom motivo danado para colocar tudo o que o usuário precisa clicar para que o registo de dinheiro para ir "ka-ching" em qualquer lugar leste do pixel 760.

O mesmo vale para a navegação primária.

Finalmente, testar o seu layout em tudo o que você pode chegar em suas mãos. Grande. Pequeno. Área de Trabalho. Portátil. Os trabalhos. Não há nenhum substituto.

Eu apenas tomei uma amostragem de resoluções de tela de todos os sites de clientes que têm acesso, o que inclui mais de 20 sites em mais de 8 indústrias aqui estão os resultados:
alt texto http://unkwndesign.com/so/percentScreenResolutions.png
Com base nessa eu diria garante que ele fica bem em 1024x768 como é que a maioria aqui por um longo tiro. Também não se preocupar com a altura tanto, no entanto, tentar evitar que a maioria das páginas mais do que 1-2 páginas impressas em seu tamanho de fonte padrão, a maioria das pessoas não vai ler uma página por muito tempo, e se um usuário instala uma barra de ferramentas que ocupa espaço vertical, a minha preferência pessoal é que é o seu problema, mas eu não acho que é a de um grande negócio.

* nota a percentagem eleva-se a 100,05% devido ao arredondamento.

Tenha em mente que quanto maior a resolução, menor a probabilidade navegador de internet será maximiced.

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

Depende do que você deseja processar, mas eu iria com um layout de largura variável que não quebra em cerca de 800-900 largura.

A altura não é realmente um problema.

sbeam disse que 'você sempre quero que haja 65-80 caracteres por linha'. Isso não é verdade. Wikipedia, por exemplo, podem ter 180 caracteres por linha. Ou foi concebido para ser um determinado site?

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow