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

Fernanda
Fernanda
Feb 27, 2018 · 3 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade