Qual a Diferença entre Site Responsivo e Site Mobile?

Apesar da similaridade nas ideias, temos dois tipos distintos de websites sendo executados nos nossos celulares e tablets: Os sites responsivos e os sites mobile

As características distintas destes se aplicam tanto na forma de exibição, quanto no desenvolvimento de cada um e vantagens de aplicação. No entanto…

O que são Sites Responsivos?

Um site responsivo, é aquele que se molda às dimensões de tela na qual este está sendo exibido. Não importa se ele está sendo exibido em um MP4 Player com Wifi, ou em uma Smart TV de 80”, ele deve se adaptar e não atrapalhar a experiência do usuário.

Como Funciona um Site Responsivo?

Os sites responsivos bem desenvolvidos utilizam-se principalmente de dois métodos:

Media Querries

Os media querries são variações do código CSS que implementam comportamentos para elementos do site. Dessa forma, tomando como base parâmetros como: largura mínima ou máxima, altura mínima ou máxima, e se o comportamento deve ser implementado apenas na tela ou também em uma possível impressão.

Por exemplo de media querry, temos:

.container {
     max-width: 1200px;
}

@media (max-width: 420px) {
     .container {
          max-width: 100%;
     }
}

Neste exemplo, a largura do elemento com a classe container seria de no máximo 1200px em dispositivos com a largura de tela maior que 1200px. Enquanto no celular com até 420px de largura de tela, o mesmo elemento poderia chegar a ocupar a largura de 100% da tela.

Unidades de Medidas Baseadas no Viewport

O Viewport é uma medida de dimensão de telas, que aponta tanto para o tamanho quanto para as proporções desta. As medidas baseadas no viewport que podem ser utilizadas no CSS são vh (Viewport Height) e vw (Viewport Width). O comportamento de um elemento usando as medidas pode ser representado abaixo:

.hero-carrousel {
     min-height: 60vh;
     min-width: 90vw;
}

No trecho de código acima, o elemento com a classe hero-carrousel ocuparia uma largura de no mínimo 90% da tela do dispositivo e uma altura mínima de 60% da tela do dispositivo.

Vale lembrar que vh e vw funcionam de forma diferente da porcentagem absoluta (%), uma vez que o viewport é uma informação estática para cada dispositivo, enquanto a porcentagem se baseia na área de exibição do navegador.

O que é um site Mobile?

Site Mobile é aquele site desenvolvido para funcionar especificamente em dispositivos móveis, sejam eles smartphones ou tablets. Por tanto, ele pode conter elementos e ter a usabilidade diferente da versão para desktop.

Como funciona um site Mobile?

Os scripts até podem ser reaproveitados, mas o HTML e folhas de estilo são independentes da versão desktop. Por várias vezes vemos os site mobile trabalhando em subpastas do site desktop, ou até mesmo em subdomínios do site principal, como por exemplo o m.facebook.com.

Os usuários de desktop não são privados de acessarem a versão mobile de um site, mas na maioria dos casos, o usuário mobile é levado automaticamente para a versão correta para seu dispositivo. Isso é feito através do Javascript, que pode tomar como parâmetro de decisão a resolução em que o site está sendo exibido, ou até mesmo a detecção de qual sistema operacional está executando o navegador no momento.

Pode ser do seu interesse: Saiba como melhorar um site lento de uma vez por todas 

Conclusão: Qual é o melhor para mim?

Sites responsivos sempre são a melhor opção tanto para usabilidade, disposição do conteúdo, organização e economia dos recursos de TI. No entanto, se no seu caso, seu site já está desenvolvido e rodando apenas na versão desktop, o desenvolvimento de um site mobile pode economizar recursos financeiros. 

Uma vez que os sites responsivos devem ser desenvolvidos utilizando princípios de Mobile First (foco em dispositivos móveis), e dar manutenção ao site que já está no ar sairia mais caro do que simplesmente criar uma nova versão mobile.

Ainda tem alguma dúvida de qual o melhor para a atual situação da sua empresa? Então deixe um comentário abaixo e nosso especialista em tecnologia entrará em contato!