log - smart software development. great user experience

Responsive Design utilizado em diferentes dispositivos

Existe um novo conceito entre os web designers intitulado Responsive Design. A primeira pessoa que fez menção a este termo foi Ethan Marcotte num artigo intitulado Responsive Design que escreveu para o blog A List Apart.

No artigo o Ethan descreve o processo de como utilizar layouts dinâmicos juntamente com as media queries para redimencionar os layouts dos sites de forma a que estes se ajustem a qualquer tamanho de ecrã.

Mas afinal o que é o Responsive Design? Como refere Nick Pettit, a questão não é tanto o que é, mas sim os problemas que este pode resolver. Como sabemos os computadores já não são os únicos dispositivos que podem aceder à Web. Os smartphones e tablets evoluiram e com isso o panorama da Web para dispositivos móveis.

As pessoas esperam poder aceder à Web nos seus smartphones tão facilmente como o fazem nos seus computadores. Em resposta a esta necessidade começou-se a criar versões móveis dos sites. Cada site passou a ter a versão “normal” e uma bónus, a versão “móvel”.

O espectro de tamanhos de ecrã e resoluções está a aumentar a cada dia, e criar uma versão diferente do site para cada dispositivo é praticamente impossível. Este é um problema que o Responsive Design vem tentar resolver.

O termo Responsive Design, é a forma de, utilizando grelhas fluídas, layouts fluídos e as @media queries conseguir adaptar o site ao manancial de dispositivos com diferentes tamanhos de ecrã que existem hoje.

Desta forma um utilizador que esteja a ver o site num smartphone, num tablet, ou num pc de secretária, verá o site adaptar-se automaticamente ao tamanho do ecrã de cada um dos dispositivos.

Com o advento dos dispositivos móveis, o Responsive Design torna-se ainda mais apelativo, como refere Luke Wroblewski num artigo intitulado Designing for Mobile First.

Nesse artigo o Luke aconselha-nos a começar a desenhar o site no ecrã mais pequeno. Desta forma asseguramos que teremos um excelente site para dispositivos móveis, o que força os designers a focar-se no que realmente interessa aos utilizadores.

Qual a melhor forma de construir um site que seja “Responsive”? Depende sempre do site em questão, mas existe uma série de normas que começam a emergir como boas práticas.

Aqui ficam 9 dicas para implementar Responsive Web Design:

1. Utilizar as @media queries para redimensionar o layout para qualquer tamanho de ecrã, tendo sempre em atenção que só isto não o transforma num site responsive.
2. Utilizar layouts fluídos que consigam adaptar-se a qualquer tamanho de ecrã. Não devemos desenhar um layout para os iPhone/Android, outro para os tablets e outro para os computadores. Devemos sempre mantê-lo fluído, para o caso de aparecer um novo dispositivo com um tamanho de ecrã diferente.
3. Criar as grelhas do site baseadas no conteúdo do site. As grelhas que existem raramente servem o propósito do site, uma vez que elas são feitas para diferentes tipos de conteúdo e raramente se encaixam no tipo de conteúdo que o site vai ter. Os layouts devem ser criados a partir do conteúdo.
4. Começar com o tamanho mais pequeno. Devemos começar com o tamanho de ecrã mais pequeno, utilizando as @media queries para ajustar os elementos. Começar com uma coluna, para os smartphones e ir aumentando o tamanho do layout para ecrãs maiores, em vez de fazermos ao contrário.
5. Utilizar as bibliotecas de JavaScript para as Media Queries de forma a dar suporte aos browsers mais antigos que de outra forma não sabem o que fazer. Ao começarmos do tamanho mais pequeno para o maior os browsers dos computadores necessitam de lidar com as @media queries, precisamos de garantir que os browsers mais antigos funcionam, utilizando estas bibliotecas de Javascript.
6. Não utilizar o Photoshop/Fireworks. Devemos desenhar os nossos componentes no browser. É praticamente impossível desenhar um layout fluído no Photoshop. Começar no browser desde o primeiro instante é uma muito boa prática.
7. Redimensionar as imagens utilizando a propriedade img { max-width: 100%; }. Para imagens muito grandes devemos considerar utilizar um plugin de Javascript como o Responsive Images que permite fazer apenas o download das imagens para o dispositivo que estejamos a utilizar. Se estivermos num smartphone só faz o download das imagens utilizadas para esse layout permitindo desta forma poupar no tráfego de dados.
8. Carregar o conteúdo essencial primeiro. Pode haver elementos no site, que sirvam como conteúdo auxiliar. Devemos carregar esses elementos depois do conteúdo principal recorrendo ao JavaScript.
9. Não se preocupar com a perfeição. Haverá sempre utilizadores que não vão conseguir aceder ao site da melhor forma, seja por terem browsers demasiado antigos, ou por terem o JavaScript desativado. Esses utilizadores são cada vez mais raros. Se eles virem o layout para smartphones no computador, não é o fim do mundo. O site continua a ser perfeitamente usável.

Tweet Subscribe to feed