Responsive Design
Responsive Design é um conceito no qual a informação é apresentada de forma acessível e confortável para diversos meios de acesso, mas neste artigo iremos restringir a explicação referindo-se a aparelhos de diversas resoluções, pois, o assunto é extremamente extenso e complexo.
Responsive Design vs. Adaptive Design
Como vimos no artigo de Adaptive Design (caso não tenha lido, leia aqui), temos aqui dois conceitos muito parecidos, e que possuem uma pequena diferença. No design adaptativo é preciso criar diversos sites para cada tipo de aparelho, em contraponto temos o design responsivo no qual você irá implementar apenas um site e o mesmo irá se adaptar a diversos dispositivos.
É importante salientar que o responsive deisgn não resolverá todos os problemas já que não consegue ser totalmente otimizado principalmente referente ao peso e velocidade de carregamento da página, mas ainda é uma boa alternativa por conta do seu custo benefício.
Mobile First vs. Desktop First
De acordo com o relatório TIC Domicílios realizada pelo Comitê Gestor da Internet no Brasil, 58,7 milhões da população brasileira se conecta a internet exclusivamente por aparelhos móveis, observamos então que para criar um site é desejável que o mesmo possa ser acessível por qualquer dispositivo, ou seja, o que deve nos guiar no planejamento é a solução não o tamanho da tela.
Com isso conceitos como o mobile first surgem, este sendo uma forma diferente de visualizar o processo de criação do site, já que ao invés de fazer um site para o computador e adapta-lo para telas menores, você fará o inverso, ou seja, primeiro irá cria-lo para o celular e depois adapta-lo para o desktop.
Tecnicamente não existem diferenças em qual conceito vá utilizar, no entanto, haverá limitações no processo ou criação caso escolha o mobile, mas que facilitará na tomada de decisões futuras. Mas se preferir também é possível começar de ambos, dependendo unicamente de você está decisão vendo o que funciona melhor na situação que esteja.
Tamanho Máximo
Podemos construir sites responsivos que se adaptem até determinado tamanho (nesta etapa valores mínimos e máximos ajudam bastante no desenvolvimento) e a partir deste tamanho se manter da mesma forma, assim deixando de ser responsivo a partir de uma determinada largura.
Breakpoints
Breakpoint ou “pontos de interrupção” como o próprio nome já diz servem para definirmos pontos onde você deseja que o seu layout mude, um exemplo disso é ter duas colunas no desktop e apenas uma, nos dispositivos móveis. Mas não se esqueça de utiliza-los com cuidado, principalmente se não entender o que está influenciando.
Unidades Estáticas vs. Unidades Relativas
Aqui temos uma grande mudança de paradigma, pois, caso você queira implementar o responsive design da melhor maneira será necessário utilizar o máximo de unidades relativas possíveis, esta nada mais são que unidades que se adaptam dependendo do contexto, ou seja, mudam de acordo com o tamanho da tela.
Fluxo Fluido vs. Fluxo Fixo
O processo de diminuímos uma tela e o conteúdo ser empurrado para baixo, é chamado de fluxo. O fluxo pode ocorrer por meio de objetos fixos que se utilizam de unidades relativas que possuem um tamanho definido e como já foi mencionado devemos evitar este tipo de unidade, ou seja, deveremos evitar objetos fixos e utilizarmos objetos fluídos que utilizam unidades estáticas.
Imagens vs. Vetores
Sempre que possível devemos utilizar vetores no lugar de imagens, por exemplo, se redirecionamos os dois, enquanto a imagem distorce os vetores se adaptam, por isso as famosas “fontes de ícones” são tão comuns, pois, elas funcionam como vetores. Mas devemos manter também em mente o tamanho destas imagens, pois, é sempre bom otimiza-las antes caso as utilize, já os svgs cuidado com vetores com muitas curvas, pois, podem se tornar mais pesados que imagens.
Fontes de Sistema vs. Web Fonts
Fontes de sistema são fontes que já estão instaladas no seu sistema operacional e por conta disso podem variar de acordo com o sistema que você utiliza, assim sendo recomendado então a utilização de “WebDesign Safe Fonts” que são nada mais que fontes existentes em todos os sistemas (acesse aqui a lista com estas fontes).
Ou se preferir podemos utilizar “web fonts”, estas são carregadas pelo navegador e aplicadas ao seu site. Existem diferentes formas de realizar esta técnica, mas todas levará ao mesmo resultado, ou seja, o download automático das fontes.
Mas não exagere, quanto o maior número de fontes, mas lento será o carregamento da página já que todas elas precisarão ser baixadas. Já, por outro lado, as fontes do sistema são mais rápidas, mas caso o usuário não a possua poderá quebrar algumas coisas da estrutura do seu projeto.
Objetos Aninhados
Objetos aninhados são objetos que estão dentro de um espaço em comum, um exemplo seriam objetos dentro de uma div, estes se não estiverem em volta da mesma flutuarão livremente no seu layout.
Vantagens
Experiência do Usuário
Segundo o artigo “Speed is key: Optimize your mobile experience” disponibilizado pelo Google Think Insights, existem 61% de chance de um usuário desistir e partir para outra página se a mesma não for adaptável ou customizada para aparelhos mobile. Mas em contra ponto, caso ele fique satisfeito com o seu conteúdo, tendo uma experiência positiva, há uma chance de 67% de conversão em produtos e serviços.
Velocidade da Página
De acordo com o Google PageSpeed Insights recomenda-se que o conteúdo acima da dobra em dispositivos móveis carreguem em menos de 1 segundo, já para o carregamento completo do conteúdo este deverá ocorrer em menos de 2 segundos. Isso é extremamente importante caso você seja melhorar o seu ranqueamento no Google.
Diminuição da Taxa de Rejeição
Se o seu usuário não for bem recebido, as chances dele fechar ou desistir de utilizar a sua página são grandes desta forma é preciso ter cuidado, pois, isso gera uma taxa de rejeição na qual se estiver num nível muito alto a sua página não será interpretada pelo Google, desta forma representando que o seu conteúdo não é relevante e perdendo posições nos mecanismos de busca.
Aumento das Vendas
Baseado no relatório Digital, Social & Mobile 2015, 15% dos brasileiros com acesso à internet em dispositivos móveis fizeram compras nos últimos 30 dias por meio destes aparelhos. Neste quesito a preferência na utilização é ainda do desktop que possui uma taxa de 36%, mas os números mostram uma tendência a aumentar com o tempo já que está em pleno desenvolvimento.
Conversão de Leads
Caso você promova por redes sociais é importante possuir um site responsivo, pois, o usuário poderá estar acessando estas redes por meio de algum dispositivo móvel e ao visualizar o seu site no feed acesse-o e encontre uma página desestruturada, assim há grande chance dele não converter e gerar leads.
Compartilhamento nas Mídias Sociais
Além dos leads você também pode querer que o seu link seja compartilhado e com um site responsivo as chances disso ocorrer são ainda maiores, pois, permite o usuário ter uma melhor experiência como já mencionado. Além disso, evitamos que quem acesse a página acesse o link da versão mobile no desktop, e vice-versa.
Dispositivos Futuros
Uma das maiores vantagens de um design responsivo é que ele é feito para diferentes resoluções e não para diferentes dispositivos. Ou seja, não importa qual a resolução da tela do dispositivo que o seu visitante está utilizando, o layout irá se adaptar.
Isso abre uma brecha para dispositivos futuros, que poderão ser lançados com resoluções diferentes. Um layout responsivo deixa o seu site pronto para qualquer dispositivo, mesmo os que ainda não existam.
Quando não restringimos os cenários a aparelhos temos um horizonte muito maior e mais frutífero. Entenda que a informação publicada na web pode e é totalmente reutilizada a qualquer momento.
SEO
O Google confirmou indiretamente por meio de sua página de ajuda do Google para design em smartphones que para a área de SEO (otimização para buscadores) o design responsivo é o mais indicado. Segue abaixo uma tradução da recomendação apresentada no site:
Google recomenda que os webmasters sigam a melhor prática da indústria usando design responsivo, oferecendo o mesmo código HTML para todos os dispositivos e usando apenas media queries de CSS para decidir como a informação deve ser renderizada em cada aparelho.
