Variações para cada usuário
Tamanho e resolução da página
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 resolução de 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 do monitor.
Normalmente, quanto maior o monitor, maior a resolução ou densidade dos pontos com que se pode configurá-lo. E quanto maior o número de pontos, mais definidas aparecem as imagens.
Se, no entanto, 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 pretos até os limites laterais da tela.
■ As resoluções de tela mais utilizadas atualmente pelos usuários de PCs são:
◊ 1024 x 768 pixels (975 x 720) – ainda serve de referência para o desenvolvimento de web sites . Em janeiro de 2012, foi usada por 17,18% dos usuários mundiais (site Market Share) e por 14,42% dos usuários deste site.
◊ 1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em janeiro de 2012, foi usada por 13,28% dos usuários mundiais (site Market Share) e 14,45% dos usuários deste site.
◊ 1366 x 768 pixels – um dos formatos que mais tem ganho usuários no último ano. Em setembro de 2011, foi usada por 13,14% dos usuários mundiais (site Market Share) e por 20,85% dos usuários deste site.
◊ 1280 x 1024 pixels (1240 x980) – Em julho de 2010, foi usada por 8,48% dos usuários mundiais (site Market Share) e por 7,8% dos usuários deste site.
◊ 1440 x 900 pixels – Em setembro de 2011, foi usada por 6,47% dos usuários mundiais (site Market Share) e por 9,24% dos usuários deste site.
A resolução 840 x 640 pixels (800 x 600) hoje é pouco utilizada. Em janeiro de 2012, foi usada por apenas 1,09% dos usuários mundiais (site Market Share) e 0,78% dos usuários deste site (veja tabela de uso de resoluções por usuários deste site deste 2007).
As telas de dispositivos portáteis, como as de telefones móveis, têm resoluções bem menores do que a dos computadores pessoais e a interface, bem como o conteúdo, e devem prever o acesso em situações instáveis e de deslocamento.
A resolução de iPhones e iPods Touch é de 960x640, com 326 ppi de resolução. A dos iPads2 é de 1024 x 768 . A resolução dos tablets Galaxy, da Samsung, de 7 polegadas, é 1024 x 600, e a de 10 polegadas, 1280 x 800.
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 web 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ções a considerar no projeto de interfaces web
■ 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, tende a 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 amplas, é 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
Alguns autores, como Ethan Marcotte, defendem o chamado "responsive design", 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. 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.
Agradecimentos a Herminio Vitoria, pelas dicas e pelas 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
1) Screen size matters, dictating primary use of smart mobile devices, de Rick Vogelei (In-Stat, acesso em 12.1.2012)
► 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)
► Profissão web (acesso em 19.8.2009)
► Screen resolution and page layout (Alertbox, acesso em 6.8.2006)
► Scrolling and scrollbars (Alertbox, acesso em 1.8.2005)
Mais informação sobre o assunto (links externos)
► 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 (W3C Schools)
► iPhone development: 12 tips to get you started, de Stoyan Stefanov (SitePoint, acesso em 10.4.2009)
► Grids CSS: Examples (Yahoo Developer Network, acesso em 20.2.2009)
► Choose the overall page width – YUI grids CSS (Yahoo Developer Network, acesso em 20.2.2009)
► Five simple steps to designing grid systems – Part 4 Fixed (Mark Boulton, acesso em 7.8.2008)
► Five simple steps to designing grid systems – Part 5 Fluid (Mark Boulton, acesso em 7.8.2008)
► Rating: Blasting the myth of the fold (Boxesandarrows, acesso em 11.11.2007)
► CSS mastery: Fixed-width, liquid, and elastic layouts and faux columns (Web Reference, acesso em 7.9.2006)
