Will Critchlow anunciou em novembro que o blog Distilled foi atualizado com um novo design responsivo. Mas me ocorreu recentemente que nunca entramos em detalhes do porquê de o web design responsivo ser tão bom. Ele tem sido um tema em alta no marketing online nos últimos meses, mas ele vai realmente se tornar um padrão da indústria?

Resposta curta: sim.

Web design responsivo significa que você não tem versões separadas do seu site para celular, tablet e PC: o site se adapta a qualquer tamanho de tela em que está sendo exibido. Independentemente de qual dispositivo os visitantes estão usando para acessar o seu site, eles verão todo o conteúdo que você tem para oferecer (chega de versões mobile com conteúdo parcial do site) e eles o visualizarão em forma legível.

Com um aumento de 55% nas assinaturas de smartphones em 2012, o web design responsivo é o futuro do marketing online.

Como ele funciona?

Parece bom demais para ser verdade, não é? Tudo começou com uma teoria bem simples do Ethan Marcotte em um artigo de 2010 intitulado “Responsive Web Design”. Em vez de criar uma página única, que tem 800px transversalmente e se centra na tela, as páginas responsivas são compostas por elementos como forma e tamanho, que as colocam com base na largura da tela do navegador. Os elementos determinam o tamanho da tela usando queries de mídia CSS.

Vamos começar com um exemplo simples em uma grade, com 9 elementos retangulares marcados A-I. Em uma tela pequena, como um tablet ou um computador mais antigo com menos pixels, os elementos seriam exibidos em uma grade 3 x 3:

Quando a tela é maior, esses elementos podem se espalhar:

Quando é mais estreita, eles podem empilhar:

Agora aqui está um exemplo complexo e engenhoso da vida real. O site da Microsoft usa estas seções:

Quando a tela fica menor, os elementos empilham de forma diferente:

Para um exemplo mais interativo, acesse www.microsoft.com e se divirta mudando a tela do navegador.

Na sua concepção, a Microsoft mantém todos os elementos da versão desktop da página para serem vistos em outros dispositivos. Mas uma das maiores diferenças entre os sites de desktop e os móveis é que sites móveis simplesmente não têm espaço ou a memória do navegador para ter tanto conteúdo em uma página. Por exemplo, a Smashing Magazine se livra do material extra à medida que o tamanho da tela fica menor:

Aqui está a sua visão desktop:

A página de tamanho completo possui dois níveis de navegação à esquerda, o conteúdo principal no meio, e busca e anúncios à direita. Ele concentra o conteúdo principal no meio, para onde você vai olhar, mas faz uso da largura ampla da tela do desktop.

Passando para a exibição do site na tela do iPad:

Quando a tela não tem tanto espaço em ambos os lados, a Smashing Magazine mantém os anúncios e as buscas na direita, mas move a navegação para o topo de uma forma inteligente que é notável, mas não ocupa muito espaço.

Aqui está a sua exibição na tela do Kindle Fire:

Os anúncios foram sacrificados, já que o espaço de tela se tornou muito valioso. A busca foi movida para o topo, de modo que o segundo nível de navegação foi deslocado para o lado para garantir que o conteúdo principal não comece muito baixo na página.

E agora, para o celular:

No modo de exibição para celular, os anúncios ainda estão fora, juntamente com os botões de compartilhamento. A navegação foi alterada de um elemento constante na página para uma pequena redução abaixo no topo. A barra de busca foi colocada no espaço disponível, uma vez que a navegação superior se foi.

Como você pode ver, o web design responsivo te oferece uma quantidade incrível de controle. Com um pouco de criatividade, um web design responsivo pode converter quase qualquer coisa otimizada para PC para otimizada para celular.

Por que o design responsivo é bom para SEO

Agora você sabe que o design responsivo é uma ideia inteligente que, com a configuração correta, irá diminuir a manutenção web e a criação de conteúdo. Mas como isso ajuda o SEO?

Usabilidade

O Google quer enviar visitantes para os sites que eles querem ver. Quando as pessoas que estão fazendo as busca navegam para o seu site e retornam imediatamente para páginas de resultados de mecanismos de busca, o Google faz uma observação de que o seu site pode não ser a melhor escolha para esse termo de pesquisa.

Se você tiver um site mobile que possui menos conteúdo ou parece significativamente diferente em relação ao seu site normal, você vai frustrar os visitantes de retorno que estão à procura de algo que encontraram na versão desktop. Se você não tem um site mobile, 61% dos visitantes vão voltar para o Google para encontrar um site que seja de fácil leitura. De qualquer maneira, seu índice de rejeição vai subir e seus rankings vão cair. Com um design responsivo, os visitantes poderão obter todo o conteúdo que quiserem, em um formato que possam ler.

Conteúdo duplicado

Não se preocupe, um site mobile com o mesmo conteúdo que o site principal não será atingido pelo Panda. Mas você ainda vai ter o mesmo conteúdo em dois lugares na web, o que é incômodo para você e poderia levar visitantes para a versão errada do seu site. Um site com design responsivo significa que o conteúdo está apenas em um único lugar na Internet.

Classificação de buscas móveis

O Google afirmou que classifica sites otimizados para mobile de forma melhor em buscas móveis. O Google recomenda web design responsivo, ou seja, o seu site com design responsivo terá uma boa classificação em pesquisa móvel, como um site projetado especificamente para dispositivos móveis. Isso é especialmente útil para…

Link building

Com um design responsivo, um link para o seu site principal é um link para o seu site móvel. Sites móveis ainda são novos, então sua concorrência em buscas móveis vai ter menos backlinks significativos. Um site com design responsivo terá os backlinks do seu site original, mesmo enquanto competem por visitantes móveis. Ele vai te dar uma vantagem imediata para lá. E, com o aumento da utilização de celular e webmasters começando a linkar para sites móveis, seus backlinks de sites móveis e desktop irão combinar para um perfil backlink forte.

Reconhecendo early adopters

Tornando seu site responsivo, quando o assunto é popular, mas grande parte não utilizada, você vai ser notado. Aqui estão alguns bons exemplos:

• http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
• http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
• http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/
• E, é claro, Microsoft e Smashing Magazine deste artigo.

Resultados

Como você provavelmente pode imaginar, se o seu site foi previamente otimizado para tablet e/ou celular, você verá uma diminuição do índice de rejeição a partir desses dispositivos. Nós vimos os efeitos positivos se espalhar para o site principal também. Em um site amigo do Distiller, a implementação do web design responsivo aumentou as visitas em mais de 400% em um mês:

Esse é um exemplo extremo; a troca para o design responsivo no blog Distilled não teve o mesmo efeito. No entanto, resultados como esse mostram que, na situação certa, o design responsivo pode trazer resultados surpreendentes.

Os contras

Web design responsivo não é o Santo Graal do marketing online, mas existem algumas desvantagens que você vai querer ponderar antes de decidir mergulhar de cabeça.

Configurar o tempo

Mudar para um web design responsivo toma bastante tempo das equipes de design e de desenvolvimento. Ele provavelmente vai levar mais tempo que a maioria dos redesigns que você já fez, uma vez que as duas equipes terão que aprender um conceito completamente novo antes de implementá-lo. No lado positivo, quando outros sites iniciarem a atualização para o design responsivo, você vai estar um passo à frente.

Páginas grandes

Se você tem um monte de conteúdo em suas páginas de desktop, design responsivo significa que todo esse conteúdo tem que ser carregado em páginas mobile. Você pode imaginar um pobre telefone tentando carregar tudo isso?

É por isso que sites como o NYTimes.com e CNN.com têm versões móveis separadas, que só exibem uma pequena parte de todos os artigos e links das suas versões desktop. Se você tem um site que é tão grande assim – e que deve ser grande assim – fique com as versões móveis e desktop separadas.

Experiência do usuário móvel

Uma vez que o design responsivo te limita para as mesmas páginas e os mesmos conteúdos em relação às versões mobile e desktop, ele poderia limitar suas opções para melhorar a experiência do usuário. Embora eu tenha indicado anteriormente que os usuários móveis querem o mesmo conteúdo que os usuários de desktop, eles estão navegando em uma tela minúscula com os dedos, em vez de em uma tela grande com mouse e teclado, então a jornada deles para esse mesmo conteúdo vai parecer completamente diferente. Se você tiver um site muito interativo ou complicado que precisa ter caminhos diferentes para conteúdo, como o Facebook, convém manter essa versão móvel de seu site para que você possa ter esse controle.

Então, design responsivo é a resposta certa para o seu site?

Se o seu site for muito grande ou muito complicado e precisa de um site móvel, você provavelmente está ciente disso (e provavelmente já tem um ótimo site mobile no qual você não deve mexer). Mas, e se você não tiver um site móvel ou tem um simples e não sabe se a mudança para um design responsivo vale a pena? Você vai pesquisar um pouco no Google Analytics:

Eu realmente preciso de um site móvel?

Comece indo para o relatório Mobile Overview, que é um relatório padrão na seção Audience, em Mobile. Se o número de visitas móveis e tablets é inferior a 5% de seu tráfego total, você provavelmente não precisa se preocupar com a criação de um site mobile específico (ainda: esse número só tende a crescer).

Se for mais do que isso, clique no conjunto de métricas do Goal Set ou Ecommerce – seja qual for que você usa para acompanhar as conversões – no topo da página, sob a guia Explorer:

As  visitas do seu desktop estão convertendo significativamente mais do que as visitas móveis? Se a taxa de conversão móvel é inferior à metade da taxa de conversão desktop, o site está atuando abaixo do padrão da indústria, e você precisa otimizar para os visitantes móveis.

Qual a aparência do meu site móvel nas telas deles?

Vá para Standard Reports>Audience> Mobile>Devices  e altere a dimensão primária para “ScreenResolution”. Você pode mudar isso logo acima da tabela, clicando em Other no menu drop down à direita da linha de outras dimensões principais que você poderia usar. Experimente as 10 resoluções de tela mais comuns que são utilizadas por seus visitantes. Qual a aparência do seu site móvel nelas? Use Screenfly para ver seu site em dispositivos diferentes. Você pode se surpreender com a quantidade de tablets ou grandes telefones que estão vendo um site muito simplificado, que não é muito convincente. Mesmo se você tiver um site móvel que fica bem em 50% das visitas mobile, se ele tem a aparência ruim em outros 50%, você deve considerar o design responsivo.

O meu site móvel proporciona aos visitantes o que eles querem?

Olhe para o índice de rejeição móvel em Standard Reports> Mobile> Overview. Quando os visitantes vão ao seu site móvel, alguma coisa está fazendo com que eles saiam mais rapidamente do que no desktop? Os visitantes móveis devem ter mais ou menos o mesmo índice de rejeição do que os de desktop.

Se você tem tempo, faça uma auditoria móvel de SEO completa para realmente identificar como a versão móvel do seu site precisa ser. Aleyda Solis escreveu um ótimo guia de auditoria móvel no State of Search.

Sua melhor opção: vá para o design responsivo lentamente

Se você gostaria de avançar para o design responsivo lentamente ou já tiver um site móvel muito bom por aí, considere fazer o seu site responsivo de modo que ele seja otimizado para desktop e tablet, mas não mobile ainda. O design vai ser mais fácil, mas você vai ter uma primeira experiência com a parte técnica, e poderá obter conversões melhores para usuários de tablet (que você provavelmente não otimizou ainda).

Ethan Marcotte explica como funciona a codificação em seu artigo original, e os desenvolvedores têm criado temas para CMSs populares (para WordPress, Drupal e Joomla).

Esteja ciente de que a implementação técnica é bastante avançada, e há uma série de pequenos erros que você deve tomar cuidado para evitar:

1. Use imagens comprimidas

Você pode ter algumas fotos lindas que carregam bem na versão desktop do seu site, mas elas terão que ser carregadas em versões móveis também. 74% dos usuários de celular sairão da página depois de 5 segundos de espera para que ela carregue, então tenha certeza de que você comprima suas imagens o máximo possível, e use-as com moderação. Smush.it é uma ótima ferramenta para compressão de imagens.

2. Design para todos os tamanhos de tela

Muitos designers vão querer projetar um tamanho para mobile, um para tablet e outro para desktop, e fazer somente um design “responsivo” que se encaixe no site em um layout diferente para esses tamanhos padrão. Mas nós temos telefones celulares grandes e pequenos, tablets do tamanho de Kindle Fires a Samsung Galaxy Tabs de 10 polegadas e monitores desktop que chegam a ter 30 polegadas. Um design responsivo é mais sobre o redimensionamento dos elementos em uma página, já que você você tem mais pixels do que ela, do que sobre encaixar um design em outro. Como o designer Stephen Hay diz: “Comece com a tela pequena primeiro, e depois expanda até parecer uma merda! Hora de inserir um breakpoint!”

3. Mostre sempre todo o conteúdo

Pode parecer avasslador encontrar uma maneira de encaixar todo o conteúdo da versão desktop de uma página em uma versão móvel dela, mas esse é o ponto do design responsivo. Nos exemplos descritos acima, o único conteúdo que desaparece são os anúncios (os quais os usuários provavelmente não querem, em primeiro lugar) e um pouco de navegação (que é substituída por uma versão mais simples de navegação). Nenhum conteúdo real é ocultado. Os visitantes móveis querem o máximo de informações e simplesmente tantas opções quanto os usuários de desktop possuem; então, não os prive.

4. Otimize para touch

Você provavelmente não vai incluir acidentalmente um evento onmouseover do JavaScript no tamanho mobile de seu site, mas esteja ciente que o hover pode não funcionar em tablets e que alguém usando o Windows 8 em um computador pode querer usar o touch. A melhor prática é fazer com que o seu site seja totalmente acessível apenas com touch, independentemente do tamanho da tela.

5. Teste em todos os navegadores

Lembre-se dos bons e velhos tempos, quando você reclamou por ter que testar seu site no IE e Firefox? Agora que você tem:

Desktop:

• IE9 para Windows 7
• IE10 para Windows 8 (que não roda o Flash)
• Firefox
• Chrome
• Safari

Tablet/Mobile

• Safari
• Android
• Chrome beta
• Dolphin
• Opera
• Firefox

E esses são apenas os mais populares. Você vai ter que testar em todos os outros, em diferentes resoluções de tela, também.

Mas vale a pena

Mudar para um web design responsivo será um grande desafio, mas com a forma como a indústria está se movendo, ele vai te preparar para o futuro, e colocá-lo um passo à frente de seus concorrentes.

Algum de vocês já fez a mudança? Algum conselho para quem ainda não?

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em  http://www.seomoz.org/blog/seo-of-responsive-web-design