Web Design
Blog > Web Design

O que é Design Responsivo e porque o site da minha empresa precisa disso?

segunda-feira, 9 maio 2016

Se você utiliza seu smartphone ou algum outro dispositivo móvel para acessar a internet, é muito provável que você tenha se deparado com dois tipos de websites: aqueles que são exibidos perfeitamente, com todas as informações legíveis, imagens não-distorcidas, links que são clicáveis sem haver a necessidade de usar o zoom… e, bem, os sites que são impossíveis de se navegar :( Sabe aquelas páginas que aparecem todas quebradas em telas menores, que você precisa ficar dando zoom e arrastando para os lados para conseguir ver uma informação, e parece que nada funciona como deveria?

Não é necessário ser nenhum expert em design, programação ou marketing digital para saber qual dos exemplos descreve um site responsivo, né? 😀 E também é bem fácil identificar qual dos exemplos proporcionam uma experiência de navegação agradável a seus usuários e qual deles faz com que o usuário sinta vontade de desistir de tudo e jogar o dispositivo na parede, não é verdade? XD

O QUE É DESIGN RESPONSIVO

Em termos mais técnicos, o design responsivo é uma abordagem que se baseia na ideia de que tanto o código quanto a aparência de um layout devem se adaptar à realidade e aos usos de seus usuários. Isso significa que, quando acessado de um monitor de 32 polegadas, um site responsivo será exibido perfeitamente, sem distorções, sem perda de qualidade e sem problemas de navegabilidade; e isso também acontecerá se o mesmo site responsivo for acessado por um Iphone 6, cuja tela possui 4.7 polegadas — a qualidade de navegação, bem como de design ainda estarão ali, intactos, como se já tivesse sido feito para aquela resolução!

Olha um exemplo:

O que é design responsivo?

Com a imagem acima é possível entender um pouco melhor como funciona esse processo de adaptação do layout para telas diferentes. Os blocos A, B e C representam conteúdos do site, como caixas de texto, imagens, produtos, etc. Em um monitor comum, vemos que os blocos se alinham horizontalmente; já em um tablet, o posicionamento do conteúdo se ajusta para evitar que os blocos laterais sejam cortados. Já no smartphone, a adaptação também acontece, mas desta vez vemos uma completa verticalização do conteúdo devido à resolução mais reduzida da maioria dos dispositivos.

Isso é possível graças a diversas técnicas bem avançadas de desenvolvimento, que utilizam media queries para adaptar todo o conteúdo, layout e navegação de um site. Isso significa que o código HTML base é o mesmo para todos os dispositivos, e as especificações únicas de aparência são definidas pelo CSS e Javascript.

Parece grego, né? XD

O que você precisa saber é que ter um layout responsivo não é apenas importante, mas sim obrigatório. Não importa se o seu negócio é multinacional ou uma microempresa: hoje, o mundo está conectado por dispositivos móveis! Desde 2014 existem, no Brasil, mais smartphones do que PCs. São 281,45 milhões de acessos à internet móvel!

Isso que ainda nem mencionamos o fato de que o próprio Google já criou algoritmos que favorecem websites responsivos em seus resultados de pesquisa — e quem é que pode se dar ao luxo, hoje em dia, de não estar presente no mais relevante buscador de todo o mundo? 😉

 

Rafaela Silvestrini

Gestora de conteúdo na K2, vive para convencer o mundo que "conteúdo é vida", apertar gatinhos, comer coxinha e sofrer por personagens ficcionais.

eBook Gratuito: Usabilidade e Design Responsivo

Leia mais posts sobre: Web Design

Dicas para fazer layout para e-commerce

Dicas para criar um bom layout de loja virtual

O layout é sempre uma peça essencial de um site. Basta se perguntar se vo...
Design para Inbound Marketing

Design para Inbound Marketing

Steve Jobs disse uma vez: Design não é apenas como se mostra ser, ou pare...