9 GIFs que explicam Responsive design

Responsive-Cover-02-2

Não pode diferenciar um site responsivo do que meramente adaptativo? Estes GIFs vão ajudá-lo!

O que é design responsivo? A maioria das pessoas vagamente entende que isso se refere a sites que funcionam tão bem em desktops quanto em smartphones, mas há muito mais do que isso.

O design responsivo é aquele onde todo o conteúdo é flexível, se reposicionando conforme o ambiente do usuário, como tamanho da tela, orientação (horizontal ou vertical) e plataforma.

Já o design adaptativo é basicamente o o que se utilizava a alguns anos atrás, onde tinhamos um conjunto de código para cada tipo de dispositivo que acessava o site. Hoje ele ainda é utilizado quando faz-se necessária limitação de funcionalidades para determinados dispositivos, ou mesmo para atender à parte de marketing, podendo ajudar nos funis de conversão.

Responsivo vs adaptativo:

O design responsivo expande de forma fluída, enquanto o adaptativo aguarda o navegador ou viewport terminar a expansão.

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy

Usar unidades relativas vs estáticas:

Posicionando os elementos usando píxels, faz com que ele funcione em apenas uma tela. Use medidas relativas, como porcentagem da tela ao invés de medias estáticas.

3038367-slide-s-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1

Com ou sem breakpoints:

Veja com breakpoints que podemos manter a mesma largura nas coisas, sem o breakpoint as coisas tendem a diminuir e não manter a mesma visualização em telas diferentes.

3038367-slide-s-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1

Design fluído vs estático:

Olhe quando você define uma altura fixa, diferente de quando você mantêm o design sem altura definida podendo ela aumentar conforme necessidade.

3038367-slide-s-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2

Agrupar coisas ou não?

Veja que os elementos que estão aninhados, elas tendem a se mover em conjunto, facilitando assim a colocação de um menu lateral caso seja necessário.

3038367-slide-s-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1

Fontes padrão ou webfonts?

Olhe a diferença de carregamento das fontes padrão comparado com as fontes carregadas pela web.

3038367-slide-s-6-9-gifs-that-explain-responsive-design-brilliantly-06system-fonts-vs-webfonts-1

Usar ou não largura máxima?

Veja que ao usar a largura máxima, o site pode ainda manter uma barra lateral em cada lado, isto se aplica quando a tela é muito grande, assim mantemos, por exemplo, o conteúdo em boa qualidade de leitura. Inclusive no próximo layout do Oficina da Net, que pretendemos lançar em breve, usamos esta técnica para manter uma boa leitura do conteúdo.

3038367-slide-s-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1

Quem vem primeiro, desktop ou mobile?

A diferença em pensar o layout primeiro para desktop ou primeiro para celular?

3038367-slide-s-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3

Use vetores quando imagens são dispensáveis.

“Seu ícone tem muitos detalhes e alguns frufrus aplicados? Se sim, use um bitmap. Se não, considere o uso de uma imagem vetorial.” Uma imagem do vetor pode mais adequadamente se adaptar a diferentes resoluções.

3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy

Informações: FroontBlog, Fastcompany e Oficina da Net

Anúncios
Etiquetado , , , , , , , ,

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: