Como ter um site amigo dos equipamentos móveis?

Em 2016, pela primeira vez, o uso da internet móvel superou o uso do computador. Não foi surpresa quem estava a prestar atenção.

O uso de dispositivos móveis tem vindo a aumentar desde que a Apple lançou o primeiro smartphone. Os dispositivos móveis tornaram-se uma parte da vida quotidiana, e todos vemos pessoas a utilizar os seus smartphones no seu dia a dia.

Para os proprietários de um site, essa mudança na forma como as pessoas interagem com a web não é surpreendente, mas aumenta a urgência em ter um site com web design otimizado para este tipo de equipamentos. Se os visitantes, que utilizam dispositivos móveis, não tiverem uma boa experiência quando acedem ao site, o site está a afastar potenciais clientes (e a prejudicar a sua classificação nos motores de pesquisa).

Os 10 passos para otimizar o seu o web design do seu site

Aqui estão os passos, que na minha opinião, devem ser dados para garantir que o web design do site funciona bem, quer para os visitantes de dispositivos móveis, quer para os visitantes em computadores tradicionais.

1. Faça o web design do seu site responsivo.

Um site responsivo inclui mesmos conteúdos e informações qualquer que seja o dispositivo que se usa para aceder. Mas, altera a forma como a informação é exibida, com base no tamanho do ecrã do dispositivo. Esta é a melhor opção para tornar web design do site otimizado para ‘smartphones’, porque não estamos a limitar as informações que o visitante pode aceder, quando usa um equipamento móvel. O web design responsivo também é bom para efeitos de ‘SEO’ (Search Engine Optimization – Otimização para os motores de busca).

Construir um site com web design responsivo não é para iniciantes. Se não tem experiência como web designer, é preciso contratar um profissional para o ajudar, ou procurar um fornecedor de sites que inclua modelos de web design compatíveis com dispositivos móveis. Isto torna o processo muito mais simples pois uma solução profissional melhora a experiência do cliente e do utilizador.

2. Torne as informações que as pessoas procuram mais fáceis de encontrar.

Algumas pessoas que navegam na Web em dispositivos móveis não se incomodam em pesquisar ou ler os conteúdos ao mesmo ritmo que usariam num computador. Mas, outras desejam encontrar as informações de que precisam da maneira mais rápida e fácil possível. Pense nas informações que as pessoas estarão à procura quando visitam o seu site. Coloque essa informação em destaque e fácil de encontrar na página inicial para os dispositivos móveis.

Pense também nas perguntas frequentes que os seus clientes fazem. Pode não fazer sentido colocar todas as respostas em destaque, na sua página inicial para dispositivos móveis, mas pode torná-las fáceis de encontrar nos menus.

3. Não use Flash.

O Flash deixou de ser utilizado para a criação de sites, por razões de segurança, e porque não permite realizar SEO. Os browsers Chrome e Firefox deixaram de confiar nas aplicações baseadas nesta linguagem, e por isso, bloqueiam o seu funcionamento por defeito.

Mais, nem os dispositivos Android nem iOS são compatíveis com flash, portanto, se  criar um site que depende da linguagem Flash, os utilizadores em dispositivos móveis serão afetados por uma experiência de utilização negativa. Neste ponto, aconselho a eliminar completamente a tecnologia Flash do seu site e encontrar um web design que funcione com html5.

4. Inclua a tag Meta do Viewport.

A metatag ‘viewport’ é uma forma fácil de controlar como o site é exibido nos equipamentos com écrans pequenos. Se a página do site abre com a mesma largura de ecrã no smartphone e no computador desktop, a informação não caberá no ecrã pequeno. E o browser é obrigado a apresentar barras de deslocação de ecrã horizontais. Então, para além do scroll vertical, o utilizador, também terá de realizar o scroll horizontal na página, o que tem um impacto negativo na leitura da informação. A metatag viewport informa os browsers para ajustar a largura do web design do seu website ao ecrã.

Adicioná-lo ao html do site é bastante simples. Basta colar o código, em baixo, dentro da seção <head> do html de cada página do website:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

5. Desactive a inserção automática em formulários.

Estes pormenores podem fazer a diferença durante a navegação no site. Se o site tiver formulários em que solicita informações como o nome ou morada, desativar a correção automática torna a inserção de dados mais fácil no equipamento móveis. Caso contrário, o smartphone tentará alterar o nome, morada, introduzidos, para palavras mais utilizadas e retarda o processo de preenchimento do formulário.

Pode desactivar esta funcionalidade diretamente no html colocando no elemento de ‘input’ do formulário a tag ‘autocorrect = off’.

6. Teste se o tamanho dos botões é grande o suficiente para resultar nos smartphones.

É fácil conseguir ‘clicar’ num botão de praticamente qualquer tamanho com o rato. Mas quando tentamos ‘carregar’ com os dedos no ecrã do smartphone, é difícil acertar com os botões pequenos. E o problema complica-se quando existem vários botões pequenos próximos uns dos outros. Pressionar um ao tentar pressionar o outro causa um sentimento de frustração e aborrecimento aos utilizadores.

A solução é usar botões maiores. Reserve algum tempo para testar o funcionamento dos botões do seu site, em vários dispositivos móveis, e certifique-se de que selecionar cada botão é fácil em todos os dispositivos e, se não for, modifique o web design para que seja.

7. Use fontes com tamanhos grandes.

Ler num ecrã pequeno é muito mais difícil se a fonte for pequena. É aconselhável usar um tamanho de fonte de pelo menos 14px no seu site. Aconselhamos também a ficar com as fontes padrão. Fontes para as quais o navegador do utilizador precise de fazer download aumentará o tempo que o site leva para carregar, o que é uma má notícia no dispositivos móveis, que dependem de ligações via rádio à internet, e que podem sofrer de grande latência. Fontes especialmente detalhadas podem também parecer desfocadas nos écrans com baixa densidade de pixéis.

8. Comprima as imagens,  CSS e scripts.

Velocidade. Quanto mais rápido o navegador conseguir fazer o download de todos os elementos do site, mais rápido a informação é mostrada ao utilizador. Nos equipamentos móveis com acesso à internet móvel isto é muito importante. Isto significa que o site só estará otimizado para smartphones, quando compactar todos os ficheiros de forma a reduzir o tempo de carregamento do site.

Isso inclui as imagens de alta resolução, os ficheiros de CSS, Html, Javascript, etc. Ao compactá-los, você pode garantir que eles são carregados mais rapidamente sem afetar negativamente a qualidade do que as pessoas veem no site.

9. Permita o download das imagens apenas quando elas são necessárias.

Como o écrans dos equipamentos móveis são pequenos, não é necessário carregar todas as imagens existente na página de uma só vez. Podemos carregar ‘placeholders’ para as mesmas, e só quando o utilizador fizer ‘scroll’ até a área do site onde a imagem é mostrada, pedimos ao browser para fazer o download da mesma.

Com este método é possível carregar a página muito mais rapidamente, do que se estivermos a aguardar o download de todas as imagens utilizadas no site.

10. Faça testes móveis regularmente.

Este é o passo mais importante. Para garantir que a experiência do seu site é boa, temos de testar regularmente o web design do site. Sempre que os conteúdos são modificados, ou uma nova funcionalidade é acrescentada ao site é importante agendar um período de testes para garantir o funcionamento do site em todos os tamanhos de écrans. Peça a seus funcionários que façam o mesmo e considere a contratação de utilizadores para fazer testes também (já que eles verão tudo com olhos novos).

E agora já sabe o que fazer para ter um site responsive sempre funcional.

Precisa de ajuda com o seu site? Clique aqui

Sobre o autor

A TalentScreen é uma empresa especializada na criação de site e criação de lojas online. Temos soluções para tornar os seus projetos realidade, desde a construção do web site, alojamento de qualidade e todo o software de gestão associado. Se necessitar de uma solução chave na mão contacte-nos!