Variações para cada usuário
Tamanho e resolução da página
Atualizado em 7.3.2010A resolução do monitor indica o número de pontos (ou pixels) que compõem a imagem que aparece na tela do dispositivo digital. A resolução de um monitor com 800 x 600 mostra 800 pontos em cada uma das 600 linhas do monitor, ou seja, 480.000 pontos (ou pixels).
■ A qualidade da definição de uma imagem depende da relação entre o número de pontos por polegada quadrada (dpi, dots per inch) com que a tela está configurada, sua resolução, 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 que descrevem as imagens, mais definidas estas aparecem para os usuários.
Se, no entanto, um monitor grande é configurado com baixa resolução de pontos, mostra imagens embaçadas e indefinidas, pois precisa criar pontos "falsos" a partir da imagem de menor tamanho para ocupar toda a sua área.
■ As resoluções de tela mais utilizadas atualmente pelos usuários de PCs são:
◊ 840 x 640 pixels (800 x 600) - ainda considerada em projeto de sites de público amplo, embora proporcionalmente pouco utilizada. Em fevereiro de 2010, as estatísticas mundiais indicam que foi usada por apenas 2,9% dos usuários mundiais (site Market Share) e por 2,7% dos usuários deste site.
◊ 1024 x 768 pixels (975 x 720) - utilizada pela maioria dos usuários, serve de referência para o desenvolvimento de web sites. Em fevereiro de 2010, as estatísticas mundiais indicam que foi usada por 26,53% dos usuários mundiais (site Market Share) e por 35,28% dos usuários deste site.
◊ 1280 x 800 pixels (1280 x800) - mais horizontal, utilizada por um número crescente de usuários. Em fevereiro de 2010, as estatísticas mundiais indicam que foi usada por 19,71% dos usuários mundiais (site Market Share) e por 20,91% dos usuários deste site.
◊ 1280 x 1024 pixels (1240 x980) - também utilizada por um número crescente de usuários. Em fevereiro de 2010, as estatísticas mundiais indicam que foi usada por 10,52% dos usuários mundiais (site Market Share) e por 10,33% dos usuários deste site.
As estatísticas mostram que aos poucos os monitores de computadores têm hoje formatos muito heterogêneos, que variam para grandes telas para uso de PCs desktop e telas menores para uso em deslocamento.
Variação de tamanho e resolução cada vez maior
■ O espaço de publicação de conteúdo dos sites precisa considerar o aumento das diferenças entre largura máxima e mínima das telas de PCs, variando entre 800 e 1280, chegando a 1920 pixels.
Além disso, o layout das interfaces web precisa 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 dos PCs, comum nas larguras de 800 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 1920x 1200).
Em PCs, telas com a largura máxima de 1280dpi podem ter proporção mais quadrada (como a 1280 x 1024, proporção 5:4) ou mais larga, o que acontece cada vez mais com os monitores de TV.
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).
■ 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 tamanho ideal da página previsto no layout deve incluir o maior número de visitantes possível, com diferentes resoluções. ► Exemplo
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 situações.
Por apresentar compatibilidade com os monitores mais antigos, muitos desenvolvedores ainda consideram a resolução de 800 x 600 como base, com a largura-referência da interface de 750px, que leva em conta as dimensões do browser e de barra de rolagem laterais.
No projeto de intranets, como as condições de acesso são conhecidas, pode-se estabelecer uma resolução padrão que sirva de base para o desenvolvimento da interface.
As telas de dispositivos portáteis, como as de assistentes pessoais e telefones móveis, têm resolução bem menor do que a dos computadores pessoais, e a interface, bem como o conteúdo, devem prever o acesso em situações instáveis e de deslocamento. A resolução de iPods é de 480x320, com 163dpi de resolução.
Neste site
A tabela abaixo indica a variação (em percentual) de uso de algumas resoluções de tela pelos usuários deste site (dados do Google Analytics):
| Mês/ ano | 240x320 | 800x600 | 1024x768 | 1280x800 | 1280x1024 | 1440x900 | 1920x1200 |
| 7.2007 | - | 14,01 | 54,48 | 15,32 | |||
| 8.2007 | - | 15,23 | 58,36 | 12,16 | |||
| 9.2007 | - | 16,05 | 59,75 | 11,29 | |||
| 10.2007 | 0,01 | 17,04 | 56,52 | 11,37 | |||
| 11.2007 | - | 15,02 | 57,52 | 11,46 | |||
| 12.2007 | 0,01 | 11,8 | 55,41 | 14,12 | 0,09 | ||
| 1.2008 | 0,02 | 15,97 | 53,34 | 10,54 | 0,04 | ||
| 2.2008 | 0,01 | 11,11 | 53,36 | 15,75 | 0,01 | ||
| 3.2008 | - | 11,54 | 56,19 | 13,55 | 0,05 | ||
| 4.2008 | - | 11,95 | 57,32 | 12,10 | 0,08 | ||
| 5.2008 | 0,01 | 10,66 | 55,69 | 11,61 | 0,06 | ||
| 6.2008 | 0,07 | 9,05 | 54,25 | 13,01 | 0,05 | ||
| 7.2008 | - | 7,41 | 50,97 | 14,41 | 0,15 | ||
| 8.2008 | 0,01 | 8,54 | 52,11 | 13,6 | 0,07 | ||
| 9.2008 | 0,01 | 8,36 | 51,17 | 13,76 | 14,04 | 0,05 | |
| 10.2008 | 0,01 | 7,76 | 50,42 | 14,87 | 13,94 | 0,08 | |
| 11.2008 | 0,01 | 7,17 | 50,60 | 16,15 | 12,66 | 0,1 | |
| 12.2008 | 0,01 | 6,39 | 45,65 | 18,4 | 14,36 | 0,12 | |
| 1.2009 | 0,01 | 4,54 | 42,24 | 20,12 | 15,67 | 0,02 | |
| 2.2009 | 0,02 | 5,58 | 44,67 | 19,2 | 13,38 | 0,18 | |
| 3.2009 | 0,01 | 6,32 | 47,43 | 18,2 | 11,53 | 0,17 | |
| 4.2009 | - | 5,78 | 47,81 | 17,44 | 11,09 | 0,09 | |
| 5.2009 | 0,01 | 5,36 | 47,52 | 17,49 | 11,14 | 0,18 | |
| 6.2009 | - | 4,97 | 44,98 | 18,71 | 10,96 | 7,77 | 0,14 |
| 7.2009 | - | 4,46 | 41,38 | 20,68 | 11,97 | 7,38 | 0,09 |
| 8.2009 | - | 4,16 | 41,64 | 19,70 | 11,44 | 6,82 | 0,42 |
| 9.2009 | 0,03 | 4,2 | 42,51 | 19,06 | 10,78 | 7,51 | 0,19 |
| 10.2009 | - | 3,93 | 40,64 | 19,65 | 10,28 | 8,01 | 0,29 |
| 11.2009 | 0,02 | 3,79 | 41,36 | 19,06 | 10,10 | 7,33 | 0,25 |
| 12 .2009 | - | 3,31 | 37,45 | 21,11 | 9,83 | 8,28 | 0,2 |
| 1 .2010 | - | 2,39 | 33,12 | 21,78 | 11,8 | 8,72 | 0,27 |
| 2 .2010 | - | 2,7 | 35,28 | 20,91 | 10,33 | 8,13 | 0,27 |
Nos últimos 12 meses há forte declínio da configuração 1024x768, com aumento das resoluções maiores, especialmente de 1280x800 (wide screen). Há também tendência cada vez maior à diversificação de formatos.
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 (Interface web)
► Market Share (acesso em 19.8.2009)
► 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)
► Actual browser sizes - Preview (Baekdal, acesso em 22.9.2009)
► Mobile screens size trends (Sender11, acesso em 20.9.2009)
► More on mobile screen size trends (blog da mBricks, acesso em 20.9.2009)
► 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)