Muito se fala hoje em templates responsivos.
Você sabe do que se trata?
Neste artigo, você entenderá o que é um template responsivo e em que situações ele é interessante para o seu blog.
Verá também algumas indicações de bons templates responsivos para o Blogger e entenderá os princípios técnicos básicos envolvidos na criação de um template assim.
Introdução
De forma simples, um template responsivo é aquele que permite que o visual do seu blog se adapte automaticamente para ser exibido nos mais diversos tamanhos de tela, desde um pequeno smartphone até o monitor de um desktop.
Isso não significa apenas modificar o tamanho da fonte ou colunas, mas também determinar quais elementos serão exibidos e em que posição eles ficarão.
Sua principal utilidade é fornecer uma experiência melhor aos usuários que visitam seu blog através de smartphones, onde é mais notada a deficiência de um template não responsivo.
Quem nunca visitou um site ou blog no celular e se deparou com letras miúdas e uma navegação terrível?
O template responsivo resolve isso.
Os templates responsivos não são novidade: eles já existem há alguns anos, praticamente desde que se tornou mais comum o acesso à internet por dispositivos móveis.
Neste artigo, você entenderá mais sobre eles e aprenderá como ter um template assim em seu blog.
1. Exemplo de blog com template responsivo
Vou usar como exemplo aqui um blog que, para mim, é hoje um dos mais bonitos na plataforma Blogger: o Vida Real da Sam, da Samanta Modesto, minha parceira aqui no Gerenciando Blog.
Veja abaixo com o blog dela é mostrado em algumas telas diferentes:
Desktop
Tablet
Smartphone
Note como o template se adéqua ao tamanho da tela, fazendo com que sejam mostrados somente os elementos mais importantes que cabem em cada uma delas.
2. Como saber se um template é responsivo?
Há uma forma simples para você verificar o comportamento de um template para entender se ele é ou não responsivo (inclusive o seu):
1. Abra o blog desejado na janela do seu navegador.
2. Caso ele seja aberto em tela cheia (maximizado), clique no botão indicado na figura abaixo (que fica no canto superior direito da tela) para restaurar o tamanho da janela.
3. Mova o mouse até a borda da janela, até que ele fique com o formato destacado abaixo:
4. Pressione o mouse e arraste a janela para aumentar ou diminuí-la.
Observe o comportamento do template nessa janela: se ele se adaptar enquanto você move o mouse, significa que ele é responsivo.
3. E se o meu template não for responsivo?
Se no teste anterior o seu template não se adaptar à largura da janela, significa que ele não é responsivo.
Um exemplo de layout não responsivo é o meu template atual do Gerenciando Blog (quer dizer, isso depende de quando você ler este artigo, pois já está planejada a troca para um template responsivo.).
Antes, isso trazia muitos problemas quando um visitante acessava um blog assim no smartphone. A leitura era muito prejudicada.
No entanto, o Blogger já tem uma solução para este caso: se o seu template não for responsivo, é possível exibir uma versão mais simples do blog, adaptada para celulares.
Por isso, o Gerenciando Blog é visto como abaixo em um celular:
Não é a solução perfeita, mas isso já melhora a experiência que quem visita seu blog enquanto você não tem um template responsivo. Sem o recurso, veja como o Gerenciando Blog seria exibido:
Para ativar o template para celular em seu blog, basta seguir as instruções abaixo:
1. Acesse http://www.blogger.com e entre com seu usuário e senha.
2. Clique sobre o nome do seu blog.
3. Acesse a opção “Modelo” no menu à esquerda.
4. Se você ver a opção “Desativado” (como destaquei em azul na figura abaixo), significa que o seu próprio template será exibido nos smartphones.
Se o seu template for responsivo, é assim que ele deve ficar. Caso não seja (como é o meu caso), você deve clicar no botão destacado em vermelho.
5. Na tela seguinte, marque a opção “Sim, mostrar modelo para celular em aparelhos celulares.”, escolha um dos modelos disponíveis e clique no botão “Salvar”.
Pronto! Fazendo isso, o Blogger exibirá automaticamente a versão específica para celulares quando ele for acessado em um desses dispositivos.
Você pode fazer um teste em seu navegador mesmo, apenas acrescentando /?m=1 ao final do endereço do seu blog ou de uma postagem (por exemplo https://www.gerenciandoblog.com.br/?m=1).
4. Onde encontrar templates responsivos para o Blogger?
Hoje, já há ótimos templates responsivos para o Blogger, tanto grátis quanto pagos.
Abaixo estão alguns bons exemplos, mostrando onde você pode obtê-los:
Focused – Grátis
Fizz – Grátis
Sora Mag – Pago
Fast News – Pago
Adamz
Se você quiser conhecer outras opções grátis, indico o artigo 25 Best Free Responsive Blogger Templates for 2013, do blog Zizaza.
Há muitas outras opções, tanto grátis quanto pagas! Preste atenção ao termo “responsive” na descrição do template e faça o teste de redimensionar a janela para confirmar.
5. Como funciona um template responsivo?
Neste item, falarei um pouco sobre os princípios técnicos utilizados na construção de um template responsivo.
Minha intenção não é permitir que alguém consiga desenvolver um template apenas a partir dessas instruções, mas que entenda seu funcionamento e possa realizar pequenos ajustes.
Todo o “segredo” dos templates responsivos está em seu código CSS.
Caso você não saiba do que estou falando, sugiro a leitura do artigo CSS no Blogger: o que é e como usar.
No caso dos templates responsivos, o CSS possui seções específicas para as áreas responsivas.
Cada área determina como o template deve se comportar de acordo com a largura da tela.
Abaixo estão alguns exemplos do template Adamz, mostrado no tópico anterior:
@media only screen and (max-width:1190px) {
#ajax-search-form {padding-left: 0;}
.sf-menu a {padding:0 10px;}
#headtitle {min-width: 250px;max-width: 250px;}
}
@media only screen and (max-width:1060px) {
#searchnya input {width:120px;}
}
@media only screen and (max-width:1024px) {
.sf-menu a {padding:0 8px;}
#latst {width: 750px;}
}
@media only screen and (max-width:979px) {
#outer-wrapper {
width:768px;
}
Note que, dentro de cada grupo, há algumas instruções específicas sobre quais elementos devem ser exibidos naquelas dimensões.
Conclusão
Cada vez mais, um template responsivo para seu blog se tornará um item essencial.
Com o aumento de acesso do seu blog por dispositivos móveis, é essencial que o leitor tenha uma boa experiência.
Por isso, vale a pena pensar o quanto antes em instalar um template assim em seu blog.
Caso você não se sinta seguro para fazer isso sozinho, conte conosco!
Acesse nossa área de Serviços e veja como nos contratar.
E você, já tem um template responsivo em seu blog?
Pretende trocá-lo em breve?
Deixe sua opinião em um comentário!
Leave feedback about this