Layout: Fixo, Líquido ou Elástico?

Ivo Gomes - 19 de Outubro de 2006.

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

Um layout fixo permite ter mais controle sobre o web site 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ídico permite que a página se adapte à largura da tela do usuário, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centralizada, como acontece com os layouts fixos.

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

Layout Fixo.

Pontos positivos:

• O web designer tem controle 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 na tela;

Pontos negativos:

• Numa tela com uma resolução grande, o web site 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 usuário;

Layout Líquido/Fluídico.

Pontos positivos:

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

Pontos negativos:

• Maior dificuldade na leitura de linhas de texto demasiado longas;
• Perde-se o controle 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 web site que estamos desenvolvendo. No entanto, existe um ponto intermediário: o layout elástico.

Layout Elástico.

Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluídico. 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, controle dos elementos na página por parte do web designer e controle da largura da janela por parte do usuário, eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores.

Outro item interessante é o fato de, num monitor com uma largura muito grande (vamos imaginar uma tela com 2028px de largura) o nosso web site elástico ocuparia cerca de metade da tela 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 web site 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 usuário 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.

Obs. do MAQ: O layout deste site, o "Acessibilidade Legal", já foi um layout líquido. Entretanto, alterei-o para um layout elástico pelo fato de que alguns usuários reclamarem de que, ao usarem resoluções maiores que 1280 de largura, as informações laterais ficavam distantes e incômodas de serem vistas e utilizadas e, dependendo da tela (widescreem acima de 20 polegadas) e da resolução (acima de 1680) tínha-se de movimentar não somente os olhos, mas até a própria cabeça para se atingir todas as informações. Assim, meu layout preenche toda a tela até 1280 px de largura, exatamente segundo a recomendação do autor. Conforme ele próprio escreveu : "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 web site que estamos desenvolvendo". Entretanto, como estamos aqui considerando a acessibilidade dos sites, não é recomendável o desenvolvimento de layouts fixos, pois impedem a boa utilização deles por pessoas com baixa visão, que aumentam e diminuem o tamanho das letras e das resoluções de tela para maior conveniência de sua visão reduzida.

Disponibilizado em: 24/04/2008.