Responsive design: o que é?

https://www.plotcontent.com/wp-content/uploads/2014/04/responsiveDesign.jpg

Como detectar se um site precisa de ser responsive ou se já utiliza essa funcionalidade?

Muitos marketeers perguntam o que é exactamente o responsive design e qual a importância desta funcionalidade na performance global dos seus sites. De forma simplificada, explicamos os factores a ter em conta antes de decidir implementar esta funcionalidade no seu site.

O que é o responsive design?

Para os mais puristas (tipicamente programadores, webdesigners ou apaixonados sobre esta questão) importa diferenciar entre responsive design (design responsivo ou RWD) e design adaptativo (adaptative design ou AWD).

No responsive design (RWD) a pagina é construída numa grelha variável que muda consoante o browser, independentemente da resolução do ecrã, isto é, o conteúdo pode “separar-se” e realinhar-se automaticamente se existir essa necessidade.

No adaptative design (AWD) a página não está assente numa grelha variável mas sim numa série de resoluções de ecrã (320, 768, 1024, etc), podendo ter larguras fixas ou relativas (controladas por media queries).

Pode dizer-se que o responsive design é similar ao design adaptativo, só que acrescenta alguns passos e estará melhor preparado para dispositivos que no futuro venham a ter sucesso e grande penetração. Por uma questão de simplificação vamos “agregar” os conceitos e passar a chamar a ambos responsive design.

Genericamente, o responsive design é a funcionalidade que permite a um website adaptar-se ao ecrã onde é visto. Com esta funcionalidade deixa de existir a necessidade de ter um site mobile “paralelo” alojado tipicamente num subdomínio do site original (tipicamente o “m.marca.com”). Existem assim diferentes layouts para uma mesma página HTML, adaptados a diferentes resoluções de ecrãs (e por essa via a diferentes dispositivos e tamanhos de ecrãs).

O responsive design é uma funcionalidade que, acima de tudo, melhora a user experience (UX) dos utilizadores no acesso  a um determinado site. A introdução do responsive design num site implica um trabalho técnico de programação e de design de diferentes layouts das páginas para as resoluções que se justifiquem (as que tiverem um número/proporção de acessos que as justifique).

Como saber se o meu site precisa de responsive design?

O primeiro passo para saber se o seu site precisa de responsive design e quais as resoluções que devem ser alvo de criação de templates passa por fazer uma análise aos analytics do seu site. Este é um processo trabalhoso e pode implicar um investimento significativo (em muitos casos compensa mais lançar um site totalmente novo do que tentar adaptar o “velho” a templates responsive). Para o fazer, recomendamos que se ponha na pele dos utilizadores e veja que tal o seu site se comporta nos dispositivos com resoluções diferentes daquela para o qual foi pensado (PC com resoluções diferentes, portátil, tablets, iPad, iPhone e outros smartphones).

Um erro frequente é pensar que o responsive só se destina a adaptar o site a ecrãs com resoluções mais pequenas do que aquelas para as quais o site foi desenhado originalmente. Sendo certo que o máximo do ecrã deve ser aproveitado pelo marketeer para mostrar conteúdos, o responsive design pode fazer sentido mesmo em larguras de ecrã acima da média quando se verifica que uma percentagem significativa dos utilizadores visualizam o site em ecrãs com larguras iguais e superiores a 1280 pixéis (daqui para a frente designados por “pp”).

Exemplo de “consumos” tirados do analytics de um site nacional da área de media generalista com a funcionalidade responsive já activa:

41% das visitas são em resoluções com largura igual ou acima de 1366 pp.

25% das visitas são em resoluções com largura entre 1366 e 1280 pp.

15% das visitas são em resoluções com largura entre 1280 e 1024 pp.

7% das visitas são em resoluções com largura entre 1024 e 780pp.

10% das visitas são em resoluções com largura entre 780 e 320pp.

Esta repartição evidencia que num cenário em que existem recursos para se desenharem 5 versões diferentes tal faria sentido (1366pp, 1280pp, 1024pp, 780pp e 320pp). Num cenário mais económico (3 resoluções) faria sentido escolher 1366pp, 1024pp e 320pp (uma oferta para grande, média e pequena resoluções). Infelizmente, e de forma algo incompreensível, continuam a desenhar-se templates responsive em que a máxima resolução é de 1024pp (quando 80% das visitas vem de dispositivos com maior resolução) e depois oferecem versões de 780pp e 320pp (tipicamente desktop, tablet e smartphone)

Um bom exemplo deste raciocínio pode ser visto neste site da Plot (o mesmo poderia ter tido mais 33% de largura para 41% dos nossos visitantes se tivéssemos feito a declinação acima proposta):

Análise responsive design site Plot

O site da Plot podia mostrar mais conteúdo a 41% das visitas.

Análise responsive design site Plot

Crescimento previsto do site vai justificar existência de responsive design

 

Conselhos práticos antes de embarcar na “aventura do responsive

(Essa adaptação vai custar-lhe bastante mais tempo e dinheiro do que estima.)

1. Descubra qual a percentagem de utilizadores que actualmente já vêem o seu site “desconfigurado e/ou com a barra horizontal de scroll em baixo). O Google analytics dá-lhe essa possibilidade em:

Análise do google analytics

O google analytics é hoje um dos melhores amigos dos marketeers.

 

2. Pondere se os visitantes que não conseguem ver o seu site “devidamente” são importantes para si e se justificam que lhes ofereça uma versão responsive (na maioria das vezes são muito poucos mas ao mesmo tempo muito “queixinhas mas poderosos”).

3. Analise quais as declinações de responsive que quer ter em função dos consumos por resolução (também aqui a regra dos 80/20 se aplica. Isto é, 80% dos seus utilizadores possivelmente vêem bem o site na actual resolução).

4. Tente juntar a adição da funcionalidade responsive ao revamp do seu site. Provavelmente vai perceber que para implementar o responsive precisará de um site totalmente novo e mais vale fazer tudo bem desde o início, tornando-o mais moderno (pode contactar-nos, somos especialistas nesse processo). O custo de fazer tudo novo não deve ficar muito acima de só implementar o responsive no seu site velho.

5. Lembre-se que a implementação do responsive exige na prática que desenhe tantas versões do site quantas as resoluções que quer oferecer. Ora postulando que cada website tenha 10 templates diferentes (homepage, página de secção, página de artigo, página de vídeo, página de confirmação de registo e mais umas quantas) multiplique-as pelo número de resoluções possíveis e perceba que estamos a falar em ter de desenhar, pensar e discutir possivelmente mais de 30 páginas (com o custos e tempo que tal implica)

Sites que utilizam a funcionalidade responsive

Para os testar, lembre-se de minimizar um pouco o browser no seu ecrã (se aceder a partir de um PC com rato) e depois ir diminuindo progressivamente a largura do browser (para poder ver as diferentes resoluções para as quais o site foi desenhado).

Ajuste o browser para ver o que acontece ao conteúdo

Ajuste a dimensão do seu browser para perceber o movimento responsive

Cinnamontoast

Ab Aeterno Watches

SALT Surf

Visit Stockholm

Boston Globe

Saldo Positivo

Por Marcelo Leite, Head of Digital da Plot Content Agency


Subscreva já
The Plot Thickens
Para ter acesso exclusivo aos melhores conteúdos de content marketing, só tem que preencher estes dois campos.
*Odiamos spam e não partilhamos os seus dados com ninguém
Marque já um
Pequeno-almoço
Somos famosos pelos nossos pequenos-almoços. Deixe o seu nome e e-mail e nós entraremos em contacto consigo para lhe perguntar sobre que temas quer falar.
Na Plot não há spam nem partilha de dados com ninguém.
Venha conhecer a
nossa agência
Marcamos uma hora para lhe apresentar a nossa fantástica equipa editorial, os nossos designers, os especialistas em digital e em content marketing.
Na Plot não há spam nem partilha de dados com ninguém.