Variações para cada usuário

Tamanho e resolução da página web

Atualizado em 18.7.2014

A resolução do monitor de um dispositivo digital indica o número de pontos (ou pixels) que compõem a imagem que aparece na tela. Uma tela com 1366 x 768 mostra 1366 pontos em cada uma das 768 linhas do monitor, ou seja, 1.049.088 pontos.

A qualidade de definição de uma imagem ou texto que aparece na tela depende da relação entre o número de pontos por polegada quadrada (ppi, pixels per inch) com que a tela está configurada, sua resolução nativa e o tamanho físico do monitor.

Normalmente, quanto maior o monitor, maior a resolução ou densidade dos pontos com que se pode configurá-lo – embora o iPad 3 e o Air, com monitores de resolução 264 PPI (2048 x 1536), quebrem um pouco este padrão. De qualquer forma, quanto maior o número de pontos (bits), mais definidas aparecem as imagens.

Quando um monitor grande é configurado com baixa resolução de pontos, mostra imagens embaçadas e indefinidas, pois precisa criar pontos falsos da imagem de menor tamanho. Em alguns casos, pode "esticá-la", para ocupar toda a sua área, ou mostrar a área ocupada pela imagem com espaços laterais neutros até os limites laterais da tela.

Embora o mercado esteja cada vez mais fragmentado, as resoluções de tela mais utilizadas atualmente pelos usuários de PCs são:

1366 x 768 pixels – um dos formatos que mais ganhou usuários no último ano. Em junho de 2014, foi usado por 15,71% dos usuários mundiais (dados site Market Share).

1920 x 1080 pixels – em junho de 2014, foi usada por 8,02% dos usuários mundiais.

1024 x 768 pixels – ainda pode ser considerada como uma das referências para o desenvolvimento de web sites. Em junho de 2014, foi usada por 7,9% dos usuários mundiais.

1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em junho de 2014, foi usada por 7,11% dos usuários mundiais.

1280 x 1024 pixels – Em junho de 2014, foi usada por 6,7% dos usuários mundiais.

768 x 1024 pixels – Em junho de 2014, foi usada por 6,05% dos usuários mundiais.

A densidade de pontos média da maioria dos dispositivos digitais ainda é 72PPI. Mas este cenário está mudando rapidamente. A densidade de iPhones 3GD é de 320x480, com 264 ppi. A dos iPhone 5 e 5S, iPods Touch é de 960x640, com 326 ppi de densidade de pontos. A dos iPhone 5 é de 1136 x 640, com 326 ppi de densidade de pontos. A dos iPads2 é de 1024 x 768, a dos iPads3, é de 2048 x 1536 (sendo que o Retina Display apresenta densidade de pontos de 326 PPI). Os MacBook Pro têm a maior densidade dos computadores atuais: 200ppi.

A resolução dos tablets Galaxy, da Samsung, de 7 polegadas (WVGA854), é  1024 x 600, com 316PPI e a de 10 polegadas, 1280 x 800 (WXGA).

De modo geral, dispositivos Android com telas maiores, têm 960 x 720 e 320 ppi de densidade. Telas menores incluem tamanhos e densidades de large 640 x 480 (240 ppi), 470dp x 320 (160 ppi)
e 426 x 320 (120 dpi).

Blackberries têm resoluções como: 240x260, 320x240, 324 x 352, 240x320, 240x160, 480x360. O celular Xperia S, da Sony, é o dispositivo móvel com maior densidade de pontos,  342 ppi.

Pesquisas mostram que as telas maiores, como as de PCs, são adequadas para atividades produtivas e de leitura intensiva (como a de notícias), enquanto as menores, como as dos dispositivos móveis, são indicadas para comunicação e entretenimento. Por isto, é importante examinar os casos de uso de cada interface para priorizar o uso num tamanho ou outro, ou em todos os tamanhos.

Para facilitar o acesso de um web site projetado para PCs, definir uma medida mínima para a largura das colunas em layouts líquidos, que se adaptam à largura das telas – a adaptação irrestrita às telas estreitas dos dispositivos faz com que muitos textos fiquem ilegíveis, especialmente se o layout tiver muitas colunas.

Variações de tamanho e resolução

Os formatos dos dispositivos digitais estão ficando cada vez mais heterogêneos, variando entre as grandes telas para uso de PCs desktop e as telas menores para uso em movimento.

O espaço de publicação de conteúdo de sites e plataformas online precisa considerar o aumento das diferenças entre largura máxima e mínima das telas de PCs, que variam entre 320 a 2560 pixels ou mais (quando os usuários usam mais de um monitor).

O layout das interfaces web precisa também considerar a proporção entre a largura e da altura dos monitores, que apresenta grandes variações. Esta vai desde 4:3, padrão dos aparelhos de TV e PCs, comum nas larguras de 1024 a 1280dpi, até a proporção dos monitores de HDTV, wide screen (16:9, resolução 1280x720 ou 16:10, resolução 1280x800, chegando a 1680x1050 e 2560x 1600).

Em PCs, telas com a largura de 1280dpi, por exemplo, podem ter proporção mais quadrada (como a 1280 x 1024, proporção 5:4) ou mais larga. Estas diferenças de resolução e proporção aumentam ainda mais quando se considera as telas dos dispositivos móveis (Ver Dispositivos móveis : Textos em telas pequenas).

Resolução prioritária a adotar

No desenvolvimento de web sites para desktops, a decisão sobre a resolução de tela a ser considerada como prioritária depende do perfil da maioria dos usuários. Exemplo.

Os usuários médios, que navegam na internet, escrevem emails e textos, fazem planilhas, podem preferir monitores com resolução mais baixa, pois, além dos dispositivos serem mais baratos, as imagens e os textos ficam mais fáceis de ver e ler.

Pesquisa da Parse.ly, divulgada em 2014, sobre os tamanhos de telas dedispositivos usadas pelos usuários para acessar conteúdo, mostrava que 60% do total do tráfego de rede vinha de dispositivos com proporções 16:9 ou 16:10, ou desktops e laptops. O tráfego de dispositivos móveis representava 10%, chegando a 20% no horário da noite, sendo que 13,8% vinha de iPads e iPhones. (4)

Os usuários de programas gráficos profissionais para edição de vídeos e imagens, projetos web, visualização de imagens complexas, costumam usar monitores grandes, de alta resolução.

Os usuários de jogos costumam preferir as resoluções nativas dos monitores compatíveis com a resolução dos aplicativos, pois quando se aumenta a resolução, o desempenho do jogo tende a diminuir, na medida em que existem mais pixels a ser processados na tela.

No projeto de intranets, como as condições de acesso são conhecidas, pode-se estabelecer uma resolução padrão que serve de base para o desenvolvimento da interface.

Por apresentar compatibilidade com os monitores mais antigos, muitos desenvolvedores web ainda consideram a resolução de 1024 x 768 como base para o desenho de páginas, com largura-referência da interface de 960px, incluindo as dimensões do browser e de barra de rolagem laterais.

Como o público e as possibilidades de configurações e situações de acesso são amplos, é mais relevante a premissa de que o layout deve se manter estruturado em diferentes configurações. Desta forma, mesmo os usuários com resoluções de tela não prioritárias podem ter uma boa experiência de uso. O tamanho ideal da página previsto no layout deve incluir o maior número de visitantes possível, com uso de diferentes resoluções. Exemplo

O chamado "responsive design", ou design responsivo (expressão cunhada por Ethan Marcotte), permite a adaptação do design de interfaces web para um número cada vez maior de dispositivos, considerando as diferenças de resolução como facetas da mesma experiência. (2)

Para Elliot Jay Stocks, o design responsivo deve mirar a independência de plataforma, na medida em que novos dipositivos e resoluções são criados a toda hora, e não se pode atender a todas as variações possíveis. (3) Pode-se desenhar para uma experiência ideal, mas também agregar tecnologias baseadas nos padrões web para que as telas sejam renderizadas de modo adaptativo a cada mídia. Exemplos – link externo.

Agradecemos a Herminio Vitoria, pelas dicas e trocas de ideias.


Assuntos relacionados
Design para a tela pequena
Textos em telas pequenas
Testes : Resolução de tela
A configuração técnica do usuário
Layout líquido: usar ou não?
Acessibilidade
Javascript
CSS

Fontes e Referências sobre resolução de telas e web sites
4) Chances are you’re not reading this on a mobile device, de Derrick Harris (acesso em 3.5.2014)
3) Responsive web design: the war has not yet been won, de Elliot Jay Stocks i (acesso em 21.3.2013)
1) Screen size matters, dictating primary use of smart mobile devices, de Rick Vogelei (In-Stat, acesso em 12.1.2012)
2) Responsive web design, de Ethan Marcotte (A List Apart, acesso em 6.10.2011)
W3Counter (acesso em 6.4.2010)
Market Share (acesso em 6.4.2010)
Screen resolution and page layout (Alertbox, acesso em 6.8.2006)

Mais sobre o assunto (links externos)
Emmet Re:View – extensão gratuita do Chrome que localiza automaticamente as resoluções configuradas nas media queries e gera um preview com todas as telas ao mesmo tempo, incluindo barras de rolagem (acesso em 18.7.2014)
Responsive design device resolution reference (SpireLight Media, acesso em 22.10.2012)
Gridpak: gerador de malhas (grids) para design responsivo (Erskine Design, acesso em 23.8.2012)
Web design how-to: Get started with responsive web design, de Chris Converse (CreativePro, acesso em 16.3.2012)
A look at responsive web design, de Scott Stanton (developerDrive, acesso em 23.12.2011)
Estatísticas anuais de acesso global de uso de resoluções de tela, browsers, sistemas operacionais (W3C Schools)

Ferramenta para teste de sites em diversas resoluções
Telas (Design Adaptável, acesso em 7.4.2013)

Avellar e Duarte no Twitter Avellar e Duarte no Facebook Feeds da Avellar e Duarte Avellar e Duarte no Delicious