O seu website é um website de celular, e provavelmente não foi projetado como tal

Olhe para a origem real dos seus visitantes e o número fica normalmente entre setenta e noventa e cinco por cento em celular. Para um negócio local está mais perto do topo dessa faixa, porque as pessoas procuram você enquanto estão na rua, dentro do carro, ou de pé na cozinha de outra pessoa.

Quase todos os sites continuam sendo projetados num monitor grande. É nessa distância que acontece a maior parte dos estragos.

O que parte, em concreto

Os mesmos poucos problemas, site atrás de site:

Texto de destaque ilegível. Um título dimensionado para uma tela largo passa a seis linhas no celular, por cima da zona mais carregada de uma fotografia. A primeira coisa que o visitante vê é a que funciona pior.

O número de telefone não é clicável. É texto, ou é uma imagem, ou está no rodapé a quatro telas de distância. Num celular, um número de telefone deve ser um toque, e deve estar visível sem ter de rolar a página.

Tabelas e listas de preços que rolam para o lado. A própria página desliza para a esquerda e para a direita, o que parece avariado mesmo quando o conteúdo está bem.

Fotografias que pesam quatro megabytes. Numa ligação de casa ninguém repara. Em dados móveis, numa zona com sinal fraco, a página fica em branco durante seis segundos e o visitante desaparece.

Botões pequenos demais ou juntos demais. Um link fácil de clicar com o mouse é uma questão de sorte com o polegar.

Uma janela pop-up que não se consegue fechar. O botão de fechar está fora da tela. Esta lhe custa o visitante por completo.

A auditoria de cinco minutos

Faça isto no seu próprio celular, com dados móveis em vez do wifi do escritório, porque é essa a condição real.

  1. Abra a sua página inicial e conte os segundos até conseguir ler alguma coisa.
  2. Leia o título sem fazer zoom. Consegue?
  3. Encontre o seu número de telefone sem rolar a página. Toque nele. Marca?
  4. Tente marcar ou pedir informação, até ao fim, com um polegar só.
  5. Vire o celular para o lado. Alguma coisa se desfaz?
  6. Procure uma lista de preços ou uma tabela. A página desliza para o lado?

O que falhar é o que deve corrigir primeiro. Vai valer quase sempre mais do que uma reforma.

Por que responsivo não é o mesmo que projetado

A maioria das ferramentas é responsiva, ou seja, o layout se reorganiza para caber num tela estreito. Isso resolve a mecânica e não o design. Reorganizado não é o mesmo que pensado.

A tela de um celular é outro meio. Há uma coluna, uma coisa visível de cada vez, e o visitante normalmente tem pressa e está distraído. O que merece o topo da tela num celular não é muitas vezes o que o merece num computador. A versão de computador pode dar-se ao luxo de uma imagem de ambiente. A versão de celular precisa muitas vezes do nome do negócio, do que faz, e de um botão que lhe telefone.

Isso é uma decisão, e tem que ser tomada de propósito, para cada dispositivo. A reorganização automática não a pode tomar por você.

O que fazer quanto a isto

Se a sua ferramenta permite definir valores por dispositivo, dedique uma hora especificamente à versão de celular. Título menor, mais espaço em torno dos botões, a chamada à ação mais acima, a fotografia grande recortada em vez de encolhida.

Se a sua ferramenta não permite alterar a versão de celular em separado, vale a pena sabê-lo, porque significa que a experiência móvel é um efeito secundário de uma decisão tomada para computador, e o celular é a maioria do seu tráfego.

Todos os elementos do Instinctor têm configurações separadas para computador, tablet e celular, e o editor pré-visualiza cada uma delas. Nós construímos assim porque a versão de computador de um site de pequena empresa é, estatisticamente, a versão que quase ninguém vê.

A equipe Instinctor

Instinctor