Categorias

10 Passos para tornar seu site mais compatível com dispositivos móveis

Seu site está otimizado para oferecer uma boa experiência para o usuário que acessá-lo de um smartphone ou tablet? Não? Você está louco? Quer perder dinheiro?

Apesar dos navegadores mais modernos se desdobrarem em mil para exibir adequadamente aquele site antigão em um dispositivo móvel, existem alguns truques mínimos que você deveria estar praticando para facilitar para seu visitante. Se você não tem o dinheiro ou o tempo necessário para recriar seu site do zero e adaptá-lo como se deve, pelo menos siga estas dicas práticas que você pode colocar para funcionar em qualquer final de semana, basta ter vontade!

1) Use fontes padrões

tipografia

Usar fontes customizadas pode dar ao seu site aquele ar profissional e exclusivo que poucos tem. Ou pode ser um desastre tipográfico, se você escolher errado ou abusar na quantidade. Entretanto, se você quer construir um site que seja amigável para os usuários em plataformas móveis, é importante lembrar que eles terão que baixar os arquivos das fontes antes que seu site possa ser visualizado.

Em uma conexão lenta, isso pode significar segundos preciosos de atraso em que texto nenhum é exibido, tempo em que seu possível visitante pode achar melhor tentar carregar o site da concorrência.

Se você não for abrir mão daquela fonte belíssima que tem que entrar no projeto de qualquer forma, procure utilizar o Google Font Loader. Através desta biblioteca, você pode especificar uma fonte padrão que todo sistema possui para exibir seu conteúdo enquanto a fonte padrão está carregando.

2) Utilize o poder das media queries

Um dos grandes impasses do desenvolvimento de páginas agora é ajustar tudo para ficar perfeito em uma tela de dispositivo móvel e descobrir que tudo ficou minúsculo no desktop ou vice-versa. Para resolver esse problema, felizmente existem as media queries.

Mas o que é isso de nome esquisito? É só uma forma de informar ao navegador como se comportar em cada caso. Com elas, você pode criar regras específicas de estilo para cada plataforma, de acordo com a largura da tela, por exemplo. Confira:

/* css genérico para todo mundo */
.tabs {
  padding: 10px 2em;
}
@media screen and (max-width: 500px) {
/* a regra de estilo abaixo só é aplicada em dispositivos com menos de 500px de largura de tela */
  .tabs {
    padding: 3px 1em;
  }
}

Com este truque você pode fazer pequenos ajustes para tornar seu site bonito e funcional em qualquer situação.

3) Evite o posicionamento fixed

Se acontecer de seu site tiver um cabeçalho ou coluna lateral com a propriedade CSS position configurada para fixed, é bem provável que, caso seu usuário use o zoom do dispositivo móvel, esse elemento também sofra zoom e acabe bloqueando toda a tela. Parabéns, seu visitante trocou de site.

A solução mais fácil é não depender da posição fixa. Pelo menos, não quando seu site está executando em uma tela de celular ou tablet. Felizmente, usando o poder das media queries que vimos no tópico acima, podemos resolver o problema assim:

/* css genérico para todo mundo */
#header {
  position: fixed;
}
@media screen and (max-width: 500px) {
/* a regra de estilo abaixo só é aplicada em dispositivos com menos de 500px de largura de tela */
  #header {
    position: static;
  }
}

4) Configure corretamente os atributos dos campos de formulário

input-form-mobile

Se seu site usa campos de formulário para o usuário digitar seu nome ou endereço, então desligue a propriedade autocorrect e ligue o autocapitalize. Como? Muito simples:

Seu nome: 

Então, agora você está se perguntando os motivos desta dica.

Primeiro, o dispositivo pode tentar alterar o nome do usuário (“Carlos”, por exemplo, aliás, um nome muito bonito) para outra coisa qualquer (como “Carros”) se a palavra não existir no dicionário do aparelho. Segundo, ativando a capitalização automática para palavras, você economiza o tempo do usuário para ativar o Capslock para cada nome digitado (“Carlos aquino” vira “Carlos Aquino”, como deve ser automaticamente).

Obviamente, estas opções devem ser ajustadas de acordo com os dados que você está solicitando no campo e não fariam sentido, por exemplo, se você está querendo que o usuário digite um número de telefone.

E, se for solicitar o e-mail do usuário, utilize o campo específico email de forma que o usuário seja apresentado com o símbolo de @ sem que precise trocar o teclado para a tela de símbolos. Como se faz? Simples também:

Seu e-mail: 

5) Configure corretamente a largura dos campos de formulário

Já que estamos falando de formulários, é uma boa ideia também limitar a largura máxima deles para que não ultrapassam o campo de visão da tela. Você pode obter esse resultado com o seguinte valor de max-width em sua folha de estilo (use media queries, se precisar):

input, textarea {
  max-width:100%;
}

Assim, no caso do seu site ser exibido em um dispositivo móvel com uma largura pré-configurada, os campos não irão ultrapassar os limites da tela. O que é sempre muito estranho.

6) Cuidado ao desabilitar o botão de Submit

Para encerrar o tema Formulários… Você ainda tem um script que desativa o botão submit do seu formulário para evitar que os visitantes enviem mais de uma vez o formulário? Olha, não só essa não é a abordagem correta (o ideal seria um tratamento na entrada dos dados) como ainda é uma grande fonte de dor de cabeça para dispositivos móveis.

Ao contrário de computadores, aparelhos móveis experimentam frequentes quedas de conexão. Se você desativar o botão, o usuário pode não conseguir tentar enviar novamente o que preencheu. Isso pode acontecer por diversos fatores: sinal fraco, troca de torre de transmissão, um túnel… na verdade, se o seu usuário receber uma chamada telefônica no meio do processo, a janela do navegador é minimizada para exibir a tela de chamada e até esse movimento já pode confundir o navegador o suficiente para ele não conseguir enviar o formulário.

Se você não se conforma e acha que o botão tem que ter desativado, porque o “maldito usuário não tem paciência, não para de apertar e já recebi 20 formulários iguais”, então, pelo menos, desative-o por um tempo determinado, alguns segundos apenas.

7) Pense com o seu dedão

segurando-smartphone

Seu site precisa ser navegável perfeitamente bem com um dedão. Um dedão gordo, rechonchudo, espaçoso e um pouco desajeitado. Se esse dedão corre o risco de esbarrar em alguma coisa indevida e clicar no link ou opção errada, a culpa não é do dedão. A culpa é de quem fez o site, ou seja, sua.

Não espere que seu usuário segure o dispositivo dele com a firmeza de uma prensa industrial enquanto clica nos links com a suavidade e precisão de um dedo indicador ossudo ou de um stylus, por mais que a Apple esteja tentando trazer o utensílio de volta. Seu usuário provavelmente está ocupado, andando, fazendo alguma outra coisa, segurando o smartphone com uma mão enquanto a outra está livre para qualquer outra atividade. Ele vai navegar com o dedão.

Se seu usuário tem dificuldades para clicar nas coisas que deseja, certamente é porque elas não foram otimizadas para o dedão: estão muito pequenas ou o espaçamento entre elas é muito apertado. Use media queries se preferir, mas faça a navegação enorme, com as opções bem separadas e distinguíveis.

O dedão agradece.

8) Aplique word-wrap com strings longas

Às vezes você vai precisar exibir uma string longa, como códigos de referência, números financeiros, endereços de URL ou o campo de comentários do seu site foi abusado porgentequenãousaateclaespaçopranadaeaindagrudaummontedepontosdexclamação!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Se a tela do dispositivo móvel for muito pequena (e ela é, pode acreditar), o conteúdo longo pode se estender para fora do limite da tela e ficar ilegível.

Para remediar isso, aplique em qualquer elemento que possa extrapolar o limite de caracteres o estilo word-wrap. Agora o texto irá quebrar para a próxima linha quando atingir o limite, permitindo que seu visitante veja todo o conteúdo sem precisar fazer uma estranha rolagem lateral.

Sua senha é:
435143a1b5fc8bb70a3aa9b10f6673a8

9) Estabeleça uma largura preferencial

Quer ter uma ideia de como seu site pode ficar em um dispositivo móvel bem pequeno, mas não possui um? Redimensione a janela do seu navegador para uma largura bem baixa. Vá aos poucos. Seu site ainda é legível? Ainda daria para usar? Pare quando ficar uma bagunça total. O limite disso é seu campo mínimo de visualização. Pegue esse tamanho de janela e configure como a largura preferencial do seu site, adicionando uma meta tag no head de sua página:

Assim, da próxima vez que seu site for visualizado em um dispositivo móvel, ele irá automaticamente exibir seu site nessa largura, com o excesso de largura distribuído para a esquerda e para a direita.

Não é a solução ideal: o ideal seria que seu site fosse construído com porcentagens fluidas e funcionasse adequadamente para todas as dimensões de tela, mas estamos falando aqui de dicas rápidas.

10) Configure as larguras das imagens para 100%

Agora que você configurou uma largura baixa preferencial para o seu site, algumas imagens podem ser largas demais para a tela. E agora?

Isso também tem conserto e pode ser feito com uma linha de CSS (ou três, se você gosta de indentação, como nós). Basta você dar às suas imagens uma largura máxima de 100% e elas serão automaticamente redimensionadas se ficarem grandes demais para o dispositivo:

img {
  max-width: 100%;
}

Se suas imagens estão sendo utilizadas como imagens de fundo e não dentro de img, então você terá que configurar o background-size no CSS para o valor contain. Isso fará com que a imagem de fundo também se redimensione quando a tela for muito pequena.

.header {
  background: url(header.png) 50% no-repeat;
  background-size: contain;
}

Conclusão

mobility

Essa lista de sugestões não esgota as alterações que são necessárias para que seu site funcione adequadamente em um dispositivo móvel. Mas elas pelo menos facilitarão a vida dos seus usuários para um denominador comum sem que você precise investir muito tempo ou dinheiro no seu projeto.