Skip to content

Design Responsivo – A nova Web

Design Responsivo – A nova Web

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

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!

1 Comment


Add a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *