Design Responsivo

Saiba como o design responsivo pode alavancar suas vendas on-line!

Foto montagem de mídias sociais

Visão geral

Já tentou acessar o seu site pelo smartphone, tablet ou até mesmo por uma tv ? Como foi a sua experiência de navegação ?

Bom, em muitos casos a resposta é quase sempre a mesma:

  • Site “quebrado no mobile”;
  • Site lento, e em muitos casos não abrem;
  • Site sem acessibilidade;
  • Site com uma experiência de uso pessíma;

E por aí vai, poderiamos passar o dia aqui descrevendo e explicando o quanto isso afeta diretamente nas suas vendas, na sua conversão final.

Preparei esse artigo completo para você entender como funciona o design responsivo e começar a aplicar a técnica em seus projetos hoje. Boa leitura!

A origem do web design responsivo

Antigamento os layouts eram desenvolvidos de uma maneira bem simples, era só definir o tamanho geral do site e, fixar a largura do mesmo em px (pixel - unidade absoluta de media). Fazer o recorte e fixar a largura das imagens também era outro ponto chave.

Com a evolução da web e principalmente com a rápida chegada dos smartphones no mercado, viu-se uma necessidade imensa de servir o mesmo conteúdo(que até então era somente servido para desktops) para vários dispostivos. É aqui, que o termo responsive web design entra em cena.

Definição

De uma maneira geral, podemos dizer que design responsivo é uma técnica para entregar o mesmo conteúdo para diversos dispositivos sem prejudicar a experiência do usuário. É a arte de ajustar o layout automaticamente de acordo com a viewport(largura do dispositivo) do usuário.

“Não confunda Web Design Responsivo com Adaptive Web Design, design responsivo é uma proposta dentro do Adaptive Web Design.”

Porque eu preciso de Design Responsivo ?

Bom, antes de mais nada é preciso lhe apresentar alguns números para você começar a entender a importância dessa técnica, veja:

  • 20% dos site
  • 20% dos site
  • 20% dos site
  • 20% dos site

Pilares do web design responsivo

  • Imagens flexíveis
  • Grid fluído
  • Media queries

Esses são os três ingredientes para ser fazer um layout responsivo, vamos detalhar cada um desses itens.

Imagens flexíveis

Um dos itens mais difíceis de se trabalhar hoje são as imagens responsivas. Isso por que ainda não existe um padrão definido e cada um está se virando como pode…

Mas calma, o W3C tem se esforçado bastante para ajudar e com a nova tag e alguns novos atributos esse problema pode estar prestes a ser solucionado.

Uma das soluções (existem várias) que eu tenho estudado e utilizado bastante é o uso da tag img + srcset que tem o propósito de servir diferentes imagens de acordo com a viewport ou de acordo com a densidade de pixels do dispositivo.

Exemplo:

<img sizes="(max-width: 900px) 1200px, 100vw" srcset="assets/images/large-1200x600.jpg 1200w,
assets/images/medium-800x600.jpg 800w,assets/images/small-400x200.jpg 400w"
src="assets/images/small.jpg" alt="" title="">

Sizes

O atributo sizes é composto por uma declaração de media querie e uma largura, se for omitido o valor padrão de sizes será 100vw, veja sua sintaxe:

([media_querie] [largura])

vw é uma unidade de medida que significa largura do viewport, 100vw é equivalente a 100% da viewport do usuário.

Srcset

O atributo srcset é utilizado para definir o caminho das diferentes imagens a serem servidas, já os valores seguidos da letra w indica a largura de cada imagem, ou seja, veja que no exemplo eu tenho uma imagem large-1200×600.jpg cuja a largura era de 1200px, então o valor de w nesse caso é de 1200px.

Logo depois temos o src padrão que é utilizado com fallback para os browsers que não suportam o srcset.

Exibindo imagens de alta resolução para dispositivos com retina display

Hoje em dia temos vários dispositivos com variadas resoluções e densidade de pixel e isso nos abre uma gama de possibilidades para aprimorar ainda mais a experiência de uso para esses usuários.

Como eu faria para exibir uma imagem em full hd somente para os dispositivos que possuem alta resolução ?

Utilizando o srcset nos podemos dizer ao browser o seguinte: “para dispositivos que possuem um device-pixel-ratio 2 você irá carregar uma imagem em alta resolução”.

Exemplo:

<img sizes="(max-width: 900px) 1200px, 100vw" srcset="assets/images/full-hd.jpg 2x,
assets/images/large-1200x600.jpg 1200w,
assets/images/medium-800x600.jpg 800w,
assets/images/small-400x200.jpg 400w"
src="assets/images/small.jpg" alt="" title="">

Vimos que para indicar a largura da imagem ao browser nos definimos um valor seguido da letra w e para indicar a densidade de pixel nós definimos a quantidade de pixel seguido da letra x, ou seja para dispositivos com pixel ratio 2 o browser irá carregar a imagem full-hd.jpg.

Art Direction

Existe outra técnicas para servir imagens responsivas e o art direction é uma delas. A proposta dessa técnica é focar na informação principal da imagem. Abaixo temos uma imagem para você entender melhor esse conceito:

[IMAGE OF ART DIRECTION]

Fazer um corte ao redor da imagem sem perder o foco, esse é o objetivo do art direction.

Utilizando art direction

Para utilizar essa técnica podemos combinar a nova tag junto com os atributos já estudados, veja:

Exemplo:

<picture>
   <source media="(min-width: 900px)" srcset="assets/images/large.jpg 1200w" sizes="(min-width: 1200px) 33vw, 100vw">
   <source media="(min-width: 600px)" srcset="assets/images/medium.jpg 700w">
   <source media="(min-width: 300px)" srcset="assets/images/small.jpg 400w">
   <img src="fallback.jpg" alt="" title="">
</picture>

Observe que na primeira declaração do nós utilizamos o atributo sizes e declaramos o seguinte “para viewports maiores que 1200px a imagem large.jpg terá uma largura de 33% do viewport”