Resolução x Design e Layout

A resolução da tela determina o número de pixels que podem ser mostrados em cada dimensão: largura e altura <http://en.wikipedia.org/wiki/Display_resolution>. Ela tem um impacto no design e no layout da página. Ter uma resolução maior significa que você terá mais pixels para apresentar as informações na tela, ou seja, mais espaço disponível. Isso faz com que as informações sejam apresentadas em um tamanho menor e com mais riqueza de detalhes.

Veja nas figuras abaixo um mesmo site, exibido em um mesmo navegador, com diferentes tamanhos de resoluções. Observe como a exibição da página se modifica de acordo com a resolução empregada.

Nas figuras acima, você pode notar que numa resolução de tela 800x600, tudo parece muito grande. O espaço com conteúdo é maior que o espaço disponível na janela do browser, com isso surge a necessidade de usar a barra de rolagem horizontal. Já em resoluções mais altas, a exibição do site na janela do navegador é mais completa. O layout inteiro é visualizado. Há inclusive o aparecimento de espaços em branco que são maiores na resolução 1440x900 do que na resolução 1280x720.

Assim, pode-se concluir que uma resolução de tela alta mostra informações menores e faz com que se tenha mais espaço disponível para ocupar com conteúdo. Uma resolução menor mostra as informações grandes, diminuindo o espaço útil disponível.

Alguns de seus usuários trabalham com resoluções altas, como 1440x900 e outros com resoluções menores, como 800x600, ou até menor do que isso. Cabe a você assegurar que o site seja apresentado corretamente para seu público.

Um método para satisfazer a maior parte do público-alvo é projetar uma única versão do site que funcione bem com uma grande variedade de resoluções (WATRALL; SIARTO, 2009). Para fazer isso, basta identificar qual a resolução mais baixa com a qual o público-alvo do site trabalha. Projete para essa resolução e os usuários que trabalharem com uma resolução maior terão a página exibida sem problemas no browser.

Você consegue identificar a resolução de tela mais usada através das informações que você levantou sobre o público-alvo do site. Além disso, você pode levar em consideração as estatísticas, que podem ser visualizadas, por exemplo, no site da W3Schools <http://www.w3schools.com/browsers/browsers_display.asp>. Como descrito no site, 97% dos usuários tem uma resolução de 1024x768 ou maior. Dessa forma, você pode utilizar essa resolução como padrão durante o desenvolvimento e adequá-lo às resoluções mais baixas quando o layout estiver concluído.

Observe novamente as figuras acima, relacionadas às resoluções de tela, veja como a página se adequa perfeitamente a resolução 1024x768, talvez ela tenha sido projetada para essa resolução!

Para determinar qual largura uma página deve ter para que se acomode em sua resolução, você deve utilizar o primeiro número da resolução como referência, por exemplo, para criar uma página com largura fixa para uma resolução de 800 x 600, tenha o número 800 como referência, esse número indica a largura da tela. Sendo assim, uma largura de 760px para a página é um valor apropriado para essa resolução porque pode acomodar o conteúdo e margens.

Outra forma de adequar o layout à resolução utilizada é defini-lo como um layout líquido cuja largura é especificada usando porcentagem e com larguras máxima e mínima definidas, assim minimiza-se o problema do comprimento das linhas de texto comentado em aulas passadas. Dessa forma, o layout vai se adaptar à largura da janela e à resolução, veja na figura a seguir o exemplo do site da w3c, embora os elementos continuem grandes em resoluções mais baixas, o layout acomoda-se perfeitamente ao espaço útil disponível.

Enfim, só há uma maneira de saber se seu site realmente funciona bem em uma determinada resolução: testando!

Você deve mudar as configurações de vídeo de seu computador para testar o layout. Siga os passos definidos em <http://windows.microsoft.com/pt-BR/windows-vista/Change-screen-resolution>, caso você não saiba como fazer isso no Windows.