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

5 plugins de comércio eletrônico para WordPress para alavancar sua loja online
Artigos
3 visualizações
Artigos
3 visualizações

5 plugins de comércio eletrônico para WordPress para alavancar sua loja online

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

Não espere até a Black Friday para correr atrás dos consumidores: comece a preparar sua loja agora!

Paypal faz aporte de USD 750 milhões no Mercado Livre
Notícias
8 visualizações
Notícias
8 visualizações

Paypal faz aporte de USD 750 milhões no Mercado Livre

Redação - 25 de março de 2019

Com a clara intenção de consolidar sua operação na América Latina, em especial no Brasil, Paypal mira em público desbancarizado.

Programação Funcional // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,806 visualizações
Vídeos
1,655 compartilhamentos6,806 visualizações

Programação Funcional // Dicionário do Programador

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

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

Deixe um Comentário

Your email address will not be published.

Mais publicações

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

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

Carlos L. A. da Silva - 22 de março de 2019
Como substituir os produtos da Adobe pagando nada ou muito pouco
Dicas
9 visualizações
9 visualizações

Como substituir os produtos da Adobe pagando nada ou muito pouco

Carlos L. A. da Silva - 22 de março de 2019
Reagindo a Vagas de Estágio // Vlog React #91
Vídeos
1,655 compartilhamentos6,809 visualizações
1,655 compartilhamentos6,809 visualizações

Reagindo a Vagas de Estágio // Vlog React #91

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