O conceito de design responsivo, originalmente cunhado pela Ethan Marcote em 2010, descreve uma técnica na qual o design de um site é ajustado automaticamente com base no tamanho das telas dos usuários.
Dica rápida: você pode determinar se um site é ou não responsivo ao ampliar ou reduzir manualmente a janela do navegador.
Exemplos de Responsividade:
- https://developers.google.com/web/fundamentals/design-and-ux/responsive/videos/resize.webm
- https://xwus0r3w2z4axlpt1wdpg1ky-wpengine.netdna-ssl.com/wp-content/uploads/responsive-website-design-by-windmill-design-CHORUS.jpg
Em suma o site está configurado para se ajustar ao tamanho da tela de um device. Isso é programado por meio de breakpoints, ou faixas de largura onde se apresenta um determinado layout ou outro.
Um conjunto de dimensões bem comum é do framework de web design bootstrap:
Dispositivos extra-small (telefones em modo vertical, com 575px ou menos)
Dispositivos small (telefones em modo paisagem, com 576px ou mais)
Dispositivos médios (tablets com 768px ou mais)
Dispositivos large (desktops com 992px ou mais)
Dispositivos extra large (desktops grandes com 1200px ou mais)
Estas regras de dimensionamento norteiam a criação/implantação do design. Conforme a necessidade de adaptação do layout, utilizamos diferentes breakpoints como referencia de criação. Frente a estes dispositivos e aspect-ratios, por exemplo, um determinado componente pode ter 2, 3 ou até 4 versões adaptativas enquanto outro componente, na mesma peça, pode manter praticamente o mesmo formato em todas as resoluções.
Mobile-first é uma abordagem delineada em 2009 por Luke Wroblewski. De forma simpes, o mobile-first é uma abordagem para o design responsivo: primeiro design para telas menores, e depois adicione mais recursos e conteúdo conforme as telas ficam maiores.
Na antiguidade de design web (há alguns anos atrás), designers e desenvolvedores criaram os melhores site que podiam para desktops. Isso fez todo o sentido — computadores de mesa eram o meio de acesso mais popular e óbvio. Mas, com os usuários móveis ultrapassando os usuários de desktop em 2014, o celular simplesmente não pode mais ser uma reflexão tardia.
O melhor design se concentra em entregar o que é essencial. É muito mais fácil falar do que fazer, é claro, especialmente quando você está espremendo recursos e conteúdo em uma tela pequena. Mas se você entender a importância do celular, você deve tomar essas decisões em algum momento. Se deixadas para o final do processo, estarão mais propensas a serem diluídas ou esquecidas. Remova essas decisões difíceis do caminho primeiro (criando um design mobile primeiro), e o resto do seu processo será (quase) sossegado.