Responsivo ou versão mobile?

Qual é a melhor solução: design responsivo ou versão mobile? Seu site precisa ser acessível em tablets e smartphones – saiba qual é a opção ideal!

Recentemente publiquei dois artigos aqui no blog explicando o que é design responsivo e o que é versão mobile – dois textos simples e até parecidos, vale a leitura se você ainda tem dúvidas. Agora, pra complementar, quero tentar solucionar outra dúvida: responsivo ou versão mobile: qual é a melhor solução?

» Siga-me no twitter e assine a newsletter para ler mais novidades!

Antes de mais nada, importante: design responsivo (design responsivo, também chamado de “design adaptativo” – termos em inglês: responsive design e adaptive design) não é melhor que versão mobile e vice-versa. Se você está entre responsivo ou versão mobile, terá que analisar vários pontos para saber qual será a melhor solução para o seu caso – ou seja, cada caso em específico terá uma das duas soluções como ideal.

Abaixo fiz um resumão entre os dois, listando 3 vantagens e 3 desvantagens de cada. São pontos que considero essenciais – se você achar que algum outro ponto é válido, sinta-se à vontade para deixar seu comentário!

Design responsivo

Saiba mais: o que é design responsivo.

design responsivo

Sim, meu site é responsivo! :D

Vantagens:

  • Um só site, um só ambiente: Um site responsivo é flexível, “cabendo” em diferentes resoluções. Isso não significa que você terá que atualizar um site diferente para cada resolução e/ou aparelho: você faz tudo em um ambiente só!
  • O usuário vê o site completo: Por ser flexível e se adaptar a diferentes formatos de tela, o conteúdo vai se espalhando e se encaixando para se organizar. Quando o espaço é muito pequeno, alguns itens mudam de formato – é o caso de menus, que viram um botão em smartphones e só exibem seus itens quando o usuário clica nesse botão, abrindo o menu.
  • Mais barato e rápido: Por ser um site só, você investe em um projeto só. Simples assim!

Desvantagens:

  • Pode ficar muito pesado em dispositivos móveis: Se seu site for muito grande, ele naturalmente já é mais pesado que o normal. Mas acessá-lo através de uma conexão banda larga já ajuda bastante, nem vai parecer que ele é pesadão… agora, imagina acessá-lo de uma conexão 3G como a nossa. Ou seja, se seu site é pesado um usuário precisa acessá-lo na rua, de seu smartphone, provavelmente ele não vai conseguir.
  • Pode limitar a “versão desktop”: Pensando no ponto acima, você pode acabar fazendo um site limitado para que consigam acessar seu site em uma conexão 3G*. Sendo assim, a versão desktop (ou seja, para computadores de mesa) pode parecer incompleta.
  • Pode prejudicar a publicidade: Se você tem um banner 728×90 no topo de seu site, ele não irá aparecer em smartphones (já que a largura média de uma tela de smartphone é basicamente a metade dessa medida de banner). Você pode substituir o banner quando a resolução de tela começar a impossibilitar o uso desse 728×90, mas ainda assim o código desse banner estará lá, sendo lido pelo navegador, deixando seu site mais pesado. Fora que se você vende um espaço de banner no topo da lateral de seu site, em smartphones ele não terá o mesmo destaque, já que a lateral provavelmente irá aparecer lá no final da tela.

*Só pra constar, sou totalmente a favor de fazer um site leve e acessível até mesmo de uma conexão discada, mas o ponto aqui é outro. Se seu site é um portal de notícias como o UOL, não tem jeito: ele vai ser pesado. Não só pelos milhares de anúncios, mas pela quantidade de conteúdo, seções e colunas que são atualizadas a cada hora, basicamente.

Conclusão:

Entre responsivo ou versão mobile, o responsivo é bom para sites institucionais e blogs. O conteúdo é mais fácil de ser trabalhado para se adaptar a diferentes resoluções, sendo assim nenhuma informação será perdida ou limitada.

Versão mobile

Saiba mais: o que é versão mobile.

versão mobile

Versão “original” e versão mobile da loja online Ponto Frio.

Vantagens:

  • Conteúdo específico para dispositivos móveis: De certa forma, você pode segmentar seu conteúdo para quem acessa seu site de dispositivos móveis, ou até mesmo fazer “integrações interativas”, como possibilitar que o usuário ligue para você com apenas um toque na tela. Se você tem uma loja online, poderá identificar o aparelho do usuário e exibir destaques de cases para seu smartphone, ou outras utilidades como fones de ouvido.
  • Publicidade específica: Por que não segmentar também a publicidade? O último exemplo que citei acima também serve em banners, porque se você utiliza sistemas de afiliados como o Google Adsense, ele irá identificar que o usuário está acessando seu site de um smartphone e exibir formatos e anúncios diferentes. Além disso, você pode vender espaços publicitários específicos para a versão mobile de seu site.
  • Mais liberdade: Como o site tem uma versão só pra desktop e outra só pra dispositivos móveis, você não precisa se preocupar em fazer uma imagem, por exemplo, que seja legível tanto em um monitor de 27 polegadas quanto numa tela de iPhone 4 – basta fazer uma que fique ideal pra cada tipo de tela. Além disso, no próprio design do site há mais liberdade, pois uma versão não depende da outra pra ficar bem diagramada e acessível.

Desvantagens:

  • É mais caro: O site “oficial” é um e o mobile é outro, logo são dois projetos diferentes. E pode ser que você tenha que atualizar dois sites – ainda é comum ver um ambiente de atualização diferente para cada versão do site. Alguns desenvolvedores fazem todo o processo de atualização em um só ambiente, o que é bem melhor (e deve ser feito com cuidado para não ficar confuso e pesado).
  • Pode ser que o Google não goste: Boa parte dos sites que têm versão mobile trabalham essa versão em um subdomínio (exemplo: m.enderecodosite.com.br). O Google vê cada versão como um site diferente, e se os conteúdos são iguais, ele vê isso como conteúdo duplicado.
  • Pode ser que seu público não goste: Se seu público é acostumado a utilizar algumas funcionalidades da versão desktop de seu site e elas não estão disponíveis na versão mobile, isso será um problema. Muita gente vai preferir acessar a versão desktop do smartphone, o que também não é legal.

Conclusão:

Entre responsivo ou versão mobile, a versão mobile é boa para portais e lojas online. Como há muitas divisões e conteúdos, o recomendável é que seja feito um trabalho específico para resoluções menores (e conexões mais lentas).

Por que ter um site responsivo ou versão mobile?

Segundo dados do StatCounter, cerca de 38% de acessos a internet no mundo vêm de dispositivos móveis (tablets e smartphones):

acessos no mundo

Dados de todo o ano de 2014.

No Brasil o número é de 28%, um pouco inferior… mas também está crescendo:

acessos no brasil

Dados de todo o ano de 2014.

Se você não vê potencial nisso, acredite: em breve será uma ameaça para sua empresa. Em um piscar de olhos essa porcentagem ultrapassa a metade e, se seu site não estiver preparado, certamente seus números começarão a cair (se já não começaram!).

Quem vem primeiro: O smartphone ou o desktop?

Optando por responsivo ou versão mobile, sempre uma resolução é trabalhada primeiro. Muita gente opta pelo “mobile-first”, que é trabalhar primeiro para smartphones e ir aumentando as resoluções (ou seja, para tablets, notebooks e desktops), outros já preferem trabalhar a maior resolução primeiro.

Eu prefiro trabalhar primeiro a resolução maior, mas nunca tentei trabalhar a resolução menor primeiro. Já li muito a respeito e a meu ver, sinceramente, dá no mesmo! O importante é ficar amigável e bem otimizado. Dessa forma você pode até começar com uma resolução intermediária que não vai ter problema!

Responsivo ou versão mobile?

dispositivos móveis

Demonstraçãozinha da variedade de telas que temos por aí. (Foto: Brad Frost)

Espero que você tenha encontrado qual é a melhor opção para seu caso! E, repito: sinta-se à vontade para comentar caso tenha mais sugestões ou dúvidas (ou até mesmo discorde de algo, por que não?).

Meu site é responsivo, por exemplo. Optei pelo design responsivo pois o conteúdo de meu site poderia – e deveria – ser exibido da mesma forma em diferentes resoluções. Em meu portfolio você poderá ver alguns casos de sites e blogs responsivos, também.

Seja responsivo ou versão mobile, seu site precisa ser acessível em dispositivos móveis!