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”, a distância entre dois “dots” de mesma cor, ou pixels diferentes – na montagem da tela. Quanto mais próximos os dots, maior a definição da imagem, pois o espaço não iluminado entre os pixels é menor. E quanto mais pontos por polegada quadrada, menos cada um fica visível 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 e 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 10 tem 1620 x 2160 px – 264ppi
– O iPad Air tem 2224 x 1668 pixels – 264 pppDispositivos Android podem ter 1440 x 2560 pixels e 534 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 (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×640 pxs – foi usado por 11.28% dos usuários mundiais (dados site StatCounter).
■ 1280 x 800 pxs – um dos formatos que mais ganhou usuários no último ano. Em janeiro de 2017, foi usado por 5.14% dos usuários mundiais (dados site Market Share).
■ 1366×768 – em março de 2020 foi usado por 8.66% dos usuários mundiais (dados site Market Share).
■ 1920 x 1080 pxs – em março de 2020 foi usada por 7.95% dos usuários mundiais.
■ 375×667 – em março de 2020 foi usada por 4.36% dos usuários mundiais.
■ 414×896 – em março de 2020 foi usada por 4.01% dos usuários mundiais.
■ 360×780 – em março de 2020 foi usada por 3.19% dos usuários mundiais.
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 e realização de tarefas simples. 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 sites e aplicativos 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 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, aplicativos e plataformas online considera 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 também considerara 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 sites para desktop, 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.
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 1.4.2020)
Referências
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)