Variações para cada usuário

Tamanho e resolução da página web

Atualizado em 6.11.2013

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 1024 x 768 mostra 1024 pontos em cada uma das 768 linhas do monitor, ou seja, 786.432 pontos.

A qualidade da 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, com monitor de resolução 264 PPI, quebre um pouco esta regra. De qualquer forma, quanto maior o número de pontos (bits), mais definidas aparecem as imagens.

Do mesmo modo, quando um monitor grande é configurado com baixa resolução de pontos, pode mostrar 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 e é o mais usado atualmente. Em outubro de 2013, foi usada por 16,53% dos usuários mundiais (site Market Share) e por 22,22% dos usuários deste site (a mais usada).

1024 x 768 pixels (975 x 720) – ainda pode ser considerada como uma das referências para o desenvolvimento de web sites. Em outubro de 2013, foi usada por 8,22% dos usuários mundiais (site Market Share).

1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em outubro de 2013, foi usada por 8,14% dos usuários mundiais (site Market Share).

768 x 1024 pixels – Em outubro de 2013, foi usada por 7,24% dos usuários mundiais (site Market Share).

1920 x 1080 pixels – Em outubro de 2013, foi usada por 6,37% dos usuários mundiais (site Market Share).

1280 x 1024 pixels – Em outubro de 2013, foi usada por 6,11% dos usuários mundiais (site Market Share).

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 4 e 4S, iPods Touch é de 960x640, com 326 ppi de densidade de pontos. A dos iPhone 5 é de 640px x 1136px, 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, 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).

Design responsivo e resoluções a considerar

No desenvolvimento de web sites para PCs, a decisão sobre a resolução de tela a ser adotada como padrão prioritário depende do perfil da maioria dos usuários. → Exemplo.

O usuário médio que navega na internet, escreve emails e textos, faz planilhas, pode 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. O usuário que usa programas gráficos profissionais para edição de vídeos e imagens, projetos web, visualização de imagens complexas, costuma 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 existirão 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.

Na internet aberta, 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

Autores como Ethan Marcotte defendem o chamado "responsive design", ou design responsivo, segundo o qual o design de interfaces web para um número cada vez maior de dispositivos deve considerar as diferenças de resolução como facetas da mesma experiência. (2)

Outros, como Elliot Jay Stocks, defendem que 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
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)
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