Variações para cada usuário
Layout líquido: usar ou não?
Em 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 1024 x 760 podem ficar muito pequenas e difíceis de distinguir. Por outro lado, a leitura de textos em layouts criados para leitura em 1280 x 800 pode exigir dos usuários com resolução de 1024 x 7600 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, mostrou 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 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 (ou fazer uma varredura), o que pode ser atenuado com a configuração da largura para apenas 85% da página.
Por isto, é importante limitar a largura horizontal das interfaces web. Larguras maiores que 1.000 pixels são muito extensas e o usuário pode ter dificuldade de olhá-la por inteiro, precisa mover os olhos de um lado para outro.
■ 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.
Responsive design
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.
As media queries, componentes previstas nas especificações de CSS3, permitem melhor adaptação das telas aos diferentes tipos de mídias. Uma media query permite o direcionamento de algumas classes para dispositivos específicos, bem como verificar as características físicas do dispositivo que renderiza a tela.
Por exemplo, seguindo o aparecimento do WebKit (browser web de código aberto) móvel, algumas media queries passaram a ser adotadas para adaptar estilos CSS para o iPhone e telefones com Android, por exemplo. Para isto, incorpora-se uma query a um atributo de mídia num link de style sheet:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="nomedoestilo.css" />
A query tem 2 componentes, tipo de mídia (screen), e, entre parêntesis, a característica da mídia (max-device-width) a verificar, seguida pelo valor da resolução (480px).
Pode-se assim agregar tecnologias baseadas nos padrões web para que o design das telas se adapte a cada mídia.
Assuntos relacionados
► Design para a tela pequena
► Textos em telas pequenas
► Composição geral dos elementos (Layout)
► A configuração técnica do usuário
► Acessibilidade
► Testes : Flexibilidade
► Javascript
► CSS
Referências (layout líquido)
1) Screen size matters, dictating primary use of smart mobile devices, de Rick Vogelei (In-Stat, acesso em 12.1.2012)
► Responsive web design, de Ethan Marcotte (A List Apart, acesso em 6.10.2011)
► Five UI tips for Web apps, de Justin James (TechRepublic, acesso em 6.10.2011)
► 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)
► A look at responsive web design, de Scott Stanton (developerDrive, acesso em 23.12.2011)
► The perfect fluid width layout, de Chris Coyer (CSS-tricks, acesso em 19.11.2011)
► Liquid layouts the easy way (maxdesign, acesso em 19.11.2011)
► Actual browser sizes - Preview (Baekdal, acesso em 22.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
