Nein, es geht hier nicht um ein kaputtes Telefon, sondern um einen Kundenwunsch. Einer meiner Kunden kam auf mich zu und fragte: "Die Telefonnummer auf der Kontaktseite kann man ja gar nicht anklicken, da passiert gar nichts. Ich kenne das aber anders, dass man da auf eine Nummer tippt und dann wird man sofort mit der Nummer verbunden."

"Okay", antwortete ich, "das ist kein Problem. Wir können die Telefonnummer auf der Website so verlinken, dass man darauf klicken oder tippen kann und dann mit dieser Telefonnummer verbunden wird."

Nachdem wir noch Ziele und Anforderungen (die werden auch gerne "Features" genannt) abgesprochen hatten, setzte ich mich an den PC und wollte rasch die verlangten Features programmieren. Aber so einfach, wie ich mir das vorstellte, ging es dann doch nicht.

Ziel: Mehr Bedienkomfort

Als Ziel hatten wir festgelegt, dass die Besucherinnen und Besucher der Kunden-Website nicht nur über die Kontaktdaten informiert werden; sie sollen auch die komfortable Möglichkeit bekommen, meinen Kunden per Smartphone direkt anzurufen – ohne vorher die Nummer zu speichern oder einen Kontakt anzulegen. Das geht mit einem normalen Link in einem a-Element: das Link-Attribut trägt dann den Wert "tel" plus Telefonnummer. Der Aufbau dieses Links sieht dann so aus:

<a href="tel:+4956784321">Direkt anrufen!</a>

Anforderungen: Telefonnummer einmal ohne und einmal mit Link

Das Ganze verpacken wir dann noch in einen schönen Button, sodass der Finger auf dem Smartphone auch bestimmt nicht daneben tippt.

Auf dem Desktop soll dieser Button nicht auftauchen, sondern eine einfache Anzeige der Telefonnummer, so wie es in diesem Screenshot dargestellt ist:

Auf dem Smartphone wird ein Button mit der Telefonnummer zu sehen sein:

Problem: Telefon-Button funktioniert nicht in Desktop-Browsern

Warum wird die Telefonnummer zweimal in den HTML-Code geschrieben? Wir kennen den Link, der uns zu anderen Webseiten führt:

<a href="andere-webseite.html">Andere Webseite</a>

und den Link, der unser Mailprogramm aktiviert:

<a href="mailto:email@adresse.de">E-Mail an ...</a>

Es gibt noch eine weitere Variante: Das a-Element mit dem href-Attribut weist den Wert "tel" auf, womit eine Telefonnummer verlinkt wird.

<a href="tel:+49123987654">Rufen Sie uns an!</a>

Da Desktop-Browser den Wert "tel" in einem Link nicht verstehen, zeigen sie bei einem Klick auf einen solchen Link eine Fehlermeldung an:

Um nun

1. zu vermeiden, dass solche Fehlermeldungen die User verwirren und
2. auf Smartphones einen Button anzubieten, mit dem man direkt anrufen kann,

habe ich als Provisorium, bis auch Desktop-Browser "tel" richtig interpretieren, folgende Lösung erarbeitet.

Lösung: Ein- und Ausblenden der Telefonnummern für verschiedene Bildschirmgrößen

Der HTML-Code

Die Telefonnummer wird einmal im a-Element mit dem href-Attribut und dem "tel-Wert" (das ist der Button mit dem Link für Smartphones) in den HTML-Code geschrieben und dann als span-Element ohne Link (das ist die statische Variante für Desktop-PCs) wiederholt.

<p>Telefon:&nbsp; <a class="button hide-on-large" href="tel:+491234567890"> +49 (0)123 456 789</a><span class="hide-on-small">: +49 (0)123 456 789</span></p>

Das a-Element führt die Klasse "button", mit der wir den Link gestalten (s. u.), und die Klasse "hide-on-large", mit der wir diesen Button auf Screens über 767 Pixel Größe aus dem sichtbaren Bereich hinausschieben.

Das span-Element besitzt die Klasse "hide-on-small": Es wird auf Bildschirmen unter 768 Pixel Größe unsichtbar, indem wir es ausblenden.

Erläuterungen

Der CSS-Code 1. Teil

Die Telefonnummer mit Button und Link ist auf Bildschirmen bis 767 Pixel gut sichtbar und verführt zum Anrufen. Gleichzeitig wird die statische Variante mittels der Klasse "hide-on-small" aus Bildschirmen unter 768 Pixel Größe ausgeblendet: Wir geben der Eigenschaft "display" im CSS-Code den Wert "none;".

/* Ausblenden der statischen Telefonnummer auf kleinen Displays */
.hide-on-small {
    display: none;
}

Wir können hier display: none;" bedenkenlos einsetzen, denn wir möchten in diesem Fall nicht, dass die Telefonnummer zweimal auftaucht. Wir vermeiden hier nur doppelten Content.

Der CSS-Code 2. Teil

Nun kümmern wir uns um das Aussehen der Telefonnummer auf größeren Bildschirmen. Die Variante mit Link und Button wird für Screens über 767 Pixel aus dem sichtbaren Bereich geschoben.

Dafür positionieren wir den Absatz absolut und verschieben ihn per hoher negativer Werte aus dem Bildschirm. Hier nutzen wir nicht "display: none;", damit wir die Klasse "hide-on-large" auch für andere Fälle anwenden können, in denen es notwendig ist, dass Screenreader den verborgenen Inhalt erfassen können.

Wichtig: Wir nutzen das Media Query "@media screen and (min-width: 768px)" und sagen damit dem Browser, dass er die folgenden Anweisungen nur für Bildschirme ab 768 Pixel ausführt:

@media screen and (min-width: 768px) {

/* Verschieben des Buttons mit der Telefonnummer auf großen Displays */
.hide-on-large {
    position: absolute;
    top: auto;
    left: -30000px;
}

} /* Ende media screen and (min-width: 768px) */

Der CSS-Code 3. Teil

Die Telefonnummer im span-Element wird auf größeren Bildschirmen wieder eingeblendet, indem wir die Klasse "hide-on-small" auf "display: inline;" setzen und damit in den Ausgangswert zurückkehren (span ist ein Inline-Element).

Wir arbeiten wieder mit "@media screen and (min-width: 768px)" für Bildschirme ab 768 Pixel:

@media screen and (min-width: 768px) {

/* Einblenden der statischen Telefonnummer auf großen Displays */
.hide-on-small {
    display: inline;
}

} /* Ende media screen and (min-width: 768px) */

Übersicht

Der Code auf einen Blick

Der HTML-Code:

<p>Telefon:&nbsp; <a class="button hide-on-large" href="tel:+491234567890"> +49 (0)123 456 789</a><span class="hide-on-small">: +49 (0)123 456 789</span></p>

Hier nun der komplette CSS-Code mit Anweisungen für die Gestaltung des Buttons:

/* Ausblenden der statischen Telefonnummer auf kleinen Displays */
.hide-on-small {
    display: none;
}

@media screen and (min-width: 768px) {

/* Verschieben des Buttons mit der Telefonnummer auf großen Displays */
.hide-on-large {
    position: absolute;
    top: auto;
    left: -30000px;
}

/* Einblenden der statischen Telefonnummer auf großen Displays */
.hide-on-small {
    display: inline;
}

} /* Ende media screen and (min-width: 768px) */


/* Gestaltung des Buttons: http://css3buttongenerator.com/ */
.button {
  background: #efefef;
  background-image: -webkit-linear-gradient(top, #efefef, #cccccc);
  background-image: -moz-linear-gradient(top, #efefef, #cccccc);
  background-image: -ms-linear-gradient(top, #efefef, #cccccc);
  background-image: -o-linear-gradient(top, #efefef, #cccccc);
  background-image: linear-gradient(to bottom, #efefef, #cccccc);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #333333;
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  border: solid #333333 1px;
  text-decoration: none;
}

.button:hover {
  background: #DEDEDE;
  background-image: -webkit-linear-gradient(top, #DEDEDE, #BFBFBF);
  background-image: -moz-linear-gradient(top, #DEDEDE, #BFBFBF);
  background-image: -ms-linear-gradient(top, #DEDEDE, #BFBFBF);
  background-image: -o-linear-gradient(top, #DEDEDE, #BFBFBF);
  background-image: linear-gradient(to bottom, #DEDEDE, #BFBFBF);
  text-decoration: none;
}

Testen Sie den Button

Hier sehen Sie die funktionsfähigen Varianten für Bildschirme größer als 767 Pixel (statische Variante) oder, wenn Sie dies mit einem Smartphone lesen, kleiner als 768 Pixel (klickbare Button-Variante).

Verschiedene Bildschirmgrößen können Sie im Browser Firefox mit der Tastenkombination "Umschalt + STRG + M" aktivieren (und wieder deaktivieren).

Hier gibt es eine Anleitung, wie dies im Browser Chrome funktioniert: Diverse Bildschirmgrößen mit Chrome testen.

Telefon:  +49 (0)123 456 789 +49 (0)123 456 789

Links

Spezifizierungen zum a-Element

Spezifizierungen zum href-Attribut

Mehr zu Media Queries

Hier erfahren Sie, wie Sie mit dem Browser Firefox verschiedene Bildschirmgrößen testen können.

Hier gibt es eine Anleitung, wie dies im Browser Chrome funktioniert: Diverse Bildschirmgrößen mit Chrome testen.

Mehr zum Thema Verstecken von Inhalten und Zugänglichkeit.