Blog CataBits

Retomando o tema e a pergunta freqüente em curso de webdesign: meu site deve ser feito em que tamanho (melhor dizendo, dimensão = largura e altura)?

Primeiro, vamos definir as

Resoluções de tela mais utilizadas: 800×600, 1024×768 e 1280×1024 pixels

E a Área útil de cada resolução, sem barra de rolagem: 760 x 410, 1000×600 e 1260×856

Áreas úteis para resolução de monitor de 800×600, 1024×768 e 1280×1024 pixels.

Atenção apenas a dois detalhes:

1. As resoluções de monitor 800×600 e 1024×768 são proporcionais entre sí, já a resolução 1280×1024 não é proporcional em relação às anteriores. Isso significa que um layout feito para as duas primeiras resoluções, se for visto na terceira, irá aparecer com faixas vazias acima e abaixo (ou cortado nas laterais, como nos filmes da TV tradicional).

2. As dimensões de área útil aqui citadas são apenas uma referência, pois é impossível prever qual navegador, monitor (14”, 15”, 17”, 21”, 29”) e barras do navegador o usuário está usando, o que pode ampliar ou reduzir a altura (área útil vertical) do navegador.

A variável mais fácil de controlar é a largura (área útil horizontal) tomando o cuidado de definir se seu layout terá ou não borda na página (HTML); neste texto vamos considerar que essa borda já foi retirada de seu layout.

Vamos colocar as situações mais comuns, dentro do que se convencionou chamar de melhores práticas, mas que não chegam a ser definitivas.

Layout encaixado na tela

- Layout fixo

Normalmente esse layout pressupõe ser visto sem alterações de forma, em escala (proporcional).

Assim sendo, seu layout tem de ser feito pensando minimamente para o usuário de 800×600 (área útil em torno de 760×410 pixels) e não deve ter barras de rolagem em nenhuma das “resoluções mais utilizadas”.

Layout em 800×600, 1024×768 e 1280×1024 pixels.

- Layout líquido (ou fluido) encaixado na tela

Nesse caso o layout se ajusta tanto horizontal quanto verticalmente, nas três resoluções de monitor (1024×768 e 1280×1024 pixels). Normalmente desenvolvido em Flash ou HTML (com programação). Se destina a páginas que devem ser vistas por inteiro, ocupando toda a área útil da janela do navegador, sem reduções de escala.

Layouts em 800×600 e 1024×768 pixels.

Layout vertical

- Largura fixa, alinhado à esquerda

Layout em 1280×1024 pixels.

Aqui apenas temos de ter o cuidado de dividir o layout em áreas de maior, médio e menor interesse.

Destina-se a sites onde o conteúdo pode ser distribuído (e exibido) em camadas de relevância sem alterar o layout. O conteúdo mais relevante deve poder ser visto, sem rolagem (horizontalmente), em resolução de tela 800×600 (largura da área útil em torno de 760 pixels); o conteúdo de médio interesse (também horizontalmente) em 1024×768 (largura da área útil em torno de 1000 pixels) e 1280×1024 pixels (largura da área útil em torno de 1260 pixels). O conteúdo de menor interesse a partir de 1280×1024 pixels, com rolagem.

- Largura fixa, centralizado

Aqui recaímos quase que na mesma situação, a área útil horizontal (mínima)deverá ser para 800×600 (largura de 760 pixels); nas demais resoluções as laterais ficam em branco (ou com fundo de página preenchido com cor ou imagem).

Se destina a sites que:

• precisam ter desenvolvimento rápido
• podem ter seu conteúdo em escala
• necessitam ter mesma diagramação, em qualquer situação

Layouts em 800×600, 1024×768 e 1280×1024 pixels.

- Layout líquido horizontal:

No sentido horizontal, se aplica em qualquer resolução. Normalmente feito em tabelas ou CSS, eventualmente em Flash.

Destina-se a sites que precisam ter seu conteúdo principal visto em qualquer resolução – mínima ou máxima – mesmo com alguma alteração no layout.

Layouts em 800×600, 1024×768 e 640×480 pixels (ou nas duas primeiras resoluções de monitor, com largura da janela do navegador reduzida).

Outras tendências
Uma das novidades na área de web, além da acessibilidade, tableless, webstandards é o design “Full flash browser” (numa tradução livre, “Flash em toda a tela do navegador”) que é um layout onde a navegação ocorre sem a tradicional barra de rolagem do navegador, mas percorre (ou “rola”) além da tela visível, em todas as direções.

Esse tipo de navegação é uma evolução dos sites com “navegação horizontal“, uma vez que

sugere navegação em qualquer sentido, além (e dentro) da tela do navegador, sem rolagem tradicional.

Uma outra tendência é o design em camadas múltiplas, onde as páginas ocorrem umas sobre as outras. O site da criadora do Harry Potter é um bom exemplo dentro desta tendência.

Como esse assunto evolui, em breve discorrerei sobre layouts para dispositivos móveis e telas wide-screen (panorâmicas).