Projetar layout líquido é justiça com o usuário

Layout líquido é como é conhecida a diagramação que usa unidades de medida relativas no lugar de absolutas para determinar o espaço dos elementos em uma página web. Esse tipo de layout permite que a diagramação adapte-se à resolução de tela que está sendo usada pelo visitante de um site.

Embora seja muito pouco usado pelos desenvolvedores, layout líquido é um grande meio de fazer justiça com as preferências do usuário. Regra geral, quando se desenvolve um projeto para a web, usa-se geralmente menos de 800 pixels na largura da página. Isso acontece para se evitar a desagradável barra de rolagem horizontal. A medida menor que 800 pixels foi escolhida por conta da resolução de 800×600 pixels, a menor que se usa atualmente na maioria dos monitores.

O tamanho da resolução evolui com o tempo. Quando comecei a projetar para a web, no “dinossáurico” editor do Netscape, a resolução mais usada era 640×480 pixels. As páginas, portanto, tinham que ter largura inferior à 640 pixels. Hoje em dia, com monitores de 15 e 17 polegadas tomando conta do mercado, a resolução de 1024×768 pixels vem ganhando cada vez mais espaço, deixando o desenvolvedor em dúvida de que tamanho de páginas adotar.

800×600 ou 1024×768? que tal os dois?

É impossível saber que área de tela estará disponível para um projeto on-line. Além de poderem escolher diferentes opções de resolução de tela, o usuário pode não trabalhar com a janela do navegador maximizada, ou mesmo usar barras laterais de opções dos browsers, como as existentes no Internet Explorer, Firefox e Opera.

A decisão de usar larguras inferiores a 800 pixels, quase onipresente na internet comercial do Brasil, causa alguns problemas. Por exemplo, um cidadão investiu mais dinheiro para ter um monitor de 17 polegadas e, por isso, usa a resolução de 1024×768 pixels. Ele entra em um site qualquer e tem a área do site reduzida para o mesmo tamanho de alguém que usa 800×600. Centenas de preciosos pixels são desperdiçados à direita e à esquerda do site. Tremenda injustiça.

Os desenvolvedores tentam consertar isso de alguma forma. Portais como UOL, Terra e outros usam mecanismos que detectam se o visitante usa resolução maior que 800×600. Se isso acontece, o espaço que ficaria em branco é preenchido. Não com informações, mas com mais propaganda. Uma coluna inteira de anúncios. A área de informação, continua igual tanto para quem usa 800×600 quanto para quem vai de 1024×768.

Outra solução, esta mais restrita, é criar uma pré-home, onde o usuário deve dizer se usa 800×600 ou 1024×768. Essa solução tem dois problemas. Primeiro, nem todos sabem que resolução usa e como modificá-la. Segundo, não existem apenas esses dois tipos de resolução. E se o usuário utiliza 1152×864, por exemplo? Como fica?

as vantagens e desvantagens do layout líquido

Aqui no fator W, uso layout líquido. A coluna de informações varia de acordo com a área disponível na tela. Isso permite que tanto quem usa 800×600, 1024×768 ou 1152×864 vejam o site usando todo o espaço disponível na tela.

A diagramação não é totalmente variável. Existe uma largura mínima e uma largura máxima a ser alcançada. Isso é necessário para que o layout não se quebre quando encurtado demais ou a linha de texto fique longa demais quando a área fica mais larga. Calculei a largura mínima e máxima da coluna de texto de acordo com o estudo que concluiu que cada linha deve ter entre 40 e 60 caracteres. Isso, aliado a um contraste ótimo (preto no branco, por exemplo), aumenta a legibilidade do texto.

Infelizmente, o Internet Explorer ainda não compreende os comandos para largura mínima e máxima. É possível ludibriá-lo, usando hacks.

A desvantagem do layout líquido é que ele é bem mais difícil de projetar que o fixo. O desenvolvedor tem que observar diferentes resoluções, não pode usar posicionamento absoluto para os objetos e uma série de outros fatores. Talvez essa seja um dos motivos de o layout líquido não se propague como deveria na internet, fazendo justiça com os usuários. Acredito que a propagação irá acontecer quando quem projeta para a internet perceber que quem está no comando de fato é o usuário, e não há nada que possamos fazer contra isso.

exemplos de layouts líquidos

• Systm13
• TabCorp
• Slightly Remarkable