Qual abordagem é melhor para criar a versão mobile de um site? Entre todas as opções, as principais são os sites dedicados (comumente precedidos pela letra “m” ou pela palavra “mobile” na sua URL) ou os sites responsivos. Cada uma possui prós e contras. Ambas podem funcionar para a maioria dos projetos de sites mobile. Para determinar qual abordagem será melhor, é preciso entender as vantagens e as desvantagens de cada uma dessas opções.
SITE RESPONSIVO
O site responsivo não chega a ser uma estratégia mobile. Na verdade, é uma página web que serve para uma variedade de opções de visualização e de devices. Os sites criados a partir de uma abordagem responsiva se ajustam aos ambientes dos usuários, se adaptando à largura dos browsers em diferentes dispositivos a partir de um design único e de uma única URL. Através dessa abordagem, o conteúdo e o layout podem ser utilizados em diferentes plataformas, tamanhos e orientações de tela. Através de um mesmo arquivo básico de HTML e CSS3, as informações podem ser visualizadas em computadores desktop, tablets, smartphones ou TVs conectadas.
Vantagens do site responsivo:
Ao invés de construir 2 sites – um para os usuários de dispositivos móveis e outro para usuários de desktop – o design responsivo permite que você tenha apenas 1 site que pode ser visualizado tanto em um computador quanto em um smartphone. Dessa forma, quando o usuário acessa um site responsivo, o dispositivo determina qual a melhor maneira de exibir a página.
Além de se ajustar à diferentes tamanhos de tela, o site responsivo também tem a vantagem de ser consistente. Como o conteúdo básico do site é sempre o mesmo, independente da plataforma utilizada, os usuários têm uma experiência mais uniforme (pois ela é similar entre diferentes dispositivos). Dessa forma, as pessoas não precisam aprender a usar o site novamente, quando ela vai de um dispositivo para outro.
Outra vantagem é o fato do site responsivo possuir apenas uma URL, o que a torna simples e mais fácil de compartilhar ou linkar. Com o design responsivo, sempre que alguém compartilhar um link, não importa como (ou através de qual dispositivo) ele chegou até aquele site – o usuário sempre vê o site que for melhor para o dispositivo. Essa URL única também é mais fácil para rastrear através de ferramentas de analytics, além de não ser necessário se preocupar com redirecionamentos para outros dispositivos.
O site responsivo terá sempre o mesmo look & feel, independente do dispositivo onde será visualizado. Utilizar um branding consistente é muito importante para diversas empresas e isso pode ser muito bem resolvido pelos sites responsivos, que só oferecem uma opção de layout, um tema, uma interface para todos os dispositivos. No caso dos sites dedicados, as limitações dessa abordagem obrigam que a interface seja projetada de uma maneira diferente para cada dispositivo.
Através do design responsivo, é possível manter o site “à prova de futuro”. Ou seja, quando um novo dispositivo surgir, será preciso apenas adicionar uma nova folha de estilo CSS e algumas linhas de código e pronto!
Desvantagens do site responsivo:
Os sites responsivos são mais lentos. Dependendo da forma como são construídos, podem ser muito demorados para carregar. Suas páginas possuem o mesmo (ou até maiores) tamanho de arquivos do que os computadores desktop. Os resultados para o tamanho do arquivo da página e para o tempo de carregamento são praticamente idênticos em diferentes dispositivos e resoluções.
Na prática, isso significa que um site responsivo, que é visualizado em uma tela menor – com menos conteúdo e/ou imagens menores, não irá carregar mais rapidamente. Você pode falar “isso não é um grande problema, pois a internet móvel é muito rápida hoje em dia”. É verdade, as redes móveis estão ficando cada vez mais rápidas. Mesmo assim, a velocidade da internet móvel ainda está muito abaixo das conexões banda-larga dos computadores desktop. Navegar na internet usando um computador desktop é quase 30% mais rápido do que em um smartphone. De acordo com a coleção de artigos do Google, chamada Make your website work across multiple devices, os usuários de dispositivos móveis esperam uma experiência tão boa quanto nos seus computadores desktop, por isso a velocidade de conexão importa – os usuários não irão esperar um tempo longo de carregamento (eles são capazes de esperar entre 6 e 10 segundos para uma página carregar. Depois disso, abandonam essa página). O atraso de 1 segundo no tempo de resposta de uma página pode resultar em 7% de diminuição das taxas de conversão. De acordo com o infográfico How loading time affects your bottom line, um site de e-commerce com 1 segundo de atraso no carregamento das suas páginas mobile, por exemplo, pode perder US$ 2,5 milhões por ano.
O grande problema é que a conexao 3G aqui no Brasil é bem ruim! Carregar um site desktop no mobile, ocultando elementos e etc., pode ser prejudicial. Imagina só, um site com um destaque de 3 banners (vamos colocar ai uma média de 150 Kb por banner) sendo carregado no celular. Meio complicado, né? (depoimento de um programador com experiência no desenvolvimento de sites responsivos e dedicados).
Vários desenvolvedores (arquitetos de informação, designers de interfaces e programadores) afirmam que é possível fazer o site responsivo funcionar muito mais rápido na tela dos dispositivos móveis. Essa otimizacão pode ser feita através de imagens menores e scripts de carregamento de páginas. Mas é preciso refletir sobre a performance dessas técnicas de otimização em comparação aos sites dedicados. Não dá para negar o fato de que os sites responsivos são muito mais complexos para serem implementados, porque tentam oferecer muitas experiências de visualização sem, necessariamente, ajustar essa experiência para um dispositivo específico (ou uma modalidade de dispositivos). Além disso, os browsers mobile precisam carregar arquivos HTML pesados, enquanto o site precisa, cuidadosamente, evitar alguns scripts específicos, ler certos CSS e baixar grandes imagens. Uma implementação perfeita é possível, mas a tentativa requer scripts ou códigos e, consequentemente, complexidade. Um site responsivo projetado para obter a melhor performance não será tão rápido quanto um site dedicado.
Toda essa complexidade faz com que o projeto de um site responsivo necessite de mais planejamento e preparação. Isso pode exigir muito tempo desde a concepção até o lançamento. Um nível maior de complexidade também exige mais gastos com recursos. Apesar do fluxo de trabalho a partir do design responsivo ainda estar evoluindo e, gradualmente, se tornando cada vez mais ágil, hoje é quase impossível completar o projeto de um site responsivo sem aumentar os recursos a serem gastos.
Quando alguém visita um site, o dispositivo utilizado para isso determina completamente como será a sua experiência. Entre um dispositivo e outro, algumas funcionalidades podem ser removidas, assim como side-bars e imagens. Isso é feito com o objetivo de oferecer para o usuário uma experiência ideal de navegação. Mas a busca dessa experiência ideal através de sites responsivos pode resultar em problemas de usabilidade. Como os usuários de smartphones desejam cumprir tarefas diferentes daquelas realizadas em computadores desktop, talvez eles estejam mais acostumados com as interfaces dos sites dedicados. Além disso, as diferenças entre um usuário de um computador desktop e o usuário de um dispositivo móvel não se limitam ao tamanho da tela. Os sites responsivos são mais restritos quanto ao uso ou reconhecimento de funcionalidades nativas dos dispositivos móveis, como geolocalização, potencial do sistema operacional, conectividade, limitações do dispositivo e necessidades dos usuários. Existem várias maneiras de projetar uma interface ideal, criando experiências para vários layouts responsivos. Mas há limitaçoes claras, se comparadas a um site dedicado.
Como o conteúdo não é totalmente otimizado para dispositivos móveis, às vezes, os sites responsivos apresentam grandes desafios para a navegação, tanto do ponto de vista dos desenvolvedores (arquitetos de informação, designers de interfaces e programadores) quanto do ponto de vista dos usuários (que terão grandes expectativas em relação à interface).
Talvez a maior desvantagem de todas seja a conclusão apresentada no artigo The state of responsive web design, publicado na Smashing Magazine. Segundo a sua autora, Stéphanie Walter, ainda existem muitas questões ou problemas não resolvidos.
SITE DEDICADO
Um site dedicado só pode ser visualizado em dispositivos móveis, pois é uma versão diferente do site que foi construído para computadores desktop (conhecido como versão clássica). Quando o browser detecta um smartphone, um redirecionamento muda o site da versão clássica para a dedicada, entregando uma versão menor do site (tanto em termos de tamanho de conteúdo quanto em termos de peso de arquivos), que oferece uma experiência melhor em telas pequenas e é otimizado para carregar rapidamente. A forma mais comum de implementação de um site dedicado é realizada através da adição de um prefixo “m” ou “mobile” no domínio do site (exemplo: “seusite.com” se transforma em “m.seusite.com” ou “mobile.seusite.com”), redirecionando os usuários para a versão mobile desse site.
Vantagens do site dedicado:
Um típico site “m .com” é simples! Geralmente, esse tipo de site possui uma pequena quantidade de arquivos HTML e um número limitado de scripts, CSS e imagens, além de ser construído intencionalmente para uma experiência de visualização em dispositivos móveis com pequenas telas sensíveis ao toque. O site é projetado tendo apenas o touch-screen em mente, já que os usuários dos dispositivos móveis não clicam (eles só tocam). Além disso, como os sites dedicados são construídos ao redor da navegação, isso os torna muito mais fáceis de usar e entender.
O conteúdo de um site dedicado é totalmente adaptado, ou seja, é separado do conteúdo para a versão desktop. Isso resulta em uma navegação customizada para os usuários de smartphones. Portanto, no caso de sites que possuem grandes imagens, badges e arquivos JS – que poderiam impedir uma ótima experiência de uso em dispositivos móveis – é melhor optar por um site dedicado. Essa versão é mais fácil de implementar, manter e atualizar. Além disso, é possível projetar toda a experiência de uma maneira que seja possível mostrar para o usuário apenas o conteúdo necessário, escondendo tudo o que for supérfluo – ou seja, qualquer coisa que possa ser administrada através de um CMS, como documentos, imagens extras e elementos que são carregados através de CSS ou JS.
Os sites mobile dedicados, geralmente, são mais rápidos – muito rápidos! Essa é a razão número 1 porque eles são usados. Outra vantagem do site mobile dedicado é o fato de que o peso da página é consideravelmente menor, fazendo com que o tempo de carregamento fique dois terços abaixo do tempo das versões desktop e, consequentemente, resultando em uma experiência geral de uso muito melhor. Logo, se algum tipo de economia (tempo, custo, etc.) for necessária, é melhor optar por um site dedicado. Através de algumas comparações rudimentares é possível perceber que sites dedicados possuem tempos de carregamento menores do que os sites responsivos.
O desenvolvimento é rápido e muito barato. Pelo fato dos sites dedicados serem versões simplificadas de um site desktop completo, eles podem ser construídos e lançados em menos tempo, com custos baixos. E por falar em tempo de desenvolvimento rápido e simples, há uma série de ferramentas que lêem os feeds de RSS dos sites desktop e os convertem em sites dedicados, otimizando ainda mais o processo de construção e o lançamento. Entre todas essas ferramentas, a Onbile, por exemplo, foi a que melhor me serviu. Através dela, eu demorei cerca de 10 minutos para construir a versão dedicada de um site desktop.
Um site dedicado também pode ser uma grande vantagem quando um componente é necessário para o projeto de uma interface mobile. Funcionalidades que são específicas dos smartphones – como ligações telefônicas com apenas um toque ou geolocalização – também podem ser implementadas nesse tipo de site.
Desvantagens do site dedicado:
Os sites dedicados necessitam de múltiplas URLs (no mínimo 2 – uma para a versão desktop e outra para a versão mobile). Talvez isso tenha algumas implicações para SEO. Como a maior parte do tráfego da web é realizada através de mecanismos de busca como o Google ou o Bing, para serem bem “rankeados”, os sites precisam ser bem otimizados para esses mecanismos de busca. Mas no caso dos sites dedicados, será necessário fazer 2 campanhas separadas de SEO, uma para cada versão do site. Isso irá custar mais dinheiro e exigir mais tempo, dividindo o foco e prejudicando as chances de ambos os sites terem sucesso.
Os múltiplos domínios/URLs também resultam em redirecionamentos, pois os usuários de dispositivos móveis serão redirecionados para a versão otimizada para mobile e vice-versa, adicionando algum tempo de carregamento à página. Além disso, também há a possibilidade de erros entre diferentes dispositivos.
O compartilhamento de conteúdo nas redes sociais também se torna um problema. Se você estiver navegando através do seu iPhone, por exemplo, e compartilhar um link com alguém que está navegando através de um computador desktop, essa pessoa irá visualizar a versão mobile do site ao invés da versão completa para desktop.
A criação de um site dedicado (que é separado do site desktop) requer que o conteúdo seja substituído, modificado e atualizado em alguns locais diferentes. Essa “bifurcação” do conteúdo pode ser bastante difícil, pois existirão 2 diferentes conjuntos de conteúdo para administrar e manter – ou seja, trabalho extra! Na medida que mais dispositivos móveis aparecem, os arquitetos de informação, os designers de interfaces e os programadores terão que estar atentos para o aumento da quantidade de trabalho. Um site mobile que parece ótimo em um iPhone pode ficar terrível em um novo dispositivo – exigindo atualização, reprogramação ou a construção de uma 3ª versão desse site.
A versão dedicada, geralmente, é diferente (tanto em termos visuais quanto em termos funcionais) da versão completa (desktop) do site. Isso, necessariamente, não é algo ruim ou errado, mas é preciso investigar se os usuários esperam por uma experiência universal e consistente (e o quanto eles podem se sentir afetados, caso essa experiência uniforme não seja entregue).
CONCLUSÃO
Como cada caso é um caso, para escolher entre o site dedicado ou o site responsivo, antes, é preciso responder a seguinte questão: “o que você pretende realizar com o seu site mobile?”. A resposta para a pergunta irá dizer qual opção é melhor para determinado tipo de necessidade. Por exemplo:
- Se você necessita de uma estratégia mobile-first: faça um site dedicado.
- Se você necessita de curto tempo entre concepção e lançamento: faça um site dedicado.
- Se você necessita de uma versão mobile para um site que já existe: faça um site dedicado.
- Se você necessita de baixo custo de design e desenvolvimento: faça um site dedicado.
- Se você necessita de melhor SEO: faça um site responsivo (apesar do site dedicado não ficar muito atrás).
- Se você necessita da criação de um site novo ou fácil atualização de um site existente: faça um site responsivo.
- Se você necessita melhorar suas conversões e códigos de redirecionamento: faça um site responsivo.
- Se você necessita de reconhecimento visual e reforço do branding: faça um site responsivo.
- Se você necessita de uma URL única: faça um site responsivo.
Além de responder a pergunta “o que você pretende realizar com o seu site mobile?”, também há outros jeitos de tomar uma decisão. Uma colega de trabalho, por exemplo, me mostrou uma abordagem conhecida como The gradient chart. É uma forma simples que, na hora de construir um site mobile, pode ajudar a decidir pela versão responsiva ou pela versão dedicada. Funciona da seguinte maneira:
- Primeiro, você faz um levantamento das tarefas que o usuário terá que realizar no dispositivo “Nº 1” (um computador desktop, por exemplo).
- Depois, você repete o mesmo procedimento para o dispositivo “Nº 2” (um smartphone, por exemplo).
- Em seguida, coloque essas tarefas em uma lista, indicando a ordem de prioridade em cada dispositivo.
- No final, coloque as listas lado a lado e utilize linhas para conectar as tarefas do dispositivo “Nº 1” com as tarefas que são idênticas no dispositivo “Nº 2”.
Se a linhas de conexão mostrarem que as tarefas possuem, mais ou menos, a mesma prioridade nos 2 dispositivos, então a versão responsiva é o melhor caminho. Mas se a conexão entre as linhas mostrar que as prioridades das tarefas em cada dispositivo são bastante diferentes, então a versão dedicada é o melhor caminho. O resultado fica parecido com o da figura abaixo:
Já reparou que manter essa discussão em torno dos sites responsivos versus sites dedicados não é tão simples como parece, né? No futuro, espero publicar outros posts sobre esse assunto e, quem sabe, até lá esteja mais fácil traçar uma conclusão definitiva… Ou, talvez, a conclusão seja a simples constatação de que não existe uma “receita de bolo” e cada caso irá demandar uma solução específica (como tantas outras coisas na área de UX e IxD).
Pingback:Website Mobile X Responsivo, qual deles escolher? – Parte 2 | TIando