Resolução e tamanho de sites da Web

 

Atualizado em 16.3.2012 – créditos: http://www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm

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 – embora o iPad 3, com monitor de alta resolução, quebre um pouco esta regra. De qualquer forma, quanto maior o número de pontos (bits), mais definidas aparecem as imagens.

Do mesmo modo, quando 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 neutros 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 fevereiro de 2012, foi usada por 16.38% dos usuários mundiais (site Market Share) e por 22,27% dos usuários deste site (a segunda mais usada).

◊ 1366 x 768 pixels – um dos formatos que mais tem ganho usuários no último ano. Em fevereiro de 2012, foi usada por 13,14% dos usuários mundiais (site Market Share) e por 22,27% dos usuários deste site (a mais usada).

◊ 1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em fevereiro de 2012, foi usada por 12.72% dos usuários mundiais (site Market Share) e 7,56% dos usuários deste site.

◊ 1280 x 1024 pixels (1240 x980) – Em fevereiro de 2012, foi usada por 8,43% dos usuários mundiais (site Market Share) e por 7,8% dos usuários deste site.

◊ 1440 x 900 pixels – Em fevereiro de 2012, foi usada por 6,35% dos usuários mundiais (site Market Share) e por 8,53% dos usuários deste site.

A resolução 840 x 640 pixels (800 x 600) hoje é pouco utilizada. Em fevereiro de 2012, foi usada por apenas 1,55% 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).

A resolução de iPhones e iPods Touch é de 960×640, com 326 ppi de resolução. A dos iPads2 é de 1024 x 768, a dos iPads3, é de 2048 x 1536. 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 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 (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 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. ► 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 ► Exemplos – link externo. (2)

Agradecimentos a Herminio Vitoria, pelas dicas e pelas trocas de ideias.

Leia mais em http://www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm#ixzz1vF6Rr4L8

About professores

Professor particular de informática em Curitiba especializado em atender a Terceira Idade. Atendo apenas na casa do aluno.

Related Post