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

Carregando...

Você pode se interessar

Conhecendo Svelte
Artigos
200 visualizações
Artigos
200 visualizações

Conhecendo Svelte

Carlos L. A. da Silva - 6 de janeiro de 2022

Svelte, React ou Vue? O especialista Josh Collinsworth disserta sobre a solução em seus mínimos detalhes.

Petrobras abre concurso com 757 vagas de nível superior
Artigos
250 visualizações
Artigos
250 visualizações

Petrobras abre concurso com 757 vagas de nível superior

Redação - 30 de dezembro de 2021

Há vagas para cientistas de dados, engenheiros e analistas de sistemas entre outras carreiras. As inscrições permanecerão abertas até o dia 05 de janeiro de 2022.

A história da imagem mais antiga da internet
Artigos
284 visualizações
Artigos
284 visualizações

A história da imagem mais antiga da internet

Carlos L. A. da Silva - 28 de dezembro de 2021

Lena Sjooblom saiu da página central da Playboy para se tornar um ícone dos engenheiros de imagens.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Coreia do Sul no mapa dos jogos
Artigos
295 visualizações
295 visualizações

Coreia do Sul no mapa dos jogos

Carlos L. A. da Silva - 22 de dezembro de 2021
Rust é o futuro da infraestrutura JavaScript
Artigos
581 visualizações
581 visualizações

Rust é o futuro da infraestrutura JavaScript

Carlos L. A. da Silva - 6 de dezembro de 2021
Influenciadores digitais que não existem
Artigos
572 visualizações
572 visualizações

Influenciadores digitais que não existem

Carlos L. A. da Silva - 2 de dezembro de 2021