Responsivo vs. Mobile! Você sabe a diferença?

Entenda de uma vez qual a diferença entre Responsivo e Mobile, além de quando usar cada metodologia.

Sabe quando abrimos aquele site lindo no computador? Aqueles sites que ficamos realmente apaixonado pelo design de tal forma que queremos mostrar para cada amigo,mas quando abrimos no smartphone temos aquela decepção, pois tudo fica extremamente fora do lugar? Então, esse site não é responsivo e nem mobile!

Mas responsivo e mobile não são a mesma coisa?

Não! São extremamente diferentes!

Site Responsivo

http://www.zeedog.com.br

Como o próprio nome sugere, sites responsivos são aqueles que respondem ao tamanho da tela do dispositivo em que estão sendo abertos.

Os sites responsivos são capazes de se adaptar, ou seja, reorganizar os elementos do site conforme o tamanho da tela mantendo o mesmo conteúdo e código-fonte. Uma boa maneira de entender como funciona exatamente um site responsivo faça o seguinte teste usando seu computador (no smartphone ou tablet talvez não seja possível realizar o teste, pois nem todos os dispositivo tem como ajustar o tamanho da view do navegador):

  1. Acesse este site: www.zeedog.com.br
  2. Diminua a lentamente a largura da janela do navegador.
  3. Repare como cada elemento vai se ajustando ao tamanho da janela conforme a mesma vai diminuindo de tamanho.

Conseguiram visualizar e entender o comportamento responsivo?

Quais as vantagens do site responsivo?

As vantagens são:

  1. Já que o conteúdo e o código-fonte são os mesmo, a experiência ao navegar no site é mais uniforme, seja no desktop, tablet ou smartphone.
  2. Como o código-fonte para é o mesmo independente do dispositivo usado para navegar, a manutenção do site fica muito mais rápida e fácil.
  3. Melhor indexação de SEO (Search Engine Optimization).

Site Mobile

O Site mobile é uma outra versão do site normal, ou seja, não possui a mesma URL e nem o mesmo código-fonte. Para isso normalmente é criado um subdomínio exclusivamente para a versão mobile que usará um código fonte próprio. Por convenção o nome do subdomínio é: "m".

Tente acessar a versão mobile do facebook em seu computado: https://m.facebook.com/

Repare que mesmo sendo aberto no computador que possui uma tela bem maior que as dos smartphones, o layout e as funcionalidades do site se comportam como se estivesse aberto em um smartphone!

Já sei quais as vantagens do site responsivo, mas e o mobile? Possui alguma?

As vantagens são:

  1. A liberdade de customização é bem maior, pois não fica preso ao mesmo código-fonte usado nas versões desktop, podendo assim seguir um layout completamente diferente se desejável.
  2. Agilidade para o carregamento da página, uma vez que todos os elementos são focados em dispositivos móveis, não há preocupação em usar uma imagem grande para não distorcer ao ser aberta em uma tela grande.

Conclusão

Espero que tenha conseguido explicar as diferenças e vantagens de entre as versões Mobile e Responsiva de um site.

Qualquer dúvida ou sugestão só deixar um comentário que responderei assim que possível 😉

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.