João Gonçalves

Web Design para Multiplataformas – “Responsive Web Design”

Posted on 05. Ago, 2011 by João Gonçalves in noticias

Nos dias que correm, criar uma “presença digital” ou “presença web” para um cliente, implica alguma reflexão e representa um conjunto de desafios para o Web Designer. Qual é o cliente que hoje não gostaria de ter ou mesmo exige uma versão do seu site para tablets ou smartphones?

Ultrapassar as inconsistências dos browsers, as diferentes resoluções de ecrãs já por si só traduz-se num desafio para o Web Designer. Mas como ultrapassar os novos desafios que são apresentados pelas várias plataformas tecnológicas que oferecem a possibilidade de visualizar páginas web e como conseguir que o site do cliente seja consistente quer em PC’s , Portáteis, netbooks, tablets, smartphones, ebook readers e na TV?

A abordagem para a resolução deste desafio tem sido na sua grande maioria criar, subdomínios do domínio principal e optar por um design diferente para “mobile”. Mas então e para ver no iPad, no Galaxy, no Blackberry, no Nexus ou no Kindle? Cada um deles tem uma resolução diferente? O “aspect-ratio” é diferente? O Kindle não tem cores? Será que deve-se efectuar um layout personalizado para cada uma das plataformas existentes? Será isso financeiramente viável? Ou parte do público que utiliza uma plataforma vai ser sacrificado em detrimento de outro?

Umas das abordagens para este novo paradigma foi inicialmente introduzido por Ethan Marcotte: “Responsive Web Design”, o conceito é simples, em vez de criar layouts próprios e independentes para cada um dos dispositivos web existentes, é utilizada a tecnologia existente para tornar o layout não só mais flexível mas também adaptável às diferentes características (resolução, orientação, cor, “aspect-ratio”, entre outros) desses dispositivos. Um excelente exemplo desta abordagem poderá ser visualizado nesta demo: http://sn.im/.u-, o site http://colly.com/ é também um bom exemplo.

Este conceito é essencialmente baseado em 3 técnicas de HTML e CSS:
1. A utilização de “grids” flexíveis para layouts
2. A utilização de imagens flexíveis
3. A utilização de “Media Queries”

1. “Grids” flexíveis para layouts – Criar layouts flexíveis e adaptáveis a resolução do ecrã é essencial. Imaginemos um layout clássico com 2 colunas, menu à esquerda conteúdos à direita, se tivermos a visualizar numa resolução superior a 640px, com os ajustes adequados e utilização de “elastic layout” ou “liquid layout”, não haverá qualquer tipo de problema. Mas se tivermos a visualizar o mesmo site num smartphone com a resolução de 320px ou 480px (talvez as resoluções mais comuns em smartphones), o mais provável é aparecer o scroll horizontal. O ideal será adaptar este layout a uma única coluna quando a resolução for inferior a 640px e o menu em vez de ser lateral, passa para a parte superior da página, aumentando também o tamanho dos links para adaptação à tecnologia “touch” (Fitts’ Law em “Interface Design”). Não querendo abordar extensivamente deixo aqui duas boas referências para conseguir este resultado: http://sn.im/.rq (Fluid 960grid System) e http://sn.im/.0g (1140 css grid, 12 colums fluid to mobile), para mais referências relativas a layouts flexíveis podem visitar o site ZOMIGI (http://sn.im/.0i) .

2. Imagens Fléxiveis – além da flexibilidade e adaptação do layout, as imagens devem também se adaptar a resolução do ecrã. Para obter esse resultado, basta uma simples regra de css:
img {max-width:100%}
e porque não incluir aqui os vídeos também:
img, object {max-width:100%} ;
Desta forma garantimos a renderização da imagem/vídeo pelo browser não no tamanho original da imagem, mas adaptando-se ao tamanho do seu “container”, evitando desta forma o “overflow” da imagem quando o layout se adaptar de acordo com as características anteriormente referidas.

3. “Media Queries” – Aqui reside a técnica mais importante do conceito “Responsive Web Design”. Todos nós já usamos “Media Queries” quanto mais não seja para optimização da impressão de páginas web por parte do utilizador. A actual “candidate recommendation” para “Media Queries” no standard de CSS3 (http://www.w3.org/TR/css3-mediaqueries/) do W3C, inclui novos tipos de propriedades que nos permite filtrar um determinado “media” consoante a resolução, orientação, entre outros (device-with, orientation, aspect-ratio, color, …), desta forma se colocar um “Media Query”:

A folha de estilos “estilos480.css” será aplicada à página caso a interface tenha uma resolução inferior ou igual a 480px. Com esta técnica facilmente criámos uma folha de estilos para cada tipo de interface/plataforma, adaptando o layout do site automaticamente a qualquer tipo e característica da interface.

Resumindo, a abordagem e/ou conceito “Responsive Web Design” oferece-nos a possibilidade de criar um site flexível e adaptável às várias interfaces/plataformas existentes, independentemente da resolução de ecrã, orientação, cores, etc.
Não querendo afirmar que é a forma mais correcta de abordar o desenvolvimento de um site, é sem dúvida um método de “Design Thinking” centrado essencialmente nas necessidades e exigências do utilizador, são os conteúdos que se devem adaptar ao utilizador e não o contrário.

“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.”
— Andy Clarke