Qual é a largura e a altura 'mais comuns' para as quais os sites estão sendo projetados atualmente?

Estou trabalhando em um projeto de grupo e tentando fazer com que meus colegas enviem um desenho sobre a visão deles para uma inscrição on-line; Esta aplicação será visualizada através de um PC. Embora eu suspeite que não exista um padrão do setor, certifico que deve haver abordagens comuns para sites com layouts de largura fixa. Eu preciso conhecer o senso mais comum de proporções no setor.

Vamos manter esse protótipo simples e, portanto, não detectamos navegadores, larguras de tela etc. Então, pensei em pedir isso de uma maneira simples, com a esperança de obter uma resposta simples:

Qual é a largura e a altura 'mais comuns' para as quais as páginas da web estão sendo projetadas mais recentemente. Seria muito útil se eu pudesse localizar uma fonte quando digo aos meus colegas por que escolhi um senso específico de proporções para eles basearem seus desenhos.

Observe como eu fiz essa pergunta:

Não estou pedindo as resoluções de tela mais comuns.
Não estou pedindo os navegadores mais comuns.

Quero saber em quais dimensões a maioria dos sites está optando em relação aos layouts de tamanho fixo. Eu sei que as pessoas normalmente rolam e, portanto, a altura pode não fazer parte de um "padrão"; nesse caso, vou me contentar com a largura mais comum.

website-design

— John R
fonte

Respostas:

Como você disse, não há altura padrão, pois ela é extremamente fluida; portanto, use o que ajuda a visualizar melhor o seu design.

Para largura de 960 pixels de largura, parece ser o "padrão" atual para designs de largura fixa. É bastante comum que um site tenha sido dedicado a explorar layouts nessa largura .

(Suponho que você não queira que ninguém discuta sobre o uso de um design fluido?)

— John Conde
fonte

Realmente não existe uma largura padrão que você deva definir. A quantidade de pessoas que usam um monitor 1024x768 caiu drasticamente nos últimos anos, portanto, uma largura de 960 tem menos importância. Com o surgimento de tantos dispositivos novos (smartphones, tablets e laptops e desktops), você deve criar várias folhas de estilo para cada caso.

As consultas de mídia CSS permitem alterar os estilos com base na resolução da tela do usuário. Costumo criar sites com uma folha de estilo geral que lida com todo o estilo visual e depois separá-los para celular, tablet, desktop / laptop padrão e telas extra largas que estruturam a página.

Confira esta página no W3.org para alguns exemplos - http://www.w3.org/TR/css3-mediaqueries/

É mais trabalhoso, mas permitirá que o usuário obtenha a melhor experiência possível, independentemente do que usar para navegar no site.

— Carson
fonte

O que @ John Conde disse. Além disso, você deve levar em consideração quem é seu público-alvo. Por exemplo, se meu site for um blog de tecnologia ou gadget, é provável que meu público-alvo seja um pouco mais experiente em tecnologia do que o público normal, para que eu possa fotografar com mais de 1200 px de layout. Ou se eu estivesse focando um site / blog / fórum para webmasters, seria um pouco mais amplo.

No final do dia, descubra sua demografia em massa e siga o que funcionaria para eles.

Duas coisas MUITO importantes a serem lembradas ...

1) Se o seu design pode funcionar com mais de 900 px, não há razão para esticá-lo para 1200+ px, mesmo que seus dados demográficos possam pagar.

2) Verifique se você possui uma estrutura adequada que pode acomodar os usuários que podem não ter a resolução desejada.

— Adil
fonte

Não concordo com o ponto 2. Com uma tela ampla de 1366px, provavelmente a largura mais comum na maioria dos laptops vendidos nos últimos dois anos, você não pode instalar duas janelas de 900px uma ao lado da outra e ver as duas ao mesmo tempo. Se você tiver apenas um layout de 900px, estará desperdiçando 34% do seu espaço horizontal com espaço em branco. Nesse caso, 1200px seria uma largura ideal . Então, sim, há é uma razão para esticá-la.

— Nhinkle 22/03

@ nhinkle: Eu não acho que você realmente leu o ponto 2 .. o que sua resposta tem a ver com a instalação de duas janelas de 900 pixels ao lado da outra? Além disso, leia a pergunta corretamente para entender o que John R está pedindo. Esta não é uma discussão sobre casos de uso extremos, como você quer ter 2 janelas de 900 pixels próximas umas das outras ou, no meu caso, desejar que monitores de 1600 pixels (2 deles) façam um design. Pelo contrário, é sobre a grande maioria dos usuários que não são você ou eu ..

— Adil

Minhas desculpas, pretendia responder ao seu primeiro ponto, não ao seu segundo. Me desculpe se isso causou alguma confusão. Meu argumento ainda permanece: a grande maioria dos usuários possui telas suficientemente amplas para que um layout de 900px esteja desperdiçando muito espaço. Concordo com a maior parte do que você disse em sua resposta, mas sua primeira "coisa a ter em mente" não é verdadeira. Se seus dados demográficos puderem pagar 1200px, use esses 1200 px, caso contrário, você estará desperdiçando 300 pixels.

— Nhinkle

@ nhinkle: Você está interpretando mal o meu ponto # 1. Se meu design pode mostrar o site facilmente em 900px, por que eu o esticaria para torná-lo 1200px? Além disso, 13% dos usuários ainda têm uma resolução de tela de 1024x768 Concedido, é um número pequeno, mas grande o suficiente para desconfortá-los e perder vendas, cliques em anúncios, leads ou qualquer que seja o seu modelo de negócios ... (dados citados em: w3schools .com / navegadores / browsers_display.asp )

— Adil

Eu entendi o seu ponto. O que quero dizer é que, se seus usuários têm telas amplas o suficiente para usar um layout de 1200 pixels, você deve. Por exemplo, sites de troca de pilhas são otimizados para cerca de 1000 px de largura, mas muitos usuários solicitaram uma opção para visualizar a origem da postagem e a visualização de remarcação lado a lado, o que usaria mais espaço horizontal. O w3schools não é uma amostra representativa de usuários da web, mas, além disso, essa discussão foi para sites em que 1200 seria lógico se ele se encaixasse no design.

— Nhinkle