Os 8 erros comuns que podem acabar com seu site mobile

Não é de hoje que quase todo mundo sabe da importância de ter uma versão mobile do seu site, mas o que parece que quase ninguém sabe, é que há uma série de cuidados que não são tomados e consequentemente, erros comuns são cometidos, que arruínam o resultado final.

Sendo assim, a proposta desse conteúdo é destacar quais aspectos são essenciais e precisam ser considerados no desenvolvimento da versão mobile do seu site.

O que é versão mobile do site?

Não pule esse tópico!

É certo que todo mundo acredita que sabe o que é versão mobile de um site. A questão não é essa…

Como costumamos fazer, trata-se de uma pergunta retórica, cujo propósito é fundamental para que o trabalho seja feito como se deve.

A palavra-chave aqui, é VERSÃO.

Há diferentes significados para versão, mas no contexto que nos interessa, é o modo alternativo ou diferente do site.

É diferente justamente porque o dispositivo no qual o site é acessado e exibido, tem diferenças importantes em vários aspectos e todos eles precisam ser levados em consideração.

1. Conectividade

É comum que sempre quando possível, que as pessoas conectem seus celulares no Wi-Fi do trabalho ou de casa, ou ainda em alguma rede de Wi-Fi público disponível nas imediações, seja para economizar seus dados móveis, seja para ter velocidade de acesso superiores a que o seu provedor entrega.

Mas não é sempre que isso é possível e não é todo mundo que já tem o 5G. Na verdade, ainda é a minoria.

Logo, essa é a primeira diferença importante que a versão para dispositivos móveis precisa levar em conta.

2. Telas

A maioria das telas, especialmente dos aparelhos intermediários e avançados, têm resoluções superiores as mais comuns disponíveis em desktops e notebooks, ao mesmo tempo que tem dimensões bem inferiores.

Mas o que isso significa em termos de visualização? Como cada tipo de conteúdo é exibido? Como isso afeta a experiência do usuário?

3. Horizontal vs vertical

Se no desktop a orientação da tela que prevalece, é a horizontal, ainda que também seja possível no smartphone, o padrão de uso mais comum, é vertical.

Já pensou nos impactos que isso tem no layout e na navegação? Ou como os diferentes elementos de cada página se comportam nos dois cenários?

4. Recursos

Aparelhos com processadores bons, velozes e que suportam elevadas cargas de trabalho, bem como memória RAM em abundância, estão disponíveis em uma ampla variedade de modelos e marcas.

Porém, tal como a conectividade, essa não é a situação de todo mundo.

5. Condições de uso

Se quem acessa por meio de um desktop ou notebook, costuma estar sentado, ter o aparelho em uma mesa e dispor de um mouse, quem o faz usando um celular, pode estar em meio a um deslocamento, apertado em meio a outras pessoas e sendo chacoalhado dentro de um ônibus, caminhando, andando de bicicleta ou dirigindo (embora não devesse).

Enfim, em condições de uso bem diferentes.

Em todas essas situações hipotéticas, mas altamente prováveis e tendo apenas uma mão para acessar e navegar, sem dúvida que algumas situações podem ser bem desafiadoras.

6. Outros conteúdos

Em parte pelas circunstâncias do item imediatamente acima, em parte por outras, é comum que os conteúdos que alguém que acessa pelo smartphone, sejam outros.

Significa dizer que o que “faz sucesso” no desktop, pode não fazer o mesmo no mobile. O inverso também é verdade.

7. Ambiente e padrões

Em teoria, a Internet vem evoluindo em busca de padronização, o que deveria se traduzir em todo mundo sendo capaz de acessar qualquer coisa por qualquer navegador e sistema operacional. Sabemos que na prática, essa teoria não se confirma.

Apesar das críticas aos seus muitos defeitos, temos que reconhecer que o Windows lida razoavelmente bem com os mais diferentes e populares formatos e quando não, a solução costuma ser acessível.

Mas e no Android ou no iOS? Também sabemos que pode ser um desafio, não é mesmo?

As 7 diferenças acima, apesar de não serem as únicas, já seriam justificativas bastante boas para dedicar atenção e cuidados a uma versão mobile. Mas há uma oitava que não pode ser ignorada.

Desde 2015 o Google vem dedicando especial atenção em entregar aos usuários, os resultados mais relevantes e precisos relativos aos sites que disponham versões mobile ou em apps, inicialmente pelo update que foi nomeado como Mobilegeddon, mas que foi apenas o ponto de partida.

Basicamente o algoritmo pretendia averiguar os sites que são bem orientados a usabilidade em dispositivos móveis, dado os crescentes números de buscas feitas utilizando-os.

Tanto que o próprio Google tratou de enfatizar que os eventuais problemas apresentados por tais sites, constariam nas Google Search Console e que eles precisariam ser resolvidos, se o site em questão se preocupasse em ser bem avaliado. E quem não se preocupa?

Em outras palavras, era um alerta que sites não compatíveis com dispositivos móveis acabariam sendo rebaixados nos resultados de pesquisa para dispositivos móveis.

Com tudo isso em mente, vamos ao que deve ter trazido você aqui…

8 erros comuns em sites mobile

Como pretendemos que fique claro a medida que você conhece os problemas mais comuns em sites mobile, haverá situações que apenas chamar o desenvolvedor responsável e pedir que resolva, não é o caminho.

Alguns dos erros não são apenas uma questão de alterar a programação, trocar um plugin ou criar um recurso novo. Podem significar grandes e importantes alterações no projeto.

Se não forem encaradas com a seriedade que merecem, corre-se o risco de ter apenas uma colcha de retalhos e mesmo assim, não funcionar como deveria.

1. “Adaptar” um site feito para desktop

Essa é a realidade de muitos sites que encontramos ao navegar por aí. Em outras palavras, tinha-se um site inicialmente projetado e concebido para desktop, muitas vezes responsivo e que passou por adaptações para uma versão mobile.

Há até uma variedade de plugins para WordPress e para outros CMSs, que prometem realizar o trabalho muito bem.

Esse não é o problema. A questão é que na “adaptação”, nem tudo funciona como deveria. Em muitos casos, pouca coisa funciona bem.

As razões são muitas. Ao citarmos apenas as mais comuns, fica claro porquê:

• Acomodar conteúdos que foram desenhados para exibição na horizontal, na vertical, geralmente compromete a visualização;

• Elementos clicáveis também costumam ter dimensões inadequadas ao toque dos dedos;

• Determinados formatos de conteúdos que são comuns no acesso via desktop, podem não ter suporte no mobile, senão por intermédio da instalação de algum app;

• Alguns layouts / designs quando convertidos para mobile, não produzem um bom resultado visual;

• A experiência de navegação é essencialmente diferente.

A realidade é que por problemas como esses, que se popularizou o conceito mobile first e que resumidamente consiste em priorizar o acesso por dispositivos móveis, tanto porque eles representam hoje a maioria dos acessos, como porque é mais aceitável e mais simples também, fazer os ajustes para uma versão desktop, partindo de uma mobile.

2. Desempenho do site

O bom desempenho do site do ponto de vista do visitante, é sinônimo de carregamento rápido da página.

Tecnicamente falando, depende de boa conectividade e do dispositivo ter recursos suficientes (processamento e memória). E basta que um deles falte, para que o desempenho seja comprometido.

Tenha em mente que qualquer coisa acima de 2 ou 3 segundos, é uma eternidade. O usuário não hesitará, nem terá constrangimento algum em retornar para a página de resultados da busca e entrar nas outras opções.

Portanto, a programação usada e os recursos disponíveis, devem privilegiar o melhor desempenho possível.

3. O consumo do conteúdo

Que experiência seu site mobile oferece aos visitantes, especialmente em condições adversas? Sim, porque ele não está sempre confortavelmente sentado e equipado com um mouse.

A fonte escolhida é boa para leitura? Está na cor adequada e no melhor contraste com o fundo? E o tamanho da fonte? E os espaçamentos e o tamanho dos parágrafos? Há muitas rolagens de tela?

Não raramente nos deparamos com textos que são impossíveis de serem lidos, porque as escolhas acima são péssimas e algumas vezes apenas consideram o aspecto estético e ignoram o funcional.

O mesmo deve valer para outros tipos de conteúdos, como infográficos, por exemplo. Há os exagerados e que não cabem na tela, como há os minúsculos e que exigem serem ampliados, isso quando permitem.

Essa sucessão de problemas vai minando a paciência do visitante.

4. O conteúdo

Para além da maneira e das circunstâncias em que o conteúdo é consumido, há ele próprio.

Já notou a diferença dos resultados exibidos no Wikipedia quando o acesso é feito via desktop e quando é feito via mobile?

Há essencialmente duas diferenças que precisam ser consideradas:

• Funcionalidade – devido a alguns dos aspectos que já vimos, como a forma que o conteúdo é consumido, características da tela, conectividade e recursos, o conteúdo precisa ser funcional e acessível;

• Propósito – o propósito ou razão para o acesso, costuma ser outro. No desktop o usuário pode querer conhecer mais sobre a loja e seus produtos. No celular, a intenção pode ser como chegar nela ou talvez um canal para entrar em contato.

Logo, o conteúdo precisa ser pensado sob esses tipos de cuidados.

5. Excesso de publicidade online

Já dedicamos atenção especial ao assunto, por meio de um post que trata só disso. O excesso de publicidade online em sites mobile é comum e constitui um dos principais motivos para expulsar visitantes.

Além de muitas vezes ser resultado de violações sucessivas de privacidade, tiram a paciência até dos visitantes mais determinados, sendo carregadas por todos os cantos, ocupando lugar do que deveria ser o mais importante, obrigando a intermináveis rolagens de tela e não raramente, produzindo acessados indesejados por um toque acidental em uma publicidade que resolve aparecer de surpresa ou é redimensionada como em um passe de mágica, tomando a área que você iria tocar.

6. Pop-ups

Disseminou-se a prática de pop-ups por intenção de saída e por tempo, sempre convidando o visitante a algo que ele normalmente não quer, como fornecer seus dados em troca do recebimento de uma newsletter ou quem sabe, um download de um conteúdo rico.

Download de um conteúdo de não sei quantos megas e inúmeras páginas para leitura no celular?! Não, obrigado!

Pior quando é mais uma maneira de exibir publicidade.

É um verdadeiro desastre, quando a área clicável para se livrar do incômodo é muita pequena e redireciona o visitante para o site associado ao conteúdo, sem que ele queira. Ou quem sabe, é tão grande a janela, que o botão de fechar, normalmente bem no cantinho superior, fica inacessível.

7. Páginas “poluídas”

Esse é um erro que costuma ser consequência dos dois anteriores: excesso de publicidade e adaptação de um layout concebido para desktop, fazendo com que se tenha que colocar tudo o que havia em um apartamento de 3 quartos, em um kitnet.

Mas há outras razões, como excesso de links para outros conteúdos, galerias de imagens, banners do próprio site, para citar apenas o mais comum.

A verdade é que conseguir localizar o que interessa, em meio a um monte de outros elementos desinteressantes, é um exercício de perseverança.

8. Não testar

O último erro não é nem de longe o menos decisivo. Aliás, alguns dos pecados cometidos anteriormente, são resultantes da falta de testes.

Se fossem feitos como se deve antes de liberar a versão mobile do site, certamente que a maioria seria – ou poderia ser – corrigido.

E não há desculpa para não testar.

Há serviços e plataformas que permitem conduzir testes dos mais diversos, para versões diferentes de sistemas, diversas resoluções de telas e inclusive para os modelos de aparelhos mais populares, de forma que é possível verificar como se comportará a versão mobile do site.

Conclusão

Apesar de conhecida a importância do site mobile, as empresas ignoram cuidados que geram erros comuns capazes de arruinar a versão para dispositivos móveis.