O  layouts responsivos (“responsive design”, expressão cunhada por Ethan Marcotte), para interfaces web consideram as diferenças de resolução como facetas da mesma experiência. (2) Usam configurações de CSS para cada situação, especialmente a largura do dispositivo de acesso, com recursos eficazes e simples de implementar para a adaptação de interfaces para uso em diversos dispositivos, com diversas resoluções de tela.

As páginas de canais online são desenhadas para se adaptar não apenas a diferentes tamanhos de tela como aos diversos modos de interação com os usuários, por isto as configurações ergonômicas incluem desde o uso do polegar nos smartphones, duas mãos ao longo das laterais nos smartphones, ou mouse + rolagem + cliques + teclado nos notebooks e desktops.

O uso de recursos de HTML e CSS para o design responsivo, por meio de media queries e medidas de elementos e fontes com unidades relativas para o ajuste da interface à configuração dos usuários, permite a manutenção da usabilidade do conjunto, independentemente das condições de acesso.

Media queries (W3C), componentes previstos nas especificações de CSS, permitem a adaptação das telas aos diferentes tipos de mídias, com o direcionamento de algumas classes para dispositivos específicos, bem como para a verificação das características físicas da renderização da tela.

Por exemplo, seguindo o aparecimento do WebKit (browser web de código aberto) móvel, algumas media queries podem ser adotadas para adaptar estilos CSS para o iPhone e smartphones com Android. Para isto, incorpora-se uma query a um atributo de mídia em um 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.

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 navegação e 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.

É importante observar que a aplicação de design responsivo em mídias digitais não segue princípios mecânicos, referentes apenas aos tamanhos mais usados de tela. É preciso considerar o contexto de uso de cada dispositivo e prever como fica o conteúdo (textos, imagens, vídeos) publicado em cada caso. Assim, a escolha das principais resoluções de tela a considerar, e a verificação de como os elementos se reordenam para cada uma (breakpoints), é seguida de perto por uma avaliação editorial, que pode também decidir mostrar ou não alguns elementos de acordo com a resolução de tela de cada usuário.

Os breakpoints são verificados a partir de testes com as resoluções de tela que levam os elementos a mudar seu tamanho e/ou sequenciamento. Dependendo dos elementos, estes podem se redistribuir na telas de telefones pequenos, telefones grandes, tablets, laptops ou desktops. O design procura considerar as medidas e resoluções de tela mais comuns à maioria dos usuários.

Com a verificação das características das barras de navegação e dos espaços de publicação de conteúdo, pode-se até deixar de levar em conta algumas configurações. Alguns computadores podem apresentar a mesma configuração de um tablet de alta resolução, por exemplo.

A seleção de conteúdo relevante para interfaces móveis permite que as telas sejam compostas rapidamente nos monitores, prevenindo os problemas causados por velocidades de conexão mais lentas. É preciso cuidado com imagens com resolução mais  alta, que aparecem perfeitas em alguns monitores, mas levam muito mais tempo para carregar em conexões lentas. Autores como Luke Wroblewski defendem que deve-se começar um projeto pela interface móvel e a partir daí somar elementos até compor a interface para desktop. A estratégia a ser adotada, que envolve tanto adaptações das características técnicas quanto editoriais, depende fundamentalmente das características dos usuários e dos contextos de uso.

Autores como Elliot Jay Stocks defendem que o design responsivo deve mirar a independência de plataforma, na medida em que novos dipositivos e resoluções são criados a toda hora, e não se pode atender a todas as variações possíveis. (3) Deve-se projetar para uma experiência ideal, mas também agregar tecnologias baseadas nos padrões web para que as telas sejam renderizadas de modo adaptativo a cada mídia. → Exemplos – link externo.

Layout líquido

Em telas com layout líquido, o conteúdo se adapta à janela do browser porque larguras, margens, espaços, fontes, imagens, são especificados com valores que mudam proporcionalmente, em percentagens ou ems. Com a proliferação de formatos e o uso de telas cada vez mais largas ou mais estreitas, esta é uma solução que hoje se implementa como design responsivo, com o uso de media queries.

Especialistas como Jakob Nielsen há tempos recomendavam 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 apontava 3 critérios a considerar na adaptação da interface à resolução de tela:

Visibilidade inicial: Informações mais importantes da página situadas no alto, para que o usuário tome conhecimento do assunto geral sem precisar de 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.

Em telas com alta resolução, as letras dos textos criados com medidas fixas para 1024 x 760 poderiam ficar muito pequenas e difíceis de distinguir. Por outro lado, a leitura de textos em layouts criados para leitura em 1280 x 800 poderiam exigir dos usuários com resolução de 1024 x 7600 longas rolagens de tela.

Em ambos os casos, o layout líquido responsivo facilita a visualização dos textos (com 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.

Entre as desvantagens desta solução 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 em uma tela de alta resolução, as linhas de textos podem ficar muito longas e de difícil leitura, 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. Em telas com larguras maiores que 1.000 pixels, o usuário pode ter dificuldade de olhar o conjunto, precisando mover os olhos de um lado para outro.

(Atualizado em 4.4.2015)

Referências

3) Responsive web design: the war has not yet been won, de Elliot Jay Stocks i (acesso em 21.3.2013)

2) Responsive web design, de Ethan Marcotte (A List Apart, acesso em 6.10.2011)

1) Screen size matters, dictating primary use of smart mobile devices, de Rick Vogelei (In-Stat, acesso em 12.1.2012)