Variações para cada usuário
Layout líquido: usar ou não?
Atualizado em 22.9.2009Em páginas web com layout líquido, o conteúdo se adapta à janela do browser de cada usuário. Ou seja, a largura das ferramentas e das áreas de conteúdo aumenta à medida que a largura da tela aumenta, e diminui quando o monitor e/ou a resolução de tela é menor. Mas com a proliferação de formatos e o uso de telas cada vez mais largas, esta é ainda uma solução a considerar?
Especialistas como Jakob Nielsen recomendam o desenvolvimento de interfaces baseadas no chamado "layout líquido", em que os limites laterais das páginas são definidos em percentuais em vez de pixels.
Ele aponta 3 critérios a considerar na adaptação da interface à resolução de tela:
◊ Visibilidade inicial: Informações mais importantes da página localizadas no alto, para que o usuário possa tomar conhecimento do assunto geral sem precisar fazer rolagem vertical.
◊ Estética: Aparência da página e composição dos elementos dispostos de maneira harmônica em diferentes resoluções de tela (ver Screen resolution and page layout).
◊ Legibilidade: Textos fáceis de ler em páginas com colunas de diversas larguras, especialmente colunas nas mais estreitas.
Nas telas com alta resolução, as letras dos textos criados para leitura em 800 x 600 podem ficar muito pequenas e difíceis de distinguir. Por outro lado, a leitura de textos em layouts criados para leitura em 1024 x 760 pode exigir dos usuários com resolução de 800 x 600 longas rolagens verticais da tela.
Em ambos os casos o layout líquido facilita a visualização dos textos (especialmente se o tamanho das letras for configurado para variar proporcionalmente à resolução de tela). Portais com grande volume de acessos diários, como Amazom.com, Submarino e Americanas.com preferem usar este modelo de configuração, por incluir o maior número possível de usuários em suas lojas online.
O layout líquido também é mais confortável para os usuários que aumentam o tamanho das letras no browser, pois se mantém estruturado mais facilmente. ► Exemplos
■ Estudo realizado em 2001 pela equipe de usabilidade da universidade estadual de Wichita, EUA, mostra que o layout líquido foi percebido pelos usuários como o mais adequado para a leitura, a navegação e a localização de informações, em detrimento dos layouts mais estreitos, centralizados ou alinhados à esquerda da tela. Foi também percebido como o mais "profissional". (1)
Imperfeições do layout líquido
■ Mas esta solução também não é perfeita. Entre suas desvantagens está a difícil leitura em janelas pequenas, em que a largura da mancha que contém os textos fica muito estreita, especialmente em telas de baixa resolução - mas este problema pode ser atenuado com a configuração de larguras mínimas de colunas de textos.
Já se o layout ocupa toda a largura da janela do browser numa tela de alta resolução, as linhas de textos podem ficar muito longas e difíceis de ler, o que pode ser atenuado com a configuração da largura para apenas 85% da página.
■ O uso de recursos de HTML e CSS para o ajuste da interface à configuração dos usuários de perfil majoritário permite a manutenção da usabilidade do conjunto, independentemente das condições de acesso.
Alguns desenvolvedores utilizam também os chamados "hacks", ou recursos de programação que permitem a verificação da resolução do monitor do usuário e a apresentação de páginas desenhadas especialmente para estas condições.
No entanto, estas soluções costumam ser provisórias, na medida em que as mudanças tecnológicas vão rapidamente substituindo as configurações mais utilizadas por novas situações de acesso e uso.
■ A aderência aos padrões (standards) web e às normas do W3C é cada vez mais adotada tanto pelos desenvolvedores de hardware quanto dos softwares de acesso, e é uma referência para os desenvolvedores comprometidos com a compatibilidade e o uso amplo das suas interfaces em diversos dispositivos e circunstâncias de acesso à Internet.
De qualquer forma, o desenvolvimento de soluções que contemplem todas as situações de acesso, sejam diferentes dispositivos, programas, ou configurações, é cada vez mais difícil, e devem ser priorizadas situações que incluam o maior número possível de usuários e permitam que estes controlem ao máximo a sua experiência de uso - de acordo com o objetivo de cada veículo.
Assuntos relacionados
► Design para a tela pequena
► Textos em telas pequenas
► Composição geral dos elementos (Layout)
► A configuração do usuário
► Acessibilidade
► Testes : Flexibilidade
► Javascript
► CSS
Referências bibliográficas (Interface web)
► Liquid layout (Design interfaces - Patterns for effective interaction design, acesso em 6.2.2009)
1) What is the best layout for multiple-column web pages? (Software Usability Research Laboratory, acesso em 1.2.2009)
► Screen resolution and page layout (Useit, acesso em 6.8.2006)
► Scrolling and scrollbars (UseIt, acesso em 1.8.2005)
Mais informação sobre o assunto (links externos)
► Actual browser sizes - Preview (Baekdal, acesso em 22.9.2009)
► Mobile screens size trends (Sender11, acesso em 20.9.2009)
► Fluid grids, de Ethan Marcotte (A List Apart, acesso em 6.3.2009)
► Choose the overall page width - YUI grids CSS (Yahoo Developer Network, acesso em 20.2.2009)
▪ CSS mastery: Fixed-width, liquid, and elastic layouts and faux columns (Web Reference, acesso em 7.9.2006)
▪ Rating: Blasting the myth of the fold (Boxesandarrows, acesso em 11.11.2007