Tamanho e resolução da página web

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 tela com 1366 x 768 mostra 1366 pontos em cada uma das 768 linhas do monitor, ou seja, 1.049.088 pontos.

A qualidade de 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.

Normalmente, quanto maior o monitor, maior a resolução ou densidade dos pontos com que se pode configurá-lo – embora o iPad 3 e o Air, com monitores de resolução 264 PPI (2048 x 1536), quebre um pouco este padrão. De qualquer forma, quanto maior o número de pontos (bits), mais definidas aparecem as imagens.

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.

■ Embora o mercado esteja cada vez mais fragmentado, as resoluções de tela mais utilizadas atualmente pelos usuários de PCs são:

◊ 1366 x 768 pixels – um dos formatos que mais ganhou usuários no último ano e é o mais usado atualmente. Em abril de 2014, foi usada por 15,13% dos usuários mundiais (site Market Share).
◊ 1200 x 1800 pixels – formatos estilos portais ou estilos Blogs, ganharam mercado nos últimos anos. Tais modelos vencem a barreira da barra de rolagem e cada vez mais usuários gostam de encontrar chamadas das informações mais importantes na HOME (primeira página).
◊ 768 x 1024 pixels – ainda pode ser considerada como uma das referências para o desenvolvimento de web sites. Em abril de 2014, foi usada por 8,41% dos usuários mundiais (site Market Share).
◊ 1280 x 800 pixels – formato mais horizontal, utilizado por um número crescente de usuários. Em abril de 2014, foi usada por 7,24% dos usuários mundiais (site Market Share).
◊ 1920 x 1080 pixels – Em abril de 2014, foi usada por 7,17% dos usuários mundiais (site Market Share).
◊ 1024 x 768 pixels – Em abril de 2014, foi usada por 6,44% dos usuários mundiais (site Market Share).
◊ 1280 x 1024 pixels – Em outubro de 2013, foi usada por 5,84% dos usuários mundiais (site Market Share).
A densidade de pontos média da maioria dos dispositivos digitais ainda é 72PPI. Mas este cenário está mudando rapidamente. A densidade de iPhones 3GD é de 320x480, com 264 ppi. A dos iPhone 5 e 5S, iPods Touch é de 960x640, com 326 ppi de densidade de pontos. A dos iPhone 5 é de 1136 x 640, com 326 ppi de densidade de pontos. A dos iPads2 é de 1024 x 768, a dos iPads3, é de 2048 x 1536 (sendo que o Retina Display apresenta densidade de pontos de 326 PPI). Os MacBook Pro têm a maior densidade dos computadores atuais: 200ppi.
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 large 640 x 480 (240 ppi), 470dp x 320 (160 ppi)
e 426 x 320 (120 dpi).
Blackberries têm resoluções como: 240x260, 320x240, 324 x 352, 240x320, 240x160, 480x360. O celular Xperia S, da Sony, é o dispositivo móvel com maior densidade de pontos,  342 ppi.
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 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.