![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
O que é “Responsive design”? | O que é Layout Responsivo?
Não quero só responder essa pergunta, mas também apresentar como isso é fundamental para a sobrevivência de seu blog a longo prazo. Os layouts de sites que usam uma estrutura responsiva (responsive) são adaptados para qualquer tipo de tela ou aparelho móvel (tablets e celulares), usando apenas códigos HTML e CSS. Isso torna o seu blog mais amigável ao usuários e muito atraente para o Google.
A melhor forma de explicar o que é e como funciona um “Responsive Design” (Layout Responsivo) para sites e blogs, é na prática mesmo. Você deve estar navegando pelo [ Ferramentas Blog ] usando a tela maximizada (tela cheia) do navegador. Se você restaurar e mexer nas bordas do navegador, escolhendo o tamanho da janela, verá que o nosso layout se adapta e ajusta as larguras.
Melhor ainda se você tem um iPhone/iPad, um smartphone ou Tablet e acessar o endereço do [ Ferramentas Blog ]. Verá que ele se ajusta à sua tela também sem precisar entrar num endereço específico para aparelhos móveis. Sem redirecionamentos, outras URLs ou aplicativos pesados. Um único layout de blog que se ajusta à tela que o usuário estiver usando:
Este é um brilhante trabalho do Claudio Sanches, nosso editor de desenvolvimento e WordPress, que criou nosso atual layout, idealizando todas essas funcionalidades.
O recurso não é exclusivo, mas é relativamente novo. Já usamos esse formato aqui no Blog desde que migramos para o WordPress, em Fev/2011. Tal formato tornou nosso blog mais eficiente e amigável para todo tipo de visitante, especialmente aqueles que usam tablets e celulares na maior parte do tempo em que navegam.
Além de ajustar as larguras e tamanhos dos elementos, os espaços são rearranjados, partes podem sumir ou mudar de lugar, e inclusive pode-se ajustar o tamanho da fonte, das imagens e das telas de vídeos.
Vantagens do layout Responsivo
Esse tipo de estilo de layout para sites e Blogs, além de ser conhecido como “Responsive Design”, e não pode ser confundido com os antigos “fluidos“. As vantagens de usar tal recurso são óbvios.
- Um único layout para várias tipos de tela;
- Deixa o site/blog mais leve para aparelhos móveis;
- Evita redirecionamentos do endereço;
- Não precisa de aplicativos ou plugins para identificar o formato da tela;
- Evita conteúdo duplicado e punições dos mecanismos de busca;
- É mais amigável para o visitante.
A principal vantagem está mesmo na funcionalidade para o visitante, mas outra considero a mais importante. Do ponto de vista das técnicas de SEO, esse tipo de layout/design facilita a otimização e evita erros na hora de criar os redirecionamentos. Seu blog não precisará ter um endereço separado para ser acessado via aparelhos móveis, por exemplo.
Um único endereço URL é mais fácil de memorizar. Para o Google você só precisará submeter um único sitemap no Webmaster Tools e trabalhar as técnicas de SEO gerais, buscando um mesmo nível de indexação para todo o conteúdo do blog, sem duplicar seu trabalho.
Como ter um layout Responsivo?
Nem todo layout, Tema ou template pode ser adaptado para usar estilos responsíveis (Responsive Design) e isso não é tão simples de ser implementado. O mais recomendável é contratar um desenvolvedor que crie o seu layout já pensando nessas estruturas.
Existem modelos de layout Responsivo gratuitos, inclusive o Theme padrão do WordPress.org já vem com esse recurso, sem você precisar fazer nenhuma adaptação. O Blogger não tem Templates padrões com essa função, apenas os novos Visualizações Dinâmicas fazem isso, mas tem um redirecionamento para layout para celulares (o que não é a mesma coisa), mesmo assim existem templates de terceiros que podem ser instalados e usados.
Se você quer alguém que crie um Template de Blogger Responsivo para seu blog no Blogger (BlogSpot), recomendo que procure o CrieWeb.com e solicite um orçamento. Esse pode ser um ótimo investimento em seu blog.
Também pode-se comprar um layout Premium por um preço muito baixo, quase exclusivo, para praticamente todos os estilos de blogs. Aqui tem 250 modelos de layout premium para WordPress.
Cada tipo de blog e cada estilo de blogueiro necessita de um formato de layout específico que funcione bem em qualquer tipo de tela ou plataforma. Esta é a tendência de agora em diante na internet e é bom deixar o seu blog pronto para essas mudanças e novidades.
Excelente post!
Meu blog já tem esse layuot, como uso o blogger ele já tem esse recurso por padrão. Mas nada como WordPress né?
No dia que eu criar coragem e migrar pro WP esse post vai me ser muito util… 😀
Marcio,
O seu layout no Blogger não é responsivo. O que você tem em seu blog é o padrão de redirecionamento do Blogger. Isso é muito diferente. Não é uma característica de seu layout.
Obrigado Marcos pelo esclarecimento.
Tenho um celular simples e visito seu blogue usando Opera Mini e Uc Browser perfeitamente
Já tenho um layout responsivo , ele é muito importante para a acessibilidade dos leitores e do público em geral do blog!
Olá Marcos
Você poderia indicar algum plugin para detectar e alterar o layout automaticamente sempre que um visitante estiver usando um aparelho móvel?
Já indicamos aqui no blog mesmo alguns plugins para WordPress que redirecionam para layouts feitos para celular. Já no Blogger essa função é nativa.
Realmente o Blog se adapta bem em celulares e outras resoluções! Existe um recurso no Blogger para criar um layout próprio para visualizações em Celulares, esse recurso é valido? Tem a mesma funcionalidade ou restringe apenas a resolução pré determinada na configuração de larguras?
Fernando,
como destaquei no post acima, a função do Blogger para celulares é um layout diferente, com um endereço de redirecionamento. O template não se adapta, mas é trocado por outro em um novo endereço especial para ser aberto quando é identificado em que tipo de aparelho/plataforma está sendo aberta a página.
A primeira coisa que levei em consideração quando tomei coragem para migrar para o WordPress foi ter o layout responsivo. No Blogger, é um processo muito complicado. Você acaba cedendo a opção de usar o redirecionamento do Blogger, o que acaba gerando conteúdo duplicado no Webmaster Tools.
Recomendo quem quiser um layout assim, que migre para o WordPress ou peça um profissional para fazê-lo no Blogger.
Olá Marcos,
muito bom o seu artigo,
atualmente venho trabalhando em projeto desse tipo, para o meu blog!
Abraços.
Senti falta de conceitos técnicos, pelo menos uma dica sobre o assunto. na pergunta “Como ter um layout Responsivo?”, ficou faltando o mais importante, a resposta, muito além das propagandas ali contidas. Deixo isso como uma crítica construtiva
Lucas,
Como está dito no artigo, onde você achou ser uma “propaganda”, explico que criar e modificar layouts responsivos não é algo simples como instalar um trecho de código. Infelizmente não dá pra ensinar como aplicar isso em qualquer blog. Os conceitos técnicos vão ser mostrados em posts mais avançados, mas só desenvolvedores sabem realmente como aplicá-los.
A grande maioria de nós vai mesmo depender de alguém para criar isso.
mais uma vez o WordPress salvou a minha vida.
Já vi isso em outros sites sim e por incrível que pareça hoje estava vendo uma chamada para este fato na plataforma WP e me perguntei o que seria isso, até pelo fato da chamada ser em inglês. Por alegria encontro o artigo rico em informações.
Olá Marcos!
O responsive design realmente é uma tendência muito forte que inclusive já está dando frutos muitos positivos em razão da crescente demanda da tecnologia portátil… Sejam as vantagens do ponto de vista SEO ou experiência do usuário, acredito que logo isso se tornará requisito fundamental para sobrevivência de sites e blogs…
Artigo excelente que com certeza abrirá os olhos de muitos colegas da área para se movimentarem nesse sentido; afinal, quando o assunto é tecnologia/internet, não dá pra deixar nada para depois.
Abcs
Olá Marcos,
Muito boa dica. Não tinha conhecimento sobre sites e blogs com layout responsivo e pelo que pude notar é realmente muito importante principalmente no momento em que vivemos, onde já uma grande parte dos leitores mundiais utilizam tablets e smartphones para acessarem a internet.
Até mais e boas postagens!
Pingback: 10 Layouts (Temas) Responsivos para WordPress | [ Ferramentas Blog ]
Pingback: Tudo sobre Layout Responsivo #01: Introdução Responsive Design | [ Ferramentas Blog ]
Pingback: Não exite Layout perfeito para Blog - [ Ferramentas Blog ] | [ Ferramentas Blog ]
Pingback: 5 Templates Responsivos de alta qualidade para Blogger - [ Ferramentas Blog ] | [ Ferramentas Blog ]
Pingback: Gostou do NOVO Layout do [ Ferramentas Blog ]? - [ Ferramentas Blog ]
Pingback: A ESTRUTURA DE UM BLOG DE SUCESSO/ Por Marcos Lemos
Olá Marcos
Na verdade tenho uma pergunta a lhe fazer.
Sempre ouço dizer que usar criação de sites gratuitos não é um bom negocio. Queria saber qual sua opinião sobre isso, já que notei um banner do WIX ai no seu artigo.
Obrigado.
Ah! E parabéns pelo artigo. Muito bom mesmo.
João,
Apesar da Wix ser um serviço de criação de sites gratuitos, eles também têm a versão profissional, paga. São um serviço altamente profissional, um dos melhores que conheço.
Tem que saber diferenciar as coisas. Existem plataformas gratuitas, como o Blogger, que servem para criar sites/blogs profissionais. Vai depender das ferramentas disponíveis, se são boas ou não.
Pingback: Layout responsivo no Vida de Turista! Confira a novidade!