Aktuell

Telefonnummern verlinken für mobile E-Mail-Nutzung

Smartphone-Besitzer kennen das Phänomen: In E-Mails sind ausgeschriebene Rufnummern teilweise verlinkt, so dass Empfänger durch Antippen direkt einen Anruf tätigen können. Diese Automatismen lassen sich relativ leicht unterstützen und verbessern.

Telefonnummern verlinken für mobile E-Mail-Nutzung

Android, iPhone und Co. erkennen oft selbsttätig, ob es sich um eine Ziffernfolge handelt, die eine Telefonnummer darstellen könnte. Sie werden dann entsprechend mit einer Anruffunktion verknüpft, was für Nutzer durchaus sehr bequem sein kann. Dabei geraten aber teilweise auch andere Zahlen ins Visier der Algorithmen, wie z.B. Umsatzsteuer-Identifikationsnummern, Handelsregistereinträge, ISBNs oder sogar Preise. Außerdem wird nicht jede echte Telefonnummer zuverlässig erkannt.

Über spezielle Meta-Informationen und HTML-Attribute lässt sich daher steuern, ob und wie eine Verlinkung hergestellt wird. Das ist besonders für E-Mail-Kampagnen interessant, bei denen ein Anruf durch einen Empfänger eine wünschenswerte Konversion darstellt. Um die Nutzungserfahrung zu optimieren, kann man beim Erstellen eines Newsletters folgende Mechansimen für sich nutzbar machen.

Telefonnummernerkennung abschalten

Über einen Meta-Tag im Kopf eines HTML-Dokuments lässt sich die Nummernerkennung in einer mobilen E-Mail oder auch auf einer mobilen Webseite vollständig deaktivieren. Das ist dann praktikabel, wenn auch andere Zahlen im Inhalt auftauchen, die nicht angerufen werden können oder sollen und man in einem weiteren Schritt explizite Verweise auf die Telefonfunktion herstellen möchte. Man notiert dazu im head-Element:

<meta name="format-detection" content="telephone=no">

Der Befehl wurde von Apple für WebKit-basierte Anwendungen unter iOS eingeführt, wird aber auch von Android-Geräten erkannt, gleichwohl ob man sich in einem E-Mail-Client oder in einem Browser befindet. Eine Dokumentation dieses und weiterer unterstützter Meta-Tags finden sich in der Safari Developer Library.

Links auf Telefonnumern setzen

Schaltet man über das gezeigte Verfahren die Formaterkennung aus, muss man natürlich diejenigen Telefonnummern manuell verlinken, die Nutzer anklicken können sollen. Das geschieht über einen sogenannten tel URI (Uniform Resource Identifier), der im RFC 3966 aus dem Jahr 2004 spezifiziert worden ist. Man setzt ihn genauso wie das mailto für E-Mail-Adressen ins href-Attribut eines a-Elements.

<a href="tel:+4943197997220">+49 431 97997220</a>

Wichtig zu beachten ist dabei die Schreibweise ohne Trennzeichen hinter dem Doppelpunkt. Der verlinkte Ankertext muss aber durchaus nicht sofort als Telefonnummer erkennbar sein, wie im folgenden Code-Beispiel:

<a href="tel:+4943197997220">sitepackage:// Support</a>

Wirklich eingängig ist letzteres jedoch nicht, denn ein Nutzer vermutet bei solch einer Umsetzung wohl doch eher ein Kontaktformular.

Gestaltung über CSS

Ein unschöner Nebeneffekt zeigt sich beim Einsatz eines tel-Links jedoch im Falle einer Betrachung auf dem Desktop. Denn hier sieht der Link aus wie jeder andere, führt jedoch in der Regel zu einer Fehlermeldung, weil der Browser keine passende Anwendung zuordnen kann. Stefan Mintert präsentiert im Linkwerk Blog dazu eine smarte Lösung, um diesen Effekt zumindest etwas zu kompensieren.

Er schlägt eine desktopfreundliche Gestaltung der betreffenden Links über CSS (Cascading Stylesheets) vor. Etwas vereinfacht notiert man folgende Anweisungen:

a[href^="tel"] {
  text-decoration: none;
  cursor: default;
  color: #000;
}

Verwendet wird ein Attribut-Selektor, der Unterstreichungen entfernt, den Mauszeiger normalisiert und den Text schwarz stellt - oder eben in die jeweils verwendete Schriftfarbe. Weitere individuelle Gestaltungsparameter können natürlich gleichsam zurückgesetzt werden und man sollte ggf. eine hover-Pseudoklasse bedenken. Dann unterscheiden sich alle tel-Verweise optisch nicht mehr vom Fließtext und lösen nur mit niedriger Wahrscheinlichkeit einen Klickreiz aus. Außer eventuell beim Copy & Paste wird man nicht mit Fehlern konfroniert.

Um die Telefonverweise in mobiler Umgebung wieder erkennbar zu machen, macht man sich anschließend eine CSS Media Query zunutze.

@media only screen and (max-device-width: 480px) {
  a[href^="tel"] {
    text-decoration: underline;
    cursor: pointer;
    color: #1AB;
  }
}

Darüber erhalten die bewussten Links wieder ihre ganz normale Gestalt oder - wenn zum Layout passend - auch eine von den übrigen Verknüpfungen abweichende Optik. Jedenfalls kann man sie wieder deutlich als solche erkennen und auch der Mauszeiger verwandelt sich in den bekannten Finger.

Fazit

E-Mails werden zu einem weiter wachsenden Prozentsatz über mobile Endgeräte abgerufen. Viele davon sind Telefone, mit denen man tatsächlich auch jemanden anrufen kann. Als Versender muss man sich bewusst machen, dass Newsletter-Empfänger jede Bequemlichkeit zu schätzen wissen. Und der Komfort einer verlinkten Telefonnummer führt sicher nicht nur zu nervigen Supportanfragen, sondern gewiss auch zu der einen oder anderen Bestellung. Es lohnt sich daher möglicherweise über die oben beschriebenen Verbesserungen in den eigenen Newsletter-Vorlagen bzw. E-Mail-Kampagnen nachzudenken, auch wenn es nur Kleinigkeiten sind.

Kommentieren

Die E-Mail-Adresse wird nicht angezeigt, Angabe der Website ist optional.






zurück zur Übersicht

Newsletter Freeware

Jetzt ins E-Mail-Marketing starten und Software für bis zu 200 Abonnenten nutzen. Einfach und kostenlos mit der sitepackage:// Newsletter Freeware.

Jetzt starten
Newsletter

E-Mail Marketing Know-how kostenlos und frei Haus.



Hotline

Sie haben Fragen zum sitepackage:// Newsletter System? Rufen Sie uns an!

Wir beraten Sie gern unter
+49 (0)431 97997220

Feature Sheet

Erhalten Sie einen vollständigen Überblick über alle Funktionen des sitepackage:// Newsletter-Systems. Holen Sie sich einfach das Feature Sheet als PDF-Download!

Herunterladen
Über den Autor

Lars Müller

Lars Müller

Geschäftsführer
wigital GmbH