A resolução de monitores de dispositivos digitais indica o número de pontos (ou pixels) que compõem a imagem que aparece na tela. Uma tela com 1920 x 1080 mostra 1920 pontos em cada uma das 1080 linhas do monitor, ou 2.073.600 pixeis reais.

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.

Em trabalhos impressos, a densidade de pontos impressos por polegada é medida em DPI, ou “dots per inch”. Quanto maior a densidade dos pontos, menos ficam visíveis, e maior a definição da imagem. Quanto menor a densidade de pontos em relação à resolução de tela, menos definida fica a imagem impressa.

Este conceito também é aplicado para a tela de monitores, e a medida utilizada é a de PPI, ou “pixels per inch”. Se uma tela com resolução de 1920 x 1080 tiver 30 polegadas de largura, sua resolução horizontal será de 64 PPI (1920 pixels/30 polegadas).

Computadores com Windows têm resolução de tela de 96ppi. Os Macs têm resolução entre 72 até 120ppi, mas dispositivos com Retina display, lançados depois do Iphone4, têm resolução bem mais alta:

– Os iPhones 6 e 7 têm telas com 1334 x 750 (326 ppi) ou 1,920 x 1080 (401 ppi)
– O iPad 5 tem 1136 x 640px – 326ppi
– O iPad Air, 2048 x 1536px – 264ppi

A resolução de iPhones 3GD é de 320×480, com 264 ppi. A dos iPads2 é de 1024 x 768, a dos iPads3, é de 2048 x 1536. Os MacBook Pro têm a maior resolução dos computadores atuais: 220ppi.

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 640 x 480 (240 ppi), 470dp x 320 (160 ppi) e 426 x 320 (120 ppi).

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

Pode-se ver por esta diversidade, que a densidade de pontos não tem mais relação direta com o tamanho do monitor, como havia no início da década de 2000, quando um monitor grande indicava que poderia ser configurado com maior resolução. Hoje os novos dispositivos quebram este padrão.

Quando em 2010 a Apple lançou o iPhone 4, com tela de 326 ppi (a ” Retina display”), logo seguida por outras companhias (que se referem às novas resoluções como “HiDPI”), a medida de objetos digitais baseada nos pixels dos dispositivos passou a não 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 resolução aumenta, as imagens diminuem. É um desafio para os designers atuais medir os elementos da interface com consistência.

De qualquer forma, quanto maior o número de pixels por polegada, mais definidas aparecem as imagens (embora o olho humano tenha um limite para identificar a definição de detalhes). Quando um monitor grande é configurado com baixa resolução de pontos, mostra imagens maiores, mais 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:

360 x 640 pxs – em janeiro de 2017, foi usado por 16,71% dos usuários mundiais (dados site Market Share).

1366 x 768 pxs – um dos formatos que mais ganhou usuários no último ano. Em janeiro de 2017, foi usado por 10,36% dos usuários mundiais (dados site Market Share).

375 x 667 pxs – em janeiro de 2017, foi usado por 9.75% dos usuários mundiais (dados site Market Share).

1920 x 1080 pxs – em janeiro de 2017, foi usada por 7,72% dos usuários mundiais.

1024 x 768 pxs – em janeiro de 2017, foi usada por 7,24% dos usuários mundiais.

320 x 568 – em fevereiro de 2015, foi usada por 5,92% dos usuários mundiais.

 414 x 736 – em fevereiro de 2015, foi usada por 3,63% dos usuários mundiais.

1440 x 900 pxs – em fevereiro de 2015, foi usada por 3,43% dos usuários mundiais. pode ser considerada como uma referência para o desenvolvimento de websites para desktop, ou 1020 x 780.

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 em um tamanho ou outro, ou em todos os tamanhos.

Para facilitar o acesso de websites projetados para computadores desktop, 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 computadores desktop, 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 a 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 1280×720 ou 16:10, resolução 1280×800, chegando a 1680×1050 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.

É importante considerar que pixels dimensionados em CSS têm medidas diferentes dos pixels que efetivamente são vistos nas telas. O navegador dos smartphones mostram telas com largura maior do que a resolução real dos dispositivos – em muitos casos, a imagem geral se adapta à largura disponível (a rigor, a resolução do pixel configurado em CSS aparece com mais precisão nas telas de desktop). Essa imagem da interface configurada em CSS que se adapta à tela do dispositivo, em que o pixel real (da resolução de tela) se adapta ao pixel virtual (do CSS), denomina-se viewport.

A diferença entre o tamanho do pixel real e do pixel virtual varia também de acordo com a ampliação manual da tela, usada para ampliar detalhes e facilitar o uso.

Resolução prioritária

No desenvolvimento de websites 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.

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.

No desenvolvimento de websites, a decisão sobre a resolução de tela prioritária a ser adotada como padrão depende do perfil da maioria dos usuários

As interfaces acima e abaixo se mantêm estruturadas em diversas resoluções de tela. O equilíbrio entre as áreas em branco e as áreas ocupadas com conteúdo permite que mesmo em resoluções maiores a composição das barras de navegação se mantenha equilibrada

No desenvolvimento de websites, a decisão sobre a resolução de tela prioritária a ser adotada como padrão depende do perfil da maioria dos usuários

O design responsivo (“responsive design”, 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.

(Atualizado em 26.6.2016)

 

Referências

Pixels, pixels ou pixels? Dicas de Web Mobile com viewport, Sérgio Lopes (Caelum, acesso em 26.6.2017)

Rethinking the pixel: It’s 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 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 (Fierce Cable, 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)

Designing for Retina display (bjango, acesso em 15.10.2014)

Emmet Re:View – extensão gratuita do Chrome que localiza automaticamente as resoluções configuradas em media queries e gera previews com todas as telas ao mesmo tempo, incluindo barras de rolagem (acesso em 18.7.2014)

Gridpak: gerador de malhas (grids) para design responsivo (Erskine Design, acesso em 23.8.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)