Saiba qual é a diferença entre layout móbile e responsivo

Se alguém te perguntar se o template que aparece no seu blog, quando ele é acessado através de um smartphone ou tablet, é "responsivo" ou "móbile", você saberia responder? Se pra você esses dois termos representam a mesma coisa, saiba que existe uma bela diferença entre eles — e não é apenas na escrita! Atendendo ao pedido da leitora Sybylla, dona do blog Momentum Saga, nesse artigo falaremos sobre a diferença entre um template responsivo e um template móbile.


Embora haja diferença entre os dois, a finalidade é a mesma: fornecer recursos e acesso facilitado aos usuários que acessam um site/blog através de um dispositivo que não seja o desktop (computador convencional), como, por exemplo, os famosos smartphones e tablets. Contudo a finalidade é a única coisa que eles possuem em comum, pois as técnicas utilizadas para cada um são totalmente diferentes. Confira abaixo uma explicação detalhada de cada uma.

Características de um template móbile


Se você possui uma smartphone, você já deve ter notado que ao acessar alguns sites através dele o endereço aparece com a letra "M" (ou a palavra "mobile") no começo. Por exemplo, ao acessar o site do Facebook através do computador o endereço é: https://www.facebook.com/, e ao acessar a rede social através de um dispositivo móbile o endereço passa a ser: https://m.facebook.com/, conforme ilustra a imagem abaixo.

Versão móbile e para desktop do site Facebook — Clique para ampliar

Já a plataforma de microblogs Twitter, quando acessada através de um computador possui o endereço: https://twitter.com/, porém, quando acessada através de um smartphone ou tablet, passa a ter o seguinte endereço: https://mobile.twitter.com/.

Versão móbile e para desktop do site Twitter — Clique para ampliar

Essa mudança na URL (endereço) do blog caracteriza um template móbile. Ou seja, o blog possui dois endereços: o principal e o móbile. Sendo o endereço móbile um subdomínio do endereço principal do blog. Sendo assim, os desenvolvedores do blog utilizam arquivos para redirecionar o leitor para o endereço móbile quando é detectado que ele está utilizando um dispositivo que não seja o desktop.

O fato de haver dois endereços para o blog (o domínio principal e o subdomínio), possibilita que os desenvolvedores criem templates específicos para cada um deles, ou seja, eles criam um template para ser utilizado quando o leitor acessa o site através de um computador, e criam um template mais leve e com menos recursos (ou recursos adaptados) para quem acessa o site com um dispositivo móbile — uma vez que a Internet nesses aparelhos é bem mais lenta.

Características de um template responsivo


Diferente do template móbile, que é aplicado a um subdomínio do site e altera a URL do mesmo, os templates responsivos são criados para adaptarem o template principal às pequenas telas dos dispositivos móbiles, escondendo sidebars (barras laterais), alterando a posição de elementos do site e etc. conforme o tamanho da tela aumenta ou diminui. Confira um exemplo de layout responsivo no vídeo abaixo.



Note que conforme o espaço para o blog no navegador é reduzido (para simular uma tela pequena de um smartphone) os elementos do blog vão mudando de posição, elementos desaparecem, os menus mudam de formato e etc. E toda essa mudança é aplicada no template principal, sem redirecionamento para outro endereço ou aplicação de uma template secundário.

Toda essa mudança no template é realizada através de códigos CSS específicos para esse tipo de mudança, que são aplicados somente quando o tamanho da tela atinge o tamanho que você especificou. Sendo assim, você pode aplicar códigos CSS específicos a serem utilizados em diversos tamanhos de tela, permitindo que em certos tamanhos você mostre a sidebar no rodapé do blog e em outros tamanhos você a esconda definitivamente, por exemplo.

O que escolher: template móbile ou responsivo?


Você deve estar se perguntando qual dessas técnicas é a melhor escolha para um site/blog, certo? Porém, a resposta para essa pergunta é um tanto quanto particular. Leve em consideração que para ter um template móbile, você terá que comprar um domínio principal para seu blog e criar um subdomínio para ele (haverá o gasto de manter o seu domínio ativo).

Para templates móbiles, também haverá o trabalho de criar um template específico para o seu subdomínio (exige conhecimento em criação de templates), e de manter os dois templates sempre atualizados. E vale lembrar que nem todas as plataforma de blog permitem que você configure subdomínios e faça certos tipos de redirecionamento (o Blogger, por exemplo, não permite). Em contrapartida, um endereço móbile passa um profissionalismo maior para seu site/blog.

Já os templates responsivos não precisam de gastos para serem criados, basta que você utilize códigos CSS para ocultar, mostrar, alterar o posicionamento e etc. dos elementos que você possui em seu blog. Mas, em contrapartida, é necessário que você possua conhecimentos em HTML e CSS, e conheça a estrutura do seu blog para saber o que você pode alterar ou não, e como você pode alterar um elemento.

Sabendo dessas coisas fica a critério de cada um optar por um template móbile ou responsivo.

Gostou do artigo? Tem algo a acrescentar? Participe postando um comentário!

É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 4 comentários neste artigo!

  1. Nossa! Jovem! Finalmente deu sinal de vida... Sempre estou visitando seu site pra ver se tem novidades...
    Este artigo é muito interessante...
    Mas vou fazer uma pergunta... porque afinal o seu template não é responsive? (só curiosidade mesmo)
    só isto... fica com Deus....

    ResponderExcluir
    Respostas
    1. Olá Adeval, não tenho mais tanto tempo para blogar como antes, mas sempre que surge uma brecha ou recebo um pedido eu tento postar algo. Fico feliz em saber que achou o artigo interessante. Quanto a sua pergunta, meu template não é responsivo pois tenho alguns planos para o blog nesse ano. Se observar a primeira imagem desse post verá que dentro do monitor, tablet, smartphone e notebook, é o meu blog que aparece. Em breve trocarei de layout e meus esforços nessa questão estão voltados à esse novo template. Pra este que eu estou usando no momento eu prefiro apenas ativar a versão móbile do Blogger. Agradeço as visitas e o comentário. Volte sempre! Um abraço.

      Excluir
  2. ok irmão.
    deve que está ocupado mesmo.
    no começo eu havia lido que você estava fazendo ciencias contábeis.... Muito bom, pois sou também Contabilista...
    só que desativado, pois fui para a américa e vivi lá algum tempo e quando voltei não mais me interessei por cont.
    parabéns pela profissão...

    ResponderExcluir
  3. Que post bacana!

    E obrigada por usar minha sugestão. =)

    Também fico esperando novidades. Na torcida para ver o novo template.

    Abraço!

    ResponderExcluir