Kennen Sie das? Da nennen Sie auf Ihrer Website eine harmlose Telefonnummer – und schwups, wird diese in zahlreichen Browsern übel verunstaltet. Einige Browser – ganz besonders solche von Mobilgeräten – erkennen nämlich Telefonnummern auf Websiten und markieren sie als anklickbaren Link, um einen Anruf zu erleichtern. Damit der eigentlich praktische Link aber nicht völlig am sonstigen Webdesign vorbeischiesst, empfiehlt es sich, den Telefonlink auf dem Radar zu haben. Ein Mini-Workshop von Dr. Code.
Zunächst: Nicht alle Browser wandeln eingegebene Rufnummern in Links um. Wenn sie es aber tun, dann meist betont unästhetisch. Das kann auch mal so aussehen:
Telefon: +41 012 345 67 89
Sie finden das nicht hübsch? Wir auch nicht.
Der Telefon-Link lässt sich aber via CSS auf einfache Weise beeinflussen. Zum Beispiel mit folgendem Code, der Telefonlinks grün einfärbt und auf allen Websites funktioniert – in WordPress können Sie die Zeilen in das CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS) einfügen:
a[href^="tel:"] {
color: green;
font-family: Raleway;
text-decoration: underline;
}Die Telefonnummer sieht nun schon ganz passabel aus:
Telefon: +41 012 345 67 89
Jetzt möchten wir noch den Term «Telefon» mit einem kleinen Icon ersetzen. Dazu fügen wir zusätzlich noch ein paar weitere Zeilen CSS-Code ein:
a[href^='tel:']::before {
content: '\260e';
margin-right: 0.5rem;
}Das ergibt:
Alternativ können Sie im CSS-Code auch ein anderes Icon anzeigen lassen. Anstelle des Codes «\260e» – welches das obige Telefonsymbol ergibt – existieren folgende Unicode-Zeichen:
- ☏ \260f
- ✆ \2706
- ☎ \260e
Bloss: Warum wollen Sie es dem Zufall überlassen, ob ein Browser eine Telefonnummer zum Link macht? Legen Sie das doch statt dessen gleich selbst fest. Das erreichen Sie mit folgender HTML-Zeile:
<a href="tel:+41123456789">+41 012 345 67 89</a>Nun könnte es allenfalls noch sinnvoll sein, den Link bloss auf Mobiltelefonen besonders auszuzeichnen. Mit dem folgenden CSS-Code werden Telefonnummern zwar verlinkt; das Styling ist aber nur auf Mobiltelefonen grün – auf Tablets und Desktop-Bildschirmen wird die normale Textfarbe (hier schwarz) erzwungen:
@media only screen and ( min-width: 768px ) {
a[href^="tel:"] {
color: black;
font-family: Raleway;
text-decoration: none;
}
}
@media only screen and ( max-width: 767px ) {
a[href^="tel:"] {
color: green;
font-family: Raleway;
text-decoration: underline;
}
}Das Resultat sieht dann so aus:
Tablets und Desktop-PC:
Telefon: +41 012 345 67 89
Mobiltelefon:
Telefon: +41 012 345 67 89
Aber vielleicht möchten Sie auch ganz verhindern, dass der Webbrowser dargestellte Telefonnummern automatisch als Link anzeigt. Auch hier hilft ein kleiner Code. Untenstehende Zeile gehört in den <head>-Bereich Ihrer Website:
<meta name="format-detection" content="telephone=no">Die Browser werden nun Telefonnummern nicht mehr automatisch zu Links umwandeln.
Ziemlich einfach. Oder?
Möchten Sie vielleicht noch mehr? Ein leicht angepasster Link kann etwa auch SMS auslösen. Der HTML-Code hierfür:
<a href="sms:+41123456789">+41 012 345 67 89</a><a href="mms:+41123456789">+41 012 345 67 89</a>Voilà. Wir wünschen gute (und vielfältige) Kommunikation.
Zusatztipp: Sie können die Umwandlung zu Telefonlinks auch vollständig und auf der gesamten Website unterbinden. Wie das geht, erklären wir Ihnen im Beitrag «Verlinkung der Telefonnummer verhindern».
Werbung
Werbung
