Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #1
24 de maio de 2013
As mídias sociais e o ambiente mobile
Mobile Learning: as tecnologias móveis e a educação
30 de julho de 2014

Ainda não está por dentro do que é Design Responsivo? Confira a primeira parte deste post em Porque só se fala em Design Responsivo (e porque você deveria ouvir) #1.

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.

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

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:

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

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

 Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

 

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.

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

 

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.

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

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.”

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

(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.

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

 

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.

Porque só se fala em Design Responsivo (e porque você deveria ouvir) #2 (Mobile )

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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *