Entendendo as diferenças entre design responsivo, adaptativo e mobile-first

Design responsivo

O conceito de site 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.

Simplificando, no site responsivo a resposta é fluida e se adapta ao tamanho da tela, independentemente do dispositivo alvo. O responsivo usa consultas de mídia CSS para alterar estilos com base no dispositivo alvo, como tipo de exibição, largura, altura, etc., e apenas um destes é necessário para que o site se adapte a diferentes telas.

Nesse caso, você estará projetando com todos os possíveis tamanho de tela em mente e isso, claro, pode confundir o processo e torná-lo bastante complexo. Isso significa que você deve se concentrar na criação de uma viewport para resolução média e, em seguida, usar consultas de mídia para ajustar as resoluções baixas e altas mais tarde.

Então, na essência, geralmente é melhor usar responsivos para novos projetos, e adaptáveis para "reformas" de projetos já estabelecidos.

Design adaptativo

O design adaptativo, por outro lado, usa layouts estáticos baseados em pontos de interrupção (ou quebra), que não respondem até que sejam inicialmente carregados. O design adaptativo funciona para detectar o tamanho da tela e carregar o layout apropriado para ele — geralmente você planejaria um site adaptável para seis larguras de tela mais comuns (em pixels):

• 320
• 480
• 760
• 960
• 1200
• 1600

A princípio, parece que o design adaptativo requer mais trabalho, pois você deve projetar layouts para um mínimo de seis larguras. No entanto, sites responsivos pode ser mais complexo, uma vez que o uso indevido de consultas de mídia (ou, de fato, o não uso) pode acarretar problemas de exibição e desempenho.

Design mobile-first

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.

Esta abordagem de design também é conhecida como “aprimoramento progressivo”. O movimento inverso, ou “degradação graciosa”, implica projetar para um site totalmente funcional para Desktop, e então adaptar o conteúdo para telas menores a partir daí.

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, e o resto do seu processo será (quase) sossegado.

Melhore a experiência do usuário

Os usuários esperam um novo nível de desempenho e função em seus dispositivos móveis. Em um pequeno dispositivo com baixa largura de banda, não há muito espaço para erros, então esses fatores precisam se tornar prioridades. Demasiados dados — mesmo que custem apenas meio segundo — podem ter um impacto dramático no tempo de carregamento. Concentrar-se no celular primeiro garante que otimize os dados enviados e também garante tempo para incorporar recursos móveis populares, como toque e geolocalização.