Saiba qual é a diferença entre layout móbile e responsivo
Autor: Igor Sousa | Publicado: 2014-01-22T19:12:00-02:00

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!