O celular já é, há algum tempo, o principal dispositivo de acesso à internet. A maioria dos sites já são mais acessados por celular do que por desktops. Pensar no celular na hora de criar o layout de um site não é mais secundário, é a principal tarefa de quem trabalha com design para web (webdesign). De acordo com dados do IBGE de 2015, 92,1% do acesso à internet é feita por meio de dispositivos móveis. Dados de 2017 da empresa SEMrush revelam que 52% dos acessos ao site do Google são realizados por celulares, 2% por tablets e 43% por desktops.

O desafio para o webdesigner

Quando um webdesigner faz o layout de um site para o cliente, normalmente, ele apresenta a proposta mostrando a versão desktop, até porque normalmente o cliente prefere aprovar o layout pela tela grande. É um grande desafio para o webdesigner fazer o cliente entender que deve dar a mesma (ou maior) importância para a versão mobile.

5 dicas de design para dispositivos móveis

Levando em consideração os dados acima, a Próxima Web preparou 5 dicas para você criar layouts melhores para dispositivos móveis.

1. Pense em linhas

Normalmente o usuário visualiza a tela do celular na posição vertical enquanto navega na internet. Isso faz com que a o espaço da largura não seja muito grande. Se você dividir essa largura, o espaço para o conteúdo ficará muito apertado. Ou seja, se você dividir seu layout em colunas, o conteúdo dessas colunas ficará “preso”, sem “respiro”. Dessa forma, o ideal é que os blocos de conteúdo se posicionem um embaixo do outro, ou seja, que você divida seu layout em linhas.

2. Dimensões do layout

Essa é uma dúvida que muito gente tem: em que dimensões devo criar o layout? O grande problema, na verdade é saber que largura usar, pois a altura pode ser “infinita” já que o usuário pode rolar a página. Nossa dica é trabalhar com imagens responsivas, em outras palavras, que se adaptam à largura das dimensões da tela. No entanto, para criar o layout, você pode verificar a resolução da tela de diversos dispositivos usando o inspetor de elementos do Google Chrome ou do Firefox, como nas figuras a seguir.

Inspetor de elementos do Google Chrome

Inspetor de elementos do Firefox

Se você está remodelando um site que já existe e que use alguma ferramenta de estatísticas de acesso como o Google Analytics, verifique os dados de acesso por tipos de dispositivo, assim você vai conseguir saber quais as dimensões de telas mais usadas pelos usuários que acessam este site.

3. Efeitos e animações

Evite utilizar muitas animações e efeitos visuais. Além de dificultar a visualização e leitura do layout, especialmente por se tratar de telas pequenas, isso pode afetar o desempenho e processamento gráfico do site. Muitos celulares não dispõem de processamento gráfico suficiente para renderizar animações. Aconselhamos, pelo menos por enquanto, evitar o uso de sliders e carrosséis.

4. Áreas de toque (links)

Quando criar botões, menus ou links, lembre-se que o acesso por dispositivos móveis conta com telas pequenas e a navegação é feita pelo toque do dedo. Sendo assim, a dica é criar botões grandes e links com espaço de ação grandes o suficiente para que possa ser tocado sem erro. Uma dica é aplicar o atributo CSS de padding (margem interna) nos links e dar espaço entre diferentes itens do menu usando o atributo margin.

5. Submenus

Cuidado com o uso de submenus. Como já foi dito, o espaço da tela é restrito o que pode dificultar a visualização de todos os itens do menu caso ele seja muito extenso. Muitas vezes o menu nem cabe na tela. Procure criar menus apenas com a navegação primária e deixar o próximo nível de navegação dentro da página pertinente àquele menu, ou espalhe os links no conteúdo. Por exemplo: a empresa oferece 10 linhas de produtos. Ao invés de colocar no menu o item “Produtos” e no submenu mais 10 itens referentes à linha de produtos, deixe apenas o item produtos e ao tocar nele o usuário vai para a página de produtos onde poderá visualizar todas as linhas de produtos. É um clique a mais que é compensado pela usabilidade.

Espero que este artigo tenha sido útil para você. Não esqueça de deixar seu comentário.

Até a próxima!

Gostou? Então cadastre-se!

Imagem de capa: Designed by Freepik