Tamanho e resoluo da tela digital

Atualizado em 2.10.2014
A resoluo de monitores de dispositivos digitais indica o nmero de
pontos (ou pixels) que compem 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 da definio de uma imagem ou texto que aparece na tela depende da relao entre o
nmero de pontos por polegada quadrada (ppi, pixels per inch) com que a tela est configurada, sua
resoluo nativa e o tamanho fsico do monitor.
Em trabalhos impressos, a densidade de pontos impressos por polegada chamada DPI, ou "dots per
inch". Quanto menor a densidade de pontos, menos definida fica a imagem impressa.
Este conceito tambm aplicado para a tela de monitores, e conhecido como PPI, ou "pixels per inch",
embora s vezes tambm se use o termo DPI como referncia resoluo de tela.
Computadores com Windows tm resoluo de tela de 96ppi. Os Macs tm resoluo entre 72 at
120ppi, mas dispositivos com Retina display, lanados depois do Iphone4, tm resoluo bem mais alta (o
iPhone 6 tem telas com 1334 x 750 ou 1,920 x 1080, 326 ppp; o iPad 5 tem 1136 x 640px, 326ppi; o iPad
Air, 2048 x 1536px, 264ppi). A resoluo de iPhones 3GD de 320x480, com 264 ppi. A dos iPads2 de
1024 x 768, a dos iPads3, de 2048 x 1536. Os MacBook Pro tm a maior resoluo dos computadores
atuais: 220ppi.
A resoluo 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, tm 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 ppi).
Blackberries tm resolues como: 240x260, 320x240, 324 x 352, 240x320, 240x160, 480x360.
O celularXperia S, da
Sony
, o dispositivo mvel com maior densidade de pontos, 342 ppi.
Pode-se ver por esta diversidade, que a densidade de pontos no tem mais relao direta com o tamanho
do monitor, como havia no incio da dcada de 2000, quando um monitor grande indicava que poderia ser
configurado com maior resoluo. Hoje os novos dispositivos quebram este padro.
Quando em 2010 a Apple lanou o iPhone 4, com tela de 326 ppi (a " Retina display"), logo seguida por
outras companhias (que se referem s novas resolues como "HiDPI"), a medida de objetos digitais
baseada nos pixels dos dispositivos passou a no funcionar mais. Uma linha de 100 pixels tem diferentes
comprimentos diferentes em diferentes telas, pode ter mais de 3 cm em uma e menos de 1 cm em outra.
Na medida em que a resoluo aumenta, as imagens diminuem. um desafio para os designers atuais
medir os elementos da interface com consistncia.
De qualquer forma, quanto maior o nmero de pixels por polegada, mais definidas aparecem as imagens
(embora o olho humano tenha um limite para identificar a definio de detalhes). Quando um monitor
grande configurado com baixa resoluo de pontos, mostra imagens maiores, mais embaadas 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 espaos laterais
neutros at os limites laterais da tela.
Embora o mercado esteja cada vez mais fragmentado, as resolues de tela mais utilizadas atualmente
pelos usurios de PCs so:
1366 x 768 pxs (SD) um dos formatos que mais ganhou usurios no ltimo ano. Em julho de 2014, foi
usado por 16,27% dos usurios mundiais (dados site Market Share).
1024 x 768 pxs (SD) ainda pode ser considerada como uma das referncias para o desenvolvimento
de websites. Em julho de 2014, foi usada por 9,97% dos usurios mundiais.
1920 x 1080 pxs (HD) em junho de 2014, foi usada por 8,02% dos usurios mundiais.
1280 x 800 pxs (HD) formato mais horizontal, utilizado por um nmero crescente de usurios. Em julho
de 2014, foi usada por 6,08% dos usurios mundiais.
1280 x 1024 pxs (HD) Em julho de 2014, foi usada por 6,75% dos usurios mundiais.
768 x 1024 pxs Em julho de 2014, foi usada por 5,43% dos usurios mundiais.
Pesquisas mostram que as telas maiores, como as de PCs, so adequadas para atividades produtivas e
de leitura intensiva (como a de notcias), enquanto as menores, como as dos dispositivos mveis, so
indicadas para comunicao e entretenimento. Por isto, importante examinar os casos de uso de cada
interface para priorizar o uso em um tamanho ou outro, ou em todos os tamanhos.
Para facilitar o acesso de websites projetados para computadores desktop, definir uma medida mnima
para a largura das colunas em layouts lquidos, que se adaptam largura das telas a adaptao
irrestrita s telas estreitas dos dispositivos faz com que muitos textos fiquem ilegveis, especialmente se o
layout tiver muitas colunas.
Variaes de tamanho e resoluo
Os formatos dos dispositivos digitais esto ficando cada vez mais heterogneos, variando entre as
grandes telas para uso de PCs desktop e as telas menores para uso em movimento.
O espao de publicao de contedo de sites e plataformas online precisa considerar o aumento das
diferenas entre largura mxima e mnima das telas de PCs, que variam entre 320 a 2560 pixels ou mais
(quando os usurios usam mais de um monitor).
O layout das interfaces web precisa tambm considerar a proporo entre a largura e da altura dos
monitores, que apresenta grandes variaes. Esta vai desde 4:3, padro dos aparelhos de TV e PCs,
comum nas larguras de 1024 a 1280dpi, at a proporo dos monitores de HDTV, wide screen (16:9,
resoluo 1280x720 ou 16:10, resoluo 1280x800, chegando a 1680x1050 e 2560x 1600).
Em PCs, telas com a largura de 1280dpi, por exemplo, podem ter proporo mais quadrada (como a 1280
x 1024, proporo 5:4) ou mais larga. Estas diferenas de resoluo e proporo aumentam ainda mais
quando se considera as telas dos dispositivos mveis (Ver Dispositivos mveis : Textos em telas
pequenas).
Resoluo prioritria
No desenvolvimento de websites para desktops, a deciso sobre a resoluo de tela a ser considerada
como prioritria depende do perfil da maioria dos usurios. Exemplo.
Os usurios mdios, que navegam na internet, escrevem emails e textos, fazem planilhas, podem preferir
monitores com resoluo mais baixa, pois, alm dos dispositivos serem mais baratos, as imagens e os
textos ficam mais fceis de ver e ler.
Pesquisa da Parse.ly, divulgada em 2014, sobre os tamanhos de telas dedispositivos usadas pelos
usurios para acessar contedo, mostrava que 60% do total do trfego de rede vinha de dispositivos com
propores 16:9 ou 16:10, ou desktops e laptops. O trfego de dispositivos mveis representava 10%,
chegando a 20% no horrio da noite, sendo que 13,8% vinha de iPads e iPhones. (4)
Os usurios de programas grficos profissionais para edio de vdeos e imagens, projetos web,
visualizao de imagens complexas, costumam usar monitores grandes, de alta resoluo.
Os usurios de jogos costumam preferir as resolues nativas dos monitores compatveis com a
resoluo dos aplicativos, pois quando se aumenta a resoluo, 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 condies de acesso so conhecidas, pode-se estabelecer uma
resoluo padro que serve de base para o desenvolvimento da interface.
Por apresentar compatibilidade com os monitores mais antigos, muitos desenvolvedores web ainda
consideram a resoluo de 1024 x 768 como base para o desenho de pginas, com largura-referncia da
interface de 960px, incluindo as dimenses do browser e de barra de rolagem laterais.
Como o pblico e as possibilidades de configuraes e situaes de acesso so amplos, mais relevante
a premissa de que o layout deve se manter estruturado em diferentes configuraes. Desta forma, mesmo
os usurios com resolues de tela no prioritrias podem ter uma boa experincia de uso. O tamanho
ideal da pgina previsto no layout deve incluir o maior nmero de visitantes possvel, com uso de
diferentes resolues. Exemplo
O chamado "responsive design", ou design responsivo (expresso cunhada por Ethan Marcotte), permite
a adaptao do design de interfaces web para um nmero cada vez maior de dispositivos, considerando
as diferenas de resoluo como facetas da mesma experincia. (2)
Para Elliot Jay Stocks, o design responsivo deve mirar a independncia de plataforma, na medida em que
novos dipositivos e resolues so criados a toda hora, e no se pode atender a todas as variaes
possveis. (3) Pode-se desenhar para uma experincia ideal, mas tambm agregar tecnologias baseadas
nos padres web para que as telas sejam renderizadas de modo adaptativo a cada mdia. 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 : Resoluo de tela
A configurao tcnica do usurio
Layout lquido: usar ou no?
Acessibilidade
Fontes e Referncias sobre resoluo de telas e websites
Rethinking the pixel: Its all relative now, Conrad Chavez (Creative Pro, acesso em 2.10.2014)
Designer's guide to dpi (Sebastien Gabriel, acesso em 23.8.2014)
4) Chances are youre 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 extenso gratuita do Chrome que localiza automaticamente as resolues configuradas
em media queries e gera 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)
Estatsticas anuais de acesso global de uso de resolues de tela, browsers, sistemas operacionais (W3C
Schools)
Ferramenta para teste de sites em diversas resolues
Telas (Design Adaptvel, acesso em 7.4.2013)
Interface
o Variaes para cada usurio
o Tamanho e resoluo da tela digital
o Layout responsivo
o Navegadores (browsers)
o O espao do browser na pgina