SITES ADAPTATIVOS VS SITES RESPONSIVOS VS MOBILE FIRST

A crescente demanda por uma melhor experiência do usuário unida a ascensão dos dispositivos
móveis no mercado em todo o mundo fez com que sites, antes projetados apenas para o uso em
desktops, precisassem passar por modificações para que atendessem a demanda desse novo
público, garantindo sua sobrevivência no mundo digital. Para isso, segue a definição de três
conceitos aplicados aos sites: adaptativo, responsivo e mobile first.

Sites Adaptativos

O conceito de Design Adaptativo para sites consiste em “quebras” nos layouts que são definidos
com larguras fixas. Estes pontos de interrupção só respondem no momento em que são
inicialmente carregados. Para isso, é preciso ter um conjunto de códigos para cada tipo de
dispositivo que possa acessar o site, e no momento desse acesso, é detectado o tamanho da tela
do dispositivo, fazendo com que seja carregado o layout apropriado para este dispositivo. Entre
as vantagens do design adaptativo estão o menor tempo de produção, o aproveitamento de um
layout já existente e um maior controle de mudanças de design. Por outro lado, como
desvantagem, o design adaptativo não está preparado para acompanhar as modificações em
dispositivos no mercado, o seu uso em dispositivos móveis pode ser não ser tão agradável ao
usuário e o CSS não é tão bem reaproveitado.

Exemplo de um site adaptativo acessado em diferentes dispositivos

Sites Responsivos
O Design Responsivo é considerado a evolução do Design Adaptativo. Neste conceito, o site é
totalmente flexível, se adaptando a diferentes tamanhos de tela, fazendo com que o conteúdo
seja reorganizado, para que se encaixe perfeitamente na tela do dispositivo em que o usuário
está fazendo o acesso. Desse modo, há uma linha harmônica de semelhança independente do
dispositivo. Além disso, há um melhor aproveitamento da tela, preenchendo todos os espaços. O
design responsivo possui muitas vantagens, entre elas o design otimizado independentemente da
plataforma, a manutenção facilitada, a diminuição do tamanho dos arquivos, a possibilidade de
realizar modificações com poucas linhas de código e maior acessibilidade. Entre as
desvantagens, estão o maior tempo de produção, e a dificuldade de implantação em um produto

existente.
Exemplo de um site responsivo acessado em diferentes dispositivos

Sites Mobile First

A maioria das empresas ainda desenvolve seus sites pensando no desktop como tela principal, e
a partir disso, adaptam o conteúdo para atender a demanda dos dispositivos móveis. O conceito
de Mobile First trouxe uma mudança de paradigma na implementação de sites. Como o próprio
nome sugere, no Mobile First o foco inicial da arquitetura e desenvolvimento está nos dispositivos
móveis, vindo somente depois as adaptações para desktops e outras plataformas. O Mobile First
se tornou uma necessidade para aqueles que buscam destaque nas plataformas digitais, pois a
maioria dos usuários utilizam dispositivos móveis. Pensar primeiro no mobile garante uma
experiência do usuário cada vez mais completa e satisfatória em termos de performance e
usabilidade da página, além de oferecer um conteúdo mais enxuto, tornando os sites cada vez
mais funcionais, pois sites projetados para mobile não terão espaço para informações
irrelevantes. O próprio Google já adotou essa mudança na sua indexação e ranqueamento,
beneficiando em sua pesquisa aqueles que possuem sites otimizados para dispositivos móveis.

Comparação entre Design Responsivo e Mobile First