Design responsivo ou versão mobile: qual é a melhor opção?

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!

  • Facebook
  • Twitter
  • Whatsapp

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

Antes de mais nada, importante: design responsivo 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.

Vamos manter contato?

Assine a newsletter do blog preenchendo o formulário!
Se precisar de algo, solicite um orçamento. É sem compromisso!
Se não quiser nada disso, sem problemas! Continue lendo o post abaixo :D

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!

Se você quer saber qual a melhor solução para seu projeto, entre em contato.

Design responsivo ou adaptativo

Saiba mais: o que é design responsivo ou adaptativo.

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 que não têm alguma funcionalidade que só pode ser utilizada em telas grandes.

O conteúdo no design responsivo é mais fácil de ser trabalhado para se adaptar a diferentes resoluções, sendo assim nenhuma informação será perdida ou limitada.

É possível ter um site extremamente leve com design responsivo utilizando o conceito mobile first, ou seja: planejando seu site primeiro para telas menores e depois para telas maiores.

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”.
  • Aplicativo: Em vez de um site mesmo, você pode ter um aplicativo — ou transformar o próprio site em um app. Aí as possibilidades são (quase) infinitas!
  • 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.
    Fora que o Google sempre prefere que o site apresente a mesma versão de conteúdo para o usuário tanto em dispositivos móveis quanto em desktops. Ou seja, você pode acabar perdendo posições se utilizar uma versão mobile com conteúdo diferente.
  • 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 sites que têm alguns sistemas ou funcionalidades específicas que não podem funcionar da mesma forma em desktops e smartphones.

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, mais de metade de acessos a internet no mundo vêm de dispositivos móveis (tablets e smartphones):

acessos mobile desktop

Dados de 2017 a 2018

Se você não vê potencial nisso, acredite: já é uma ameaça para sua empresa.

Em um piscar de olhos essa porcentagem vai aumentar ainda mais 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 vem optando pelo “mobile-first”, que é planejar primeiro para smartphones e depois telas maiores (ou seja, tablets, notebooks e desktops), algo que é recomendado pelo Google, inclusive — outros já preferem trabalhar a maior resolução primeiro.

O detalhe é que não tem muito a ver com a ordem de trabalho. Eu prefiro trabalhar primeiro a resolução maior, mas é porque eu já planejo o projeto pensando na maior simplificação possível. Mobile first, de certa forma, não tem relação com você começar a desenhar primeiro as telas de smartphones — e sim priorizar telas menores.

O importante é ficar amigável e bem otimizado. Dessa forma é possível até mesmo começar com uma resolução intermediária que não vai ter problema!

Design 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 pode — e deve — 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! Se você ainda não tem um site assim, fale comigo!

  • Facebook
  • Twitter
  • Whatsapp

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

Leia também

Confira artigos relacionados ao post Design responsivo ou versão mobile: qual é a melhor opção?.

Comente!

Espaço reservado apenas para comentários sobre o post. Então, se você deseja um orçamento, por favor, entre em contato para que possamos conversar.

Quem é Fabio Lobo?

fabio lobo

Sou eu! Quer saber ainda mais sobre mim?

Bom, a maioria dos trabalhos que faço — na área de web design e desenvolvimento front-end — é com WordPress, com foco em usabilidade, facilidade e performance (tudo isso com design responsivo, é claro!). Também sou fundador de outros projetos, como a WOWF e a FicaOn.

Quer saber mais sobre esse tal de Fabio Lobo? Veja meu currículo ou siga-me nas redes sociais acima. Ah! Você também pode acessar meu blog, que é focado em web design e desenvolvimento.