O que é Design Responsivo?
Design responsivo nada mais é que elaborar sites que se adaptem aos diversos dispositivos disponíveis no mercado para acesso à internet, como os desktops, smartphones, tablets, iPhones, iPads, e até mesmo televisões.
Nos primórdios, a maioria dos computadores com acesso à internet tinham resoluções baixas e o mesmo navegador Internet Explorer. Então, todos os designers ajustavam seus layouts para uma melhor visualização nesse browser (lembra daqueles botõezinhos Melhor visualizado em…?). Como hoje em dia a internet se tornou indispensável no cotidiano, é essencial que os sites possam ser acessados de qualquer dispositivo. Daí a necessidade do design responsivo.
Design Responsivo e os buscadores
O design responsivo já era defendido por muitos desenvolvedores, mas ganhou mais destaque ainda depois que o Google confirmou indiretamente que para a área de SEO (search engine optimization, otimização para buscadores) essa técnica é a mais indicada. Para o Google, é mais fácil perceber que o site.com.br tem um layout se adapta a qualquer tela, do que entender que o m.site.com.br e tablet.site.com.br são o mesmo site e apenas copiam conteúdo alterando a estrutura do conteúdo.
A recomendação da página de ajuda do Google para design em smartphones diz o seguinte:
Google recomenda que os webmasters sigam a melhor prática da indústria usando design responsivos, 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.
Técnicas básicas de design responsivo
O design responsivo utiliza Media Queries (em tradução livre significa consulta de mídia). São expressões que indicam folhas de estilos de acordo com o dispositivo que ele estiver utilizando.
/* smartphones */
@media only screen and (max-width: 320px) {
/* estilos formatados para smartphones */
}
/* tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* estilos formatados para tablets */
}
Também é importante adicionar uma tag meta no início do seu código html:
<meta name="viewport" content="width=device-width,initial-scale=1" />
O viewport é a área em que seu site aparece. Quando o tamanho da tela varia muito, existe uma preocupação pelo fato de afetar diretamente a forma como o seu site é visualizado.
Por exemplo, um smartphone possui uma tela de 320px, porém sua resolução é 980px. Então, sem essa tag, se você adicionar uma imagem com largura 980px, não existirá barra de rolagem, e a imagem ficará parecendo uma miniatura.
Outra técnica importante é utilizar elementos fluídos, ou seja, utilizar porcentagens para definir o tamanho dos elementos. Isso fará com que o elemento se ajuste automaticamente.
Teste seu site com design responsivo
A Google possui uma ferramenta de recursos multi-screen para que você possa testar seu site com design responsivo, e ainda te dá várias dicas de como melhorar ainda mais o seu site.
Concluindo
Design responsivo é um assunto bastante extenso e muito interessante. Vale muito a pena pesquisar afundo sobre esse assunto afim de potencializar o uso dessa técnica, que se tornou essencial nos dias de hoje.
Até mais, galera!
