0 Compartilhamentos 270 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

TypeScript // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,807 visualizações
Vídeos
1,655 compartilhamentos6,807 visualizações

TypeScript // Dicionário do Programador

Thais Cardoso de Mello - 18 de março de 2019

TypeScript é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (15/03)
Notícias
9 visualizações
Notícias
9 visualizações

Promoções de Jogos do Final de Semana (15/03)

Carlos L. A. da Silva - 15 de março de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista
Vídeos
1,655 compartilhamentos6,811 visualizações
Vídeos
1,655 compartilhamentos6,811 visualizações

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista

Thais Cardoso de Mello - 14 de março de 2019

Batemos um papo muito divertido e informativo com o Igor Oliveira (do canal Programador BR).

Deixe um Comentário

Your email address will not be published.

Mais publicações

World Wide Web completa 30 anos!
Notícias
11 visualizações
11 visualizações

World Wide Web completa 30 anos!

Carlos L. A. da Silva - 12 de março de 2019
Ada Lovelace: o cérebro que nunca morre
Artigos
132 visualizações1
132 visualizações1

Ada Lovelace: o cérebro que nunca morre

Carlos L. A. da Silva - 12 de março de 2019
Scrum // Dicionário do Programador
Vídeos
13 visualizações
13 visualizações

Scrum // Dicionário do Programador

Thais Cardoso de Mello - 11 de março de 2019