Telefonnumre på responsive websites

Jeg kan huske engang hvor en Skype-opdatering resulterede i at alle telefonnumre der blev vist i min browser blev pakket ind i Skype-design. Vildt irriterende, men egentlig meget praktisk at kunne ringe op med et museklik.

Når man laver responsive hjemmesider, d.v.s. hjemmesider der tilpasser sig skærmens størrelse, så den også kan læses på på smartphones lille skærm, er det endnu mere smart at kontaktoplysningerne på hjemmesiden er nemme at bruge.

Email-adressen sættes ind som et mailto-link og telefonumre sætte ind som tel-link:

Email: email@domæne.dk
Tlf.: 1234 5678

Koden er meget enkel:

<p>Email: <a href="mailto:email@domæne.dk">email@domæne.dk</a>
Tlf.: <a href="tel:+4512345678">12345678</a></p>

Tilsæt evt. en class-attribut samt lidt styling efter behov og du er klar til at blive ringet op!

OBS - det virker kun på smartphones. Chrome forstår at håndtere det, mens Firefox og Internet Explorer ikke opfører ordentligt, så brugen af tel: links bør begrænses til mobilvisning...