Layout: fixo, líquido/fluído ou elástico?

Quinta-feira, 19 de Outubro de 2006

Ao conceber ou redesenhar um website, normalmente coloca-se sempre esta dúvida: o layout vai ser fixo ou líquido?

Um layout fixo permite ter mais controlo sobre o website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.
Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com os layouts fixos.

Ambas as soluções têm os seus pontos positivos e negativos.

Layout Fixo

Pontos positivos:

• O webdesigner tem controlo sobre a forma como a informação é apresentada;
• As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto no ecrã;

Pontos negativos:

• Num ecrã com uma resolução grande, o website fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta;
• Menor acessibilidade, uma vez que o layout não se adapta às necessidades do utilizador;

Layout Líquido/Fluído

Pontos positivos:

• Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de ecrã do utilziador;
• Os conteúdos ocupam toda a área visível do ecrã, permitindo transmitir mais informação;
• Deixa de haver espaço vazio à volta do website;

Pontos negativos:

• Maior dificuldade na leitura de linhas de texto demasiado longas;
• Perde-se o controlo sobre o posicionamento de alguns elementos na página;

Não se pode dizer que um dos layouts seja melhor do que o outro porque ambos são opções válidas, dependendo do contexto do website que estamos a desenvolver. No entanto, existe um ponto intermédio: o layout elástico.

Layout Elástico

Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa. Na prática, isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma página com layout fixo.

Isto permite ter, ao mesmo tempo, controlo dos elementos na página por parte do webdesigner e controlo da largura da janela por parte do utilizador, eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores.

Outro factor interessante é o facto de, num monitor com uma largura muito grande (vamos imaginar um ecrã com 2028px de largura ) o nosso website elástico ocuparia cerca de metade do ecrã e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o website irá aumentar a sua largura máxima consoante o tamanho do texto!

Para conseguir este efeito, basta definir a largura máxima da página em unidades “EM”. Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ou seja, responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho.

Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. Caso a largura da janela seja inferior a 1024px, a página mantém-se fixa e o texto aumenta.

Para mais informações sobre como implementar este tipo de layout, consultem este artigo do Roger Johansson sobre Layouts Elásticos.