0 Compartilhamentos 282 Views

Crie links para números de telefone

16 de dezembro de 2013

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=”http://“) 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:

Telefone

Você pode se interessar

Como enlouquecer os rastreadores de internet
Dicas
7 visualizações
Dicas
7 visualizações

Como enlouquecer os rastreadores de internet

Carlos L. A. da Silva - 18 de setembro de 2019

Track This é um experimento criado pelo time do Firefox que vai alterar completamente o perfil que os anunciantes tem de você.

A história de Amazônia, o primeiro jogo brasileiro!
Artigos
8 visualizações
Artigos
8 visualizações

A história de Amazônia, o primeiro jogo brasileiro!

Carlos L. A. da Silva - 17 de setembro de 2019

Como um programador iniciante criou um adventure clássico que atravessou décadas.

VIM (Amado ou Odiado?) // Dicionário do Programador
Vídeos
6 visualizações
Vídeos
6 visualizações

VIM (Amado ou Odiado?) // Dicionário do Programador

Thais Cardoso de Mello - 16 de setembro de 2019

Uma poderosa ferramenta, que dispensa apresentações, e vem sendo utilizada por muitas gerações de programadores.

Mais publicações

Promoções de Jogos do Final de Semana (13/09)
Notícias
10 visualizações
10 visualizações

Promoções de Jogos do Final de Semana (13/09)

Carlos L. A. da Silva - 13 de setembro de 2019
Como usar os novos atributos de link do Google
Dicas
11 visualizações
11 visualizações

Como usar os novos atributos de link do Google

Carlos L. A. da Silva - 11 de setembro de 2019