Seria redundante falar aqui sobre o crescimento das plataformas móveis. Você já sabe disso, seu colega de trabalho já sabe disso, seu chefe já sabe disso e até aquele seu vizinho que não manja nada de internet já deve ter um celular com suporte a wi-fi.
Então, se você está criando um site onde você coloca o telefone de contato da sua empresa, por que não torná-lo ainda mais prático? Por que não fazer com que o visitante ligue para este número de contato com um único clique na página a partir de seu celular?
Existem padrões de numeração que alguns celulares identificam na página e transformam automaticamente em números discáveis. Mas, você não precisa confiar na sorte ou no modelo usado pelo seu visitante.
Da mesma forma que você cria links para outras páginas (com a href=”https://“) ou para endereços de email (com a href=”mailto:“), você também pode criar links de discagem. Basta chamar o protocolo tel://.
<a href=”tel:+5502122222222″>+55(0)21 – 2222-2222</a>
Nem todos os navegadores possuem suporte ao protocolo. Principalmente os de desktop, a menos que o usuário tenha algum tipo de plugin que ative o Skype ou outra solução de telefonia para lidar com este protocolo. Outros dispositivos, como o iPad, são capazes de identificar o recurso, mas acionam uma lista de contatos como resposta ao protocolo, o que não deixa de ser uma opção interessante. Na dúvida, para sites orientados para multiplataformas, é bom evitar confusão gerando conteúdo diferenciado de acordo com o dispositivo ou oferecendo folhas de estilo que tratam este tipo de link de uma outra forma.
Se você optar pela saída em CSS, saiba que com o seletor certo você pode gerar um estilo exclusivo para o número discável :
a[href^=”tel:”]:before {
content: “\260E”;
margin-right: 0.5em;
}
Com o seletor a[href^=”tel:”] você informa ao navegador para localizar todos os links cujo atributo href se inicie com a string tel:.
O resto do estilo fica ao seu critério, mas aqui introduzimos mais um truque de design: antes do link propriamente dito, aparecerá um pequeno ícone em forma de telefone. Sem usar imagens! Como? O before instrui o navegador a colocar conteúdo antes do elemento. Neste caso, ele irá exibir o caractere unicode \260E, que é o ícone de um telefone. Especificamos uma margem entre ele e o link propriamente dito e pronto:
