Projetar layout líquido é justiça com o usuário
Publicado em 15.12.2005 na categoria Design
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.
Achei a matéria interessante. Mas senti a falta de exemplos práticas e tutoriais explicando como fazer. Sair do “teórico” e partir para o prático.
Achei muito interessante também o termo “layout líquido”, nunca tinha ouvido falar. Tentarei me aprofundar mais.
Agradeço as informações passadas na lista WD,…
Grande abraço.
Só um comentário técnico:
Tamanho de monitor não tem necessariamente relação com resolução de tela.
Posso muito bem usar 1024×768 em um monitor 14”, assim como posso usar 640×480 em um de 21”.
O q manda mais, nesse caso, é a placa de vídeo do usuário.
Gostei da matéria, muito interessante, outro dia me apanhei com este fato, quanto estava construindo uma loja virtual em php, meu monitor é de 14 polegadas, estava em uma lan e lá o monitor usava resolução de 1021×768, me assustei com aquilo, tudo estava tão esquisito, nada como visto no meu micro, foi então que lí sobre layout líquido em um livro e vi algumas alternativas. Gostei da matéria neste link, mas, desculpe minha sinceridade, detesto quando alguem fala do problema e não da exemplos práticos, um tutorial, dicas, kd…
Oziel Evangelista
Achei a matéria interessante. Mas senti tambem a falta de exemplos práticas e tutoriais explicando como fazer.
se puder mandar exemplos e tutoriais ou colocar oline ficaria 10 obrigado
Que povo mais preguiçoso…
Tem um monte de tutorial e de cursos pra fazer.
Mas brasileiro é assim, quer tudo mastigado.
Ainda bem que tá cada vez mais difícil projetar pra web; um dia só sobrarão os profissionais, quem estuda, se dedica e não pega códigos prontos pra o espertão ganhar todo o crédito.
Comentário inútil o seu, Rodrigo.