Responsive Web Design: Guia para os SEOs
Amigo SEO, fique de olho em suas estatísticas do Google Analytics - o mercado do smartphones não para de crescer! Com toda a atenção que o Responsive Web Design atrai, o que poderiam fazer os outros profissionais de marketing e os SEOs que querem ter sucesso, se não avançar para estratégias móveis, a longo prazo?
Antes de tudo, o que é Responsive Web Design?
Em suma, o RWD (Responsive Web Design, ou seja, o " Web Design reativo") é uma técnica que utiliza um layout flexível (que "estica" a tela, se adaptando dinamicamente melhor), além das "consultas de mídia" CSS, que aplicam diferentes folhas de estilo (CSS) com base no tamanho da tela da máquina.Com um design reativo, o seu site se ajustará a qualquer máquina com um "explorador completo": smartphones, iPad + outros tablets (tanto em modo retrato quanto em paisagem) e, até mesmo, a TV. Não importa se a resolução do Galaxy Tab é diferente da do telefone Nexus S - o seu site aparecerá maravilhosamente lindo, desde que o Responsive Design tenha sido devidamente executado.
Exemplo de Responsive Web Design instalado pelo UC San Diego
Um dos exemplos mais conhecidos do Responsive Web Design é o site BostonGlobe.com: basta ir ao site e redimensionar a sua tela do navegador: ele vai ajustar automaticamente a largura do mesmo. O BostonGlobe é, provavelmente, o maior e mais complexo site que implementaram essa técnica, mas existem centenas de outros exemplos disponíveis no mediaqueri.es, incluindo UC San Diego, Smashing Magazine, e muito mais.Quais são as alternativas para o Responsive Design?
O Responsive Design tornou-se objeto de controvérsia desde o desenvolvimento do móvel. Algumas pessoas o veem como a melhor solução para melhorar sua experiência de usuário de celular (e de tablet), embora isso nem sempre seja o caso. O objetivo deste post é o de estudar o Responsive Web Design em detalhes mas, ter uma imagem exata. Vamos ver também, duas alternativas para a "mobilidade crecente" graças ao RWD (Responsive Design Web).Site alternativo para celular
Normalmente, hospedados em um subdomínio "m", os sites móveis são desenvolvidos a partir do nada. Os visitantes serão redirecionados para o site móvel quando o servidor terá detectado o que o seu user-agent (UA) é um smartphone.Por exemplo,o user agent para iPhone parece com isso:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
Aplicativo móvel
Se, por um lado, os aplicativos móveis (Apple iOS, Android, Blackberry, ou Windows Phone) são melhores para controlar a experiência do usuário e para tirar partido das capacidades de hardware dos smartphones, por outro, eles são caros para desenvolver e não fazem parte da "web aberto", tornando impossível a indexação correta dos motores de busca.Como o Google lista os sites Responsive ?
Cerca de seis meses atrás, o Google apresentou uma nova ferramenta de indexação para smartphones, que imita o user agent do iPhone. Enquanto que o Responsive Web Design só adapta a página ao tamanho da tela, sem modificar o conteúdo baseado no user agent do móvel, o Googlebot-Mobile tem acesso ao conteúdo do site todo (HTML, CSS, imagens, etc).A única diferença é que se o Google puder ler através dos CSS e entender as consultas de mídia usadas pelo Responsive Web Design, ele também poderá ver que elementos estão ocultos no seu site móvel (não vamos falar, mas esta é sempre uma questão aberta). Por medida de segurança, eu não ocultaria qualquer elemento com conteúdo importante, de uma largura superior a 600 px.
Prévisualização da imagem nos SERP (página de resultados de um motor de busca)
O SERP do Google móvel lista mostra a lista de prévisualizações dos últimos smartphones. Para aqueles com um design reativo, a prévisualização é mostrada com uma largura de cerca de 640 px (a resolução do iPhone em modo retrato). Veja os exemplos de capturas de tela abaixo.
Indexação e buffer (com uma experiência!)
Eu fiz uma experiência para ver se o Google realmente indexa as páginas criadas especificamente para dispositivos móveis. Eu segui estes passos:- Na parte de baixo de cada página do meu site, eu adicionei um texto que visa agentes usuários de celulares e, que só pode ser visto, se o aparelho do visitante for um smartphone.
- O texto exato (que é "mobphone teststring") não aparece nem no Google nem no Bing
- Eu selecionei "Analisar como Googlebot" (Mobile: Smartphone) nas ferramentas de administração. O resultado mostrou que o meu texto podeser visto com o Google Bot. (27 de abril, 21h).
- Esperei minhas páginas serem indexadas novamente (verifiquei os registros do meu servidor depois de ativar o "Analisar como Googlebot")
- Eu procurei o "mobphone teststring" no Google e no Bing ... Nenhum resultado encontrado (mesmo após 10 dias).
- Na busca de meu próprio site no Google com um smartphone, as páginas postas no buffer do início e "mobphone TestString" não aparecem.
VEREDICTO: Ao carregar versões móveis de páginas localizadas no mesmo URL, como as páginas iniciais (seja pelo Responsive Web Design ou visando com o user agent):
O Google não registra as versões móveis de suas páginas.
Atualmente, o Google parece ignorar qualquer conteúdo que só possa ser visto pelos visitantes móveis .
Se o propósito de suas visitas, entre um site móvel e em um site com a página inicial, for diferente (por exemplo, sites de seguro de automóvel: citações na página inicial contra a assistência na estrada, no celular), então, eu estaria mais de acordo com Bryson Meunier:
Atualmente, a abordagem híbrida dos URLs para celulares (com um sub-domínio ".m") deveria garantir que o conteúdo do site móvel também fosse indexado e processado da mesma maneira que os sites normais .
(Embora, no final desta dica, eu descreva como eu gostaria de ver isso ser suportado, a longo prazo, pelos motores de busca).
Bing e os celulares
Enquanto o Bing não tem nenhum indexador separado para os móveis que imitariam um smartphone, BingBot parec indexar sites de base e sites móveis. Assim, um post relativamente recente do Duane Forrester fala sobre a política do "URL-único" para todos os aparelhos preferindo o Bing. Eu não encontrei outra informação on-line, nos logs do servidor ou, por experiência própria (Bling não deixa ver as páginas do buffer no celular).Responsive Web Design: Lista exaustiva das vantagens e desvantagens
O Responsive Design não é uma solução completa para dispositivos móveis. Segundo o autor do livro Responsive Web Design, Ethan Marcotte:"Sobretudo, o Responsive Web Design não foi criado para substituir os sites móveis. (...) E, como estratégia de desenvolvimento, ele deve ser questionado para ver se ele atende às expectativas do seu projeto" .
Tendo isso em mente e, considerando as implicações da lista abaixo, o Responsive Web Design responde às necessidades do projeto?
As 7 VANTAGENS do Responsive Web Design
1. A experiência do usuário (o "UX" em Inglês): O site se adapta a qualquer tamanho de tela, tornando-se uma boa solução, a longo prazo, para a experiência do usuário com o grande número atual de aparelhos (incluindo o celulares híbridos /tablets). Ao ocultar os elementos que não são cruciais para os visitantes móveis, ele os ajuda a atender suas buscas mais rapidamente.2. Analytics: Uma visão completa de todo o tráfego. Para ter uma visão geral dos visitantes móveis, criar uma categoria "Móveis apenas" (note que, por padrão, o Google Analytics coloca tudo na categoria "Móvel").
3. Compartilhamento / Links: Um link URL para acumular todas os compartilhamentos, gostos (curtir), tweets e links de entrada. Contribui para uma melhor experiência do usuário também. Você já clicou em um link no tweet só para ver a versão móvel de uma página no seu navegador completo? # UXfail
4. SEO (otimização para Motores de Busca): Com a vantagem acima, um URL acumula todos os links, PageRank, Page Authority, etc. No entanto, como os motores de busca estão ficando mais espertos para determinar as relações entre as páginas otimizadas para móveis e as páginas para computador, esta vantagem não vai contar.
5. Desenvolvimento: O Responsive Design Web acaba com a preocupação do redirecionamento de links, sem user agent.
6. Manutenção: Depois de ativar o site, a manutenção é muito pequena, ao contrário da manutenção de um site móvel independente. Não é necessário para manter uma lista de user agent com actualizações.
7. Arquitetura da Informação (AI): Com uma relação única com o site de base, o móvel tem a mesma AI que o site completo, reduzindo o tempo necessário para se acostumar a utilizar o site móvel.
As 5 DESVANTAGENS do Responsive Web Design
1. Experiência do usuário /Tempo d carregamento: Os usuários devem baixar desnecessariamente um código HTML/CSS (não é complicado) e, na maioria das vezes, as imagens são simplesmente esmagadas, NÃO redimensionadas - o que tem um impacto negativo sobre o tempo de carregamento (maior problema).2.
3. SEO: De acordo com a minha experiência, o Google não ordena por sites baseados em um conteúdo móvel localizado exclusivamente no mesmo URL. Se o site reativo só visa os user agents para servir um certo tipo de conteúdo, ele não será indexado ou usado para classificar o seu site.
4. Desenvolvimento: O desenvolvimento inicial do Responsive Web Design leva mais tempo. Geralmente, é mais fácil criar o Responsive Web Design a partir do nada e, depois, converter um site já existente.
5. Design: Como os layouts do Responsive Web Design são dinâmicos (exceto os dois extremos: aqueles do site móvel e do site completo), há menos controle sobre a aparência de layouts intermediários e é mais demorado para os designers mostrarem todos os modelos possíveis, antes. Na verdade, eles geralmente mostram as grades e modelos de escritório + layouts para dispositivos móveis. Quando ambos são aprovados, o Responsive Web Design é instalado e os designers, então, podem mostrar layouts operacionais para todos os tamanhos de tela.
Eu já tentei fazer uma lista tão abrangente quanto possível. Vou acrescentar algumas generalizações abaixo mas, no final, cabe a você ver se o Responsive Web Design é a melhor solução para a sua estratégia para celulares.
Quando utilizar o Responsive Web Design faz sentido (ou não)
Como mencionado acima, o Responsive Web Design não é uma solução milagrosa; por isso, ele funciona melhor em alguns sites do que em outros. Vejam algumas generalizações mas, verifique bem a lista completa dos prós e contras, se isso ainda não foi feito.- Se o seu site contém menos de 50 páginas, ele não inclui características avançadas e, que a expectativa de um usuário só é radicalmente diferente em um dispositivo móvel, podemos apostar que o Responsive Web Design será uma solução adequada para melhorar a navegação do usuário móvel.
- Se o seu site é bastante simples, sem muitos tipos diferentes de páginas (isto é, páginas de artigos, categorias, surf, etc) e, que o visitante não faz uso muito diferente em seu celular, o Responsive Web Design pode ser uma boa solução para melhorar a sua utilização.
- Se você tem um site complexo, com muitos tipos de páginas, que a expectativa do usuário não é muito diferente da do celular e, que você planeja uma reorganização, você deveria, pelo menos, refletir sobre o Responsive Web Design.
- Se os visitantes têm objetivos completamente distintos usando o seu site a partir de dispositivos móveis, é provável que o Responsive Web Design não é feito para você.
Certamente, as visitas a partir dos celulares continuam a se expandir mas, apesar de relatórios recentes apenas 9% dos milhões de sites mais visitados estão disponíveis em celulares (de acordo com o Mongoose Metrics), a maioria absoluta dos sites são realmente acessíveis em smartphones - desde 2007, quando a Apple introduziu a possibilidade de navegar em qualquer site no iPhone. Na verdade, a Apple acredita ter oferecido um bom produto (um navegador completo que torna os telefones "inteligentes"), que não precisa para os sites móveis: em um smartphone, Apple.com é o site completo.
Como acontece com qualquer outro projeto, é preciso estabelecer metas e expectativas realistas para o site móvel ("aumentar a taxa de conversão do segmento móvel em X%" ou "aumentar a taxa de satisfação dos clientes que acessam o site móvel de X%") e determinar se é suficiente para justificar o investimento com a sua" base de usuários" móvel atual, visto o progresso deste mercado.
Lá onde eu gostaria de ver a pesquisa no celular
Na medida em que os motores de busca progridem, na minha humilde opinião, é do seu interesse determinar as expectativas dos usuários com base no aparelho que eles utilizam. Cindy Krum do MobileMoxie escreveu sobre as diversas maneiras de exibir a página de pesquisa de acordo com o dispositivo utilizado e, eu acho que, em breve, vamos ver mais destes avanços de melhoria.Nós realmente não podemos esperar que o Bob, dono de um restaurante, faça uma busca por palavra-chave para determinar se os usuários móveis que fazem pesquisas preferem ver o menu do que a seção "sobre o restaurante", na página inicial.
Os motores de busca precisam se desenvolver mais e fornecer aos visitantes móveis páginas mais susceptíveis de serem visitadas (nada de novo) mas, adaptando esta possibilidade para celular.
Atualização:
Desde do dia 6 de junho, o Google decidiu construir sites otimizados para smartphones e disse que o Responsive Web Design é a configuração recomendada. Dito isto, as vantagens e desvantagens do Responsive Web Design listadas nesta dica são as mesmas.Artigo traduzido do Seomoz.org: Web Design Responsive: Responsive Web Design: The Ultimate Guide for Online Marketers
Artigo original publicado por Alexandre
Tradução feita por Lucia Maurity y Nouira reprodução kioskea
Deixe um comentário não custa nada!
0 comentários