A importância do design responsivo

Resumidamente um design responsivo nada mais é que um site onde seu conteúdo permanece igual, independente do dispositivo que está sendo acessado.

Seria inviável você criar diferentes sites para diferentes dispositivos, então o melhor jeito é desenvolver um design responsivo que seja compatível com todos os dispositivos.

Seu uso se tornou tão popular que agora é uma prática padrão para criar uma experiência consistente porém personalizada em todos os dispositivos. Por isso, grandes sites da atualidade são feitos com design responsivo.

Mas o que é design responsivo? E quais são os melhores exemplos na prática?

https://gumroad.com/l/goldencanongrid

Sites responsivos têm três características:

Media Queries
“Media Queries nos permite atingir não apenas alguns níveis de dispositivos, mas também inspecionar as características físicas do dispositivo que processa nosso trabalho”, Marcotte.

Media Queries permite que os desenvolvedores usem esses dados para alterar o site com base nas propriedades do dispositivo do usuário. Isso defini os pontos de interrupção, por exemplo.

Grids Fluídos
Quando você cria um site com grids flexíveis e passa isso para o desenvolvedor, as colunas se reorganizam automaticamente para caber no tamanho da tela ou da janela do navegador, esteja o usuário em um computador de 21 polegadas, em um notebook de 13 polegadas, em um tablet de 9,7 polegadas ou celular de 5,5 polegadas.

Layouts Fluídos

“Layouts fluidos […] colocam o controle dos nossos projetos nas mãos do usuário”, disse Marcotte.

Como existem muitos dispositivos exclusivos atualmente, essa funcionalidade permite que as equipes criem designs intemporais capazes de se adaptar a qualquer dispositivo, independentemente de seu tamanho ou formato.

Layouts fluídos, grids flexíveis e Media Queries são três técnicas para o Responsive Web Design, mas também uma maneira de pensar.

Abaixo, alguns exemplos que utilizam todos esses critérios e muito mais:

Slack

O Grid Flexível adapta-se facilmente em todos os tamanhos e formas. Embora os logotipos dos clientes sejam apresentados em um layout de três colunas em computadores, eles são exibidos em um layout de uma única coluna em mobile.

O site da Slack foi projetado para ser fácil de usar. Por exemplo, os botões de call-to-action pega toda a coluna no mobile, o que ajuda os usuários a evitar clicar no link “Fazer login” abaixo.

WIRED

O site WIRED tem um layout dinâmico com várias colunas e uma barra lateral na versão desktop, que é convertida em uma única coluna no mobile.

Ao mudar de um tablet para um dispositivo móvel, o menu é reduzido para incluir apenas o logotipo, um ícone de menu e um link para se inscrever.

WIRED consegue brilhar usando imagens flexíveis. A forma em que as imagens aparecem em cada plataforma é um exemplo claro de grid flexível. No desktop, as imagens variam entre quadrados e retângulos, oferecendo ao usuário muitos itens para explorar. No entanto, no mobile, todas as imagens são “cropadas” na proporção 16:9.

Sua importância

Além da compatibilidade, existem várias outras razões que faz o site responsivo ser importante hoje em dia.

Temos alguns itens que contribuem para isso:

Mobile First
Esse é o primeiro item que precisamos pensar: o uso em um dispositivo móvel. Nos últimos anos, o uso tem aumentando absurdamente então é preciso sempre pensar nele primeiro (não é uma regra, mas as vezes facilita o trabalho. Podemos falar mais em um outro momento). Segundo uma pesquisa, 85% das pessoas acreditam que um site para dispositivos móveis deve ser tão bom quanto o de um computador.

Experiência
Um design responsivo contribui para uma melhor experiência do usuário. Quando seu design é bem feito, as pessoas não enfrentam dificuldades ao abrir seu site em outros dispositivos. Eles não precisam ampliar nem encolher o site.

Gestão
O design responsivo contribui para um gerenciamento mais fácil de um site. Esta gestão pode ser melhor compreendida do ponto de vista do SEO.
Imagine se você tivesse que criar dois sites: um celular e outro para computador. Nesse caso precisaria gerenciar os dois sites e isso complica a visualização de resultados reais.

— — — —

E ai, qual é o seu site responsivo favorito?

Source

11 powerful examples of responsive web design | InVision Blog

The Importance of Responsive Web Design - Golden Grid System