9 princípios básicos do design responsivo

A definição de design responsivo vem abrangendo várias vertentes do marketing e do design em si. Considerado uma tendência para 2015, já no ano passado, design e sites responsivos ganharam força, devido ao aumento de consumidores comprando smartphones e tablets, além da navegação na internet, que também migrou para dispositivos. Os designers e desenvolvedores agora precisam pensar no mobile - soluções criativas para facilitar a navegação dos usuários, para várias finalidades: desde e-commerce, que agora pode ser chamado de m-commerce, quanto sites comuns. Temos um material para você saber como criar um site, baixe o nosso ebook gratuito 'O passo a passo para desenvolver um site de sucesso'.

Fazendo uma breve definição, o design responsivo é quando o layout de um site adapta-se ao dispositivo utilizado. Há muitos anos, definiu-se que o tamanho padrão para criação de layout para sites seria 960 pixels. Isso levando em conta que a maior parte dos monitores têm resolução de 1024x768. Mas, com esta nova realidade a qual as pessoas utilizam telas de vários tamanhos, foi preciso adaptar-se. E é exatamente isto que o nome diz: o design "responde" ao dispositivo utilizado, tornando o site responsivo.

Entrar de vez nesta modalidade é garantir qualidade para qualquer layout produzido, não mais um diferencial! Por isso, confira abaixo os 9 princípios do Design Responsivo que foram traduzidos com alguns complementos do post do Sandijs Ruluks, co-founder do Froont:

• Design responsivo X Adaptativo
• Design responsivo e SEO
• O fluxo
• Breakpoints
• Unidades Relativas
• Valores mínimos e valores máximos
• Objetos filho
• Escolha por qual começar: mobile ou desktop
• Fontes Web ou Fontes do Sistema
• Imagens Bitmap ou Vetores
• Dicas para fazer um bom design responsivo

Design responsivo X Adaptativo

Ué, não é a mesma coisa? Não. O design responsivo flui de acordo com o dispositivo utilizado. Já o adaptativo é a forma antiga de se trabalhar com dispositivos, onde o conteúdo aguarda o navegador terminar a expansão. No adaptativo, há um código para cada versão do site e dispositivo. Exemplo: código para quando o site for exibido em monitor, outro para smartphones.

Por mais que sejam muito similares, design responsivo e design adaptativo não são a mesma coisa. Sua finalidade, sim, é a mesma: tornar sites possíveis de serem visualizados em qualquer dispositivo, móvel ou não, sem prejudicar a experiência do visitante. O que os difere é o modo como isso é feito e como eles alteram o tamanho padrão de site e seu layout.

No design responsivo há uma questão de flexibilidade. Ou seja, quando o site detecta que está sendo acessado por um dispositivo móvel, ele ativa o layout responsivo e automaticamente é alterado para ser visto da melhor forma possível naquele aparelho, seja um celular, um tablet ou um desktop. Ele acompanha as medidas da tela, o que significa que sempre irá preenchê-la.

Já o design adaptativo é construído de maneira ligeiramente diferente. Ele possui medidas fixas para cada resolução, e não apenas "se estica" para preencher ou reduzir o espaço utilizado. Por exemplo: se um site que possui design adaptativo for acessado em um monitor que tem a resolução 1024px, ele apresentará o design construído especificamente para esses 1024px. O mesmo site, ao ser acessado em um celular com 320px, apresentará o layout de 320px.

As vantagens do design responsivo são o preenchimento total da tela, sua flexibilidade com diversas resoluções e a relativa facilidade em relação à construção do layout. Por outro lado, ele pode ser mais complexo de ser aplicado por trabalhar com porcentagens, não medidas fechadas, e de qualquer maneira precisa de um limite máximo e mínimo. Já o design adaptativo garante um site sempre muito bem diagramado e alinhado em várias resoluções, mas isso também o torna mais pesado. Além do mais, é preciso construir mais do que apenas um layout responsivo, já que cada um responderá a uma resolução diferente.

Design responsivo e SEO

SEO significa Search Engine Optimization e é uma sigla com a qual você iria esbarrar uma hora ou outra. O SEO é um dos principais componentes do marketing digital, e trata de otimizações feitas em sites e seus conteúdos para que ele se torne mais "amigável" para os buscadores, por assim dizer. Ou seja, quanto mais aprimorado for o SEO, maiores as chances de um bom posicionamento no Google, por exemplo.

No geral, quando falamos de SEO, falamos muito sobre palavras-chave nos posts e em estruturação de texto. Mas, acredite ou não, o design responsivo também tem um grande impacto na otimização!

Isso porque, entre os diversos algoritmos utilizados pelo Google para identificar os sites e ranquea-los, está o Hummingbird. Esse algoritmo foi implementado unicamente para favorecer os sites que possuem um layout responsivo, já que isso faz com que haja apenas uma URL e não há necessidade de redirecionamento. Quando um usuário faz uma busca no Google pelo celular, se ele clicar em um site não-responsivo, a velocidade será baixa e isso exigirá um "duplo" trabalho do Google, já que ele será redirecionado para a versão mobile. No design responsivo, o clique será único e direto ao ponto.

Embora se pense com frequência, quando se fala em design responsivo, em resolver questões como por exemplo a abertura de telas em vários dispositivos ou ainda, a construção de sites especificamente para dispositivos mobiles e outros, o conceito de design responsivo vai além e garante, dentre outras coisas, uma compreensão maior sobre os produtos e serviços da empresa, com foco no funil de vendas e resultados otimizados de CRM.

Concentrando-se no layout de um site, por exemplo, que é uma das melhores formas de se começar a pensar em um design responsivo para o site, é preciso atentar para 9 princípios básicos, de modo que o seu público alvo seja devidamente impactado com a campanha.

O fluxo

Enquanto em monitores você pode livremente projetar o layout na horizontal, no responsivo você precisa pensar em como o conteúdo, cores e formas serão dispostas na vertical. Pense em um smartphone, por exemplo. Quando um site se adaptar, o conteúdo é empurrado para baixo e isso se chama fluxo. Se algo ficar estático, as imagens que se adaptarem irão "empurrar" ou se sobrepor ao rodapé, por exemplo.

Breakpoints

Muitas pessoas ao trabalharem com web design e na construção de layouts responsivos, contam com as media queries, que facilitam o trabalho de adaptação de um layout responsivo. Mas criar media queries para cada tamanho existente seria complicado, e não faria fluir os breakpoints. Os "pontos de quebra" são partes no layout que devem responder ao dispositivo. Um site normalmente tem três colunas, mas acessado de um smartphone deve ter apenas uma coluna. E assim por diante.

Unidades Relativas

Deixando um pouco de lado os pixels, no design responsivo você precisa aprender a trabalhar com porcentagens. Além disso, não se fala somente em unidades estáticas. Estas unidades relativas se adaptam de acordo com a tela. Neste sentido, ao desenhar um layout você não diz que ele tem 1000 pixels, mas sim, ocupa 100% de uma tela.

Valores mínimos e valores máximos

Um conteúdo visto de uma televisão de 50" é diferente do mesmo visto em um smartphone. Mas imagine uma imagem ocupando toda a tela de uma televisão enorme, mesmo que haja apenas uma informação pequena. Por isso existem os valores máximos e mínimos, que auxiliam na limitação do quanto determinado elemento deve expandir ou compactar.

Objetos filho

Este princípio é voltado também aos programadores. Quem mexe com código deve pensar na usabilidade de um site responsivo. Por isso, agrupar códigos permite que eles sejam mais fáceis de controlar. Neste conceito, até vale utilizar pixels estáticos para que logo ou colunas, por exemplo, movam-se juntos, evitando que quando um site responda a uma tela, estes objetos não se movam soltos.

Escolha por qual começar: mobile ou desktop

Tudo vai depender do projeto trabalhado, se é necessário que a versão mobile fique pronta primeiro, defina prioridades. Começar pela versão mobile pede um design muito mais enxuto, o que não é necessário em uma versão desktop.

Fontes Web ou Fontes do Sistema

As webfontes possuem maior variedade e podem dar uma cara legal ao design do site responsivo. No entanto, elas demoram mais a carregar. Evite layouts pesados e que demoram a carregar em mobile! Isso faz com que o usuário desista de ver aquele conteúdo. Por praticidade e agilidade, é recomendado utilizar fontes do sistema.

Imagens Bitmap ou Vetores

Quando for desenhar um layout, verifique se logo e imagens possuem muitos detalhes. Eles irão carregar melhor se estiverem em bitmap (de preferência .png, .jpg). Caso contrário, pode utilizar vetores, com o formato SVG. Eles são mais leves, porém, pense em quais navegadores aquele layout será exibido: navegadores mais antigos não reconhecem ou carregam lentamente vetores em SVG.

Ao migrar para o design responsivo, alguns cuidados devem ser tomados. Esconder conteúdo, devido às limitações de um layout mobile pode prejudicar o objetivo do conteúdo de um site. Isso deve ser equilibrado também para evitar o "inchaço" de conteúdo, o que torna um site pesado de ser carregado na versão mobile, por exemplo. Manter o layout organizado previne que o usuário abandone o site. Pesquisas mostram que 74% de usuários de mobile desistem de um site se ele não carrega em 5 SEGUNDOS! É muito pouco tempo e tenha em mente que estes usuários de tablets e smartphones irão mexer em um site versão mobile da mesma forma que fariam na versão desktop.

O que um desenvolvedor e um designer devem lembrar é a usabilidade: a forma como uma pessoa consome conteúdo em um desktop não é igual a uma TV, que não é igual a um smartphone. Por isso, é preciso pensar em botões, rolagem, para que a experiência de navegação seja natural, não importando o dispositivo.
Stephen Hay, designer e palestrante americano, oferece diversos conselhos aos designers que estão entrando no mundo responsivo: "Pergunte-se sempre, qual é a informação principal que eu desejo passar? Tudo o que você acrescenta em um layout tem o potencial de estragá-lo. Isso é realmente necessário?". Stephen é autor do livro Responsive Design Workflow, que dá várias dicas e passos para construir um bom layout, além de programar com leveza. Vale a pena pesquisar a respeito e ter à disposição soluções inteligentes para criar layouts e sites responsivos eficientes.

Dicas para fazer um bom design responsivo

Seguindo estes princípios, não tem como não criar um layout fora de série!

Agora, vem também uma outra parte muito importante, que é a responsividade do site. De nada adiante ter um site moderno, com um layout show de bola se o site só abre no navegador do desktop.

Por tanto, veja algumas dicas importantes para deixar seu site acessível em qualquer lugar e plataforma. Seu sucesso será muito maior!

- Utilize ferramentas de otimização de imagem

Dependendo do segmento ao qual seu site fará parte, é indispensável que as imagens sejam devidamente trabalhadas e armazenadas no tamanho e extensão adequadas. Isto porque, se a imagem tiver uma resolução alta demais, em uma extensão inadequada, já será dificílimo abri-la no desktop, imagine no celular ou tablet?

Seus clientes devem através de imagens leves, nítidas e de boa qualidade, entender melhor o que propõe e oferece a sua empresa e principalmente, de que forma podem usufruir dos produtos ou serviços que ela oferece. Desta forma, aprenda a trabalhar com programas de edição de imagens ou contrate profissionais que tenham este domínio.

- Não esqueça a orientação de tela

Importante salientar que, independente do tipo de site, muitos usuários de smartphone utilizam o aparelho na opção “landscape”, o que significa que, com o aparelho de pé ou deitado, será possível visualizar o site automaticamente conforme o tamanho da tela. Desta forma, não será difícil que, se um site não se adequar rapidamente ao formato e “virada” de tela, o cliente simplesmente desistirá de acessá-lo.

- Pense no tamanho dos botões

Botões pequeninos, que somente são enxergados pelo desktop, são um grave problema. É preciso criá-los de forma que, em qualquer plataforma, sejam fáceis de serem visualizados, compreendidos e clicáveis, para que o usuário tenha êxito ao apertá-los com o dedo.

- Menos é mais

Filtrar as informações no site é sempre muito importante. Se o site não estiver com o conteúdo na “medida certa”, afastará os clientes, mais do que poderia conquistá-los. Nos dias de hoje, ninguém quer perder clientes, não é mesmo?

Com todos estes princípios e dicas, é fundamental que cada passo seja seguido a risca, de forma que o site fique 100% funcional, rápido de ser acessado e acessível a qualquer dispositivo móvel.

Não se pode negar que um bom conteúdo atrai muito mais clientes do que podemos imaginar. É uma propaganda gratuita, graças a recomendação de outros usuários que serão fidelizados.

A pergunta que fica é: Depois disso tudo, você quer fidelizar o seu público-alvo? Por que ainda não pensou em criar um site original e responsivo? Mãos à obra!