Estamos presenciando uma verdadeira “revolução móvel” com a forte adoção dos dispositivos móveis no nosso dia-a-dia. Além de smartphones e tablets, outros dispositivos móveis continuam se consolidando e muitos outros devem surgir, como o caso do Google Glass e iWatch, contribuindo para tornar as pessoas cada vez mais conectadas, independente do contexto, horário e local.
Do ponto de vista das marcas e do marketing, traz novos desafios: produzir uma versão mobile dos sites para smartphones tornou-se uma prática cada vez mais comum, mas como criar sites específicos para cada dispositivo ou formato de tela?
Nos últimos 2 anos, o Responsive Web Design ou Design Responsivo vem ganhando força como uma estratégia para esse cenário “plural” que a internet vem se tornando. O Design Responsivo é uma solução que propõe desenvolver o site de forma que todos seus elementos se adaptem automaticamente para a tela do dispositivo que o site está sendo acessado.
Nesse post vamos buscar mostrar porque faz todo o sentido trabalhar com Design Responsivo.
MOBILE FIRST
Em 2010, o Google decretou “mobile first”. Com essa simples frase, o gigante da internet deixava claro o impacto que os dispositivos móveis teriam nas suas estratégias e negócios.
Mas o impacto que o mobile trouxe, logicamente, não afetou apenas o Google. O comportamento das pessoas vem se modificando a medida que os dispositivos móveis conectados tornam-se comuns. Uma pesquisa realizada pelo InMobi com mais de 15 mil usuários de dispositivos móveis no mundo, mostra um cenário irreversível: 75% dos entrevistados conhecem um novo produto ou serviço por meio de anúncios mobile, e 59% afirmaram que se sentem tão confortáveis com esses anúncios quanto com os comerciais de tv.
E, se o comportamento do consumidor se altera, as marcas devem repensar suas estratégias para continuarem relevantes correto? Deveria ser, mas facilmente percebemos que de maneira geral, muitas marcas não possuem sequer uma presença digital consolidada, tão pouco uma estratégia consistente para relacionar com esse novo consumidor. Estamos falando da “web convencional”, então como as empresas pretendem lidar com esse novo cenário de múltiplas telas?
MERCADO MOBILE NO BRASIL
Em todo mundo, o mercado mobile se movimenta rapidamente e de forma impactante. O Brasil também demonstra um crescimento explosivo, com números robustos e relevantes:
- O país fechou janeiro com mais de 262 milhões de linhas de celulares ativas. Desses, quase 30 milhões que possuem conexão à internet, segundo a Anatel. Em 2013, a expectativa é vender 28 milhões de smartphones (44% do total de celulares);
- Em 2013, esses números devem crescer ainda mais. A IDC estima que o Brasil se torne o 5º maior mercado de smartphone do mundo;
- Durante o ano de 2012 foram vendidas 3,1 milhões de tablets no Brasil. Em 2011 foram comercializados 1,1 milhão de equipamentos. Para o ano de 2013, a IDC espera que sejam vendidos 5,8 milhões de tablets, número que é 89,5% maior do que o apresentado em 2012. Somente no mês de janeiro de 2013 foram vendidas 350 mil unidades;
- Segundo dados da Câmara e-net, o volume de compras por smartphone e tablets equivale a 10% das vendas online em 2012.
DADOS: Revista Proxxima, 47, mar/2013
De posse dos seus dispositivos móveis, o brasileiro baixa músicas, joga, faz buscas na internet, tira fotos, faz vídeos, usa mapas, compara preços (às vezes dentro das lojas físicas – showrooming), faz compras e usa as redes sociais como poucos países no mundo.
REVOLUÇÃO MÓVEL
O smartphone é apenas o inicio dessa “revolução móvel” na vida das pessoas. Os tablets vieram logo em seguida, mas estamos cada vez mais próximos de uma vida de múltiplas telas conectadas: podemos falar de smartTV, e-readers, videogames, wherables (tecnologia de vestir), internet das coisas (objetos conectados) e, não podemos esquecer, dos lançamentos dos gigantes do mercado: Google Glass e Iwatch (Apple). Todos esses novos devices vão continuar evoluindo e transformando a vida dos consumidores e, consequentemente, trazendo novos desafios para as marcas e para os profissionais de marketing.
Samantha Carvalho, sócia-diretora da Queen Mob resumiu, com muita simplicidade, que o MOBILE É PLURAL.
A internet que passa pelo computador é a mesma que passa pelo celular, só que em contextos distintos. Uma audiência é móvel, a outra não. E quando estou em movimento, procuro e preciso de coisas diferentes daquelas que busco quando estou em uma sala com meu notebook ou no desktop do trabalho.
“Quanto tempo você fica online?” Essa pergunta não existe mais. Com o celular, nós somos online e off-line 24h por dia. Ou seja, a comunicação/propaganda moderna precisa ser on e off, integrada, inteligente e móvel.
A discussão atualmente ainda está na base da segunda ou terceira tela, mesmo diante dessa revolução móvel que estamos vivendo.
ETHAN MARCOTTE E O RESPONSIVE WEB DESIGN
Design Responsivo (Responsive Web Design – RWD) é o termo cunhado em 2010 por Ethan Marcotte em seu artigo intitulado “Responsive Web Design” onde o autor citava uma disciplina emergente da arquitetura chamada “arquitetura responsiva” que começou a questionar como espaços físicos podem responder a presença de pessoas passando por eles.
O raciocínio de Marcotte foi colocado de forma bem simples:
“Ao invés de moldar a partir de designs desconectados para um número crescente de dispositivos da web, nós podemos tratá-los como faceta de uma mesma experiência. Nós podemos desenhar para uma ótima experiência visual, mas embutir padrões com base de tecnologias em nosso design para torná-los não apenas flexíveis, porém mais adaptáveis a mídia que os fornece. Em resumo, nós precisamos praticar web design responsivo.”
SIM, MAS E O DESING RESPONSIVO?
Design Responsivo? Tentado simplificar o conceito, o resultado de um projeto de web design responsivo é um site onde todos os elementos das páginas se adaptam com base na largura da tela do navegador. Não existem versões separadas do site para os diversos devices (smartphones, tablets, PCs, e-readers, etc) e seus formatos distintos de telas onde o site está sendo acessado.
Kristina Kledzik, resume de uma forma mais técnica:
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.
O pessoal do Template Monster criou um sensacional infográfico interativo que reúne artigos, e-books, tutoriais, plug-ins e ferramentas e recomendações do Google. Vale muito a pena conferir:
O QUE É E O QUE NÃO É DESING RESPONSIVO
Para ser ainda mais didático, Talita Pagani aponta o que é e o que não é o design responsivo:
Responsive Design é adaptação de páginas web para:
- Diferentes resoluções
- Diferentes orientações de tela
- Distintas plataformas de interação
- Otimização de performance
Responsive Design não é…
- Adaptação de layout considerando apenas dispositivos diferentes
- Apenas layout fluído
- Layout adaptativo
- Miniaturização de um site
Fabricio Teixeira, do blog Arquitetura de Informação, comentou sobre um a participação dele no desenvolvimento de um site para o projeto Google Box utilizando Mobile-First Responsive Design.
A Kristina Kledzik também cita o site da Smashing Magazine, um exemplo interessante de Design Responsivo, contemplando inclusive o formato para o Kindle Fire.
O portal Globo.com já apresenta projetos responsivos desde 2011, indo de encontro ao mito que o design responsivo não atende a portais com muito conteúdo. Porém, recentemente a home retornou a uma versão convencional, oferecendo a opção mobile para acessos do smartphone.
Segundo Bernardo Heynemann, Tech Lead da Globo.com a mudança aconteceu por motivos políticos:
“Nós reestruturamos muitas páginas que sequer tinham versão mobile (responsive ou não) com uma empresa terceira. A home da globo.com entrou nesse pacote para garantir uma experiência coesa.”
(mais detalhes em http://goo.gl/3B3nQ e http://goo.gl/Drc5J)
Porém algumas outras propriedades do Globo.com continuam oferecendo versões responsivas, como o caso do etc. e globo.tv
O site www.mediaqueri.es reúne um enorme volume de exemplos de projetos de desing responsivo, o próprio site é responsivo.
POR QUE O DESIGN RESPONSIVO?
Foco no Usuário
Para Steve Krug, a regra número um na web é simplesmente “não me faça pensar”. Simples, fácil e direto. Essa regra deveria sempre ser levada em consideração em projetos web, partindo do principio que hoje em dia “quase sempre estamos com pressa”, se o site não oferecer uma experiência satisfatória, independente do dispositivo, o usuário vai se sentir frustrado e vai buscar outro site que atenda sua necessidade. Hoje, mais do que nunca, o concorrente está apenas um “clique” de distância.
O artigo The future of User Experience Design, citado por Fabricio Teixeira, traz uma declaração que resume o que devemos buscar nos projetos web:
“Design para múltiplos canais são o presente, mais do que o futuro. Já está aqui. Nós não devemos mais desenhar um website – mas sim uma experiência multicanal que pode ser experimentada em diferentes dispositivos e contextos. Não importa se os usuários chegarão até você pelo navegador, iPhone, iPad ou TV – eles precisam experimentar uma interação impecável com o produto. Interação que está preparada para o device que eles estão usando…”
Marketing de busca
Recomendação do Google no Webmaster Central Blog aponta algumas vantagens do design responsivo para ranqueamento nos mecanismos de busca:
- Ele mantém o seu ambiente de trabalho e conteúdo móvel em uma URL única, que é mais fácil para que os usuários interajam e compartilhem links, permitindo para os algoritmos do Google atribuir as propriedades de indexação para o seu conteúdo.
- Google pode descobrir o seu conteúdo de forma mais eficiente, já que não seria necessário rastrear uma página com os agentes de usuário diferentes Googlebot para recuperar e índice de todo o conteúdo.
Além do que, o Google privilegia conteúdos mobile nas buscas realizadas nos dispositivos móveis, já que o objetivo do buscador é sempre oferecer a melhor experiência para o usuário.
No artigo “O SEO do web design responsivo” de Kristina Kledzik, a autora aponta diversas vantagens do design responsivo para a otimização para os mecanismos de busca.
- Usabilidade – 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. Seu índice de rejeição pode 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 – 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 – seu site com design responsivo terá uma boa classificação em pesquisa móvel, como um site projetado especificamente para dispositivos móveis.
- 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.
DESAFIOS DO DESIGN RESPONSIVO
Sergio Lopes faz um contraponto interessante sobre os desafios que o Design Responsivo traz:
“Trabalhar com flexibilidade e adaptação é bem mais complicado que um site fixo em pixels. As ferramentas de desenho ainda não estão preparadas e os designers gráficos costumam ter dificuldades para criar com responsividade em mente.
O código fica mais complexo também. Há dificuldades para se trabalhar com imagens e vídeos responsivos. É bastante complicado adaptar um site Desktop já existente para ser responsivo.
Apesar de tudo isso, designs responsivos são o futuro. Pelo simples motivo de que a Web é única e criar sites separados para cada categoria de dispositivos é impossível.”
Fica evidente o fato que realizar um projeto que faça uso do design responsivo não é uma tarefa fácil e demanda um novo aprendizado para os diversos profissionais envolvidos. Seja no planejamento, criação ou produção, esse é com certeza um novo e necessário desafio que surge num mundo conectado e dinâmico, onde as marcas têm que se manter relevantes para os clientes, atuais e futuros.
Colaboração de:
Bruno Trindade
Bruno Trindade é profissional de marketing com sólida formação (Formado em Administração e MBAs em Marketing e Comunicação Corporativa) e com mais de 10 anos de experiência.
Sempre atuando com marketing e planejamento em grandes empresas, desenvolvendo trabalhos que exigem conhecimentos em diversas disciplinas de marketing, entre elas: comunicação digital, pesquisa de mercado, marketing de relacionamento, endomarketing, desenvolvimento e lançamento de produtos, etc.
