marcelsarman

Telefonnummern auf Smartphones anklickbar machen

In HTML und CSS on August 22, 2016 at 6:08 pm

Viele Smartphones erkennen Telefonnummern auf Webseiten automatisch und man kann direkt auf die Nummern klicken und dadurch wird die entsprechende Nummer übernommen und man muss nur noch auf die Telefontaste drücken um dort anzurufen. Bei vielen Geräten funktioniert die automatische Rufnummernerkennung jedoch nicht und der User muss die Nummer erst umständlich in sein Smartphone eingeben, um mit der Firma Kontakt aufnehmen zu können.

Mit dem HTML a-Tag (HTML-Anker-Element) kann dieses Problem jedoch behoben werden. Mit href (hyper reference bzw. Hypertext-Referenz) wird innerhalb des a-Tags auf das gewünschte Linkziel verwiesen.
Im einfachsten und bekanntesten Fall wird mit href auf eine andere externe Webseite verwiesen:
<a href="http://www.google.de">Google</a>

Durch den mailto Befehl kann auf eine Emailanschrift verwiesen werden und bei Klick auf den Linktext öffnet sich das beim User installierte E-Mail-Programm (Outlook) mit der bereits eingegebenen Empfängeradresse, so dass sofort mit dem Schreiben der Email begonnen werden kann.
<a href="mailto:info@mustermann.de">Email senden</a>

telefon_3

Mit tel: gibt es die Möglichkeit auf Telefonnummern zu verweisen und diese anklickbar und damit schneller anrufbar zu machen.
<a href="tel:+49815123456">0815 123456</a>

Diese eigentlich fürs Smartphone gedachte Variante hat allerdings einen großen Nachteil auch auf dem Desktop ist der Link nun anklickbar

klickt der normale Nutzer am PC auf diesen Link bekommt er im Firefox folgende Fehlermeldung angezeigt.
telefon_1

Zur Behebung dieses Problems gibt es zwei Lösungsmöglichkeiten:

1. Die CSS-Lösung

Man muss nun also im CSS den Link so stylen, dass er am Desktop-PC nicht als Link identifiziert werden und am besten auch nicht versehentlich angeklickt werden kann. Dazu entfernt man die Unterstreichung text-decoration:none und setzt die Schriftfarbe color:black des Links auf schwarz, nun ist der Link nicht mehr vom übrigen Text zu unterschieden. Allerdings kann er jetzt immer noch angeklickt werden und ändert beim überfahren mit der Maus seine Schriftfarbe. Durch pointer-events:none ist der Link nicht mehr ausführbar und die Pseudoklassen :visited für besuchte Links und :hover für gerade berührte Links werden auch auf schwarze Schrift gesetzt, so dass sich die Schriftfarbe des Textes jetzt nicht mehr ändert. Durch cursor:text wird als Mauszeiger der Textcursor angezeigt, so dass der Link auf dem Desktop-PC endgültig nicht mehr als Link zu erkennen ist.

Nun muss nur noch dafür gesorgt werden, dass der Link auf dem Smartphone – weniger als 480px Bildschirmbreite – @media only screen and (max-device-width: 480px) als Link zu erkennen ist. Dies kann durch Einstellen der Standardeinstellung für Links, nämlich blau color:blue und unterstrichen text-decoration:underline leicht durchgeführt werden.

Der HTML-Code:

<a href="tel:+49815123456" class="phone">0815 123456</a>

Der CSS-Code:

.phone,.phone:visited,.phone:hover{
color:black;
text-decoration:none;
pointer-events:none;
cursor: text;
}

@media only screen and (max-device-width: 480px) {

.phone{
color:blue;
text-decoration:underline;
}

}

Anmerkung:
Natürlich gibt es auch die Möglichkeit die Telefonnummer einmal als Link und einmal ohne Link hinzuschreiben und für die PC bzw. Smartphone Version die jeweiligen Nummern einzublenden display:block bzw. auszublenden display:none, so dass auf dem jeweiligen Ausgabegerät nur die jeweils gültige Version zu sehen ist, allerdings stehen bei dieser Variante immer beide Möglichkeiten im Quelltext und sind somit für die Suchmaschinen sichtbar, grundsätzlich sollte es vermieden werden, dass im Quelltext HTML-Tags stehen, die durch CSS ausgeblendet werden. Daher wird diese Lösung hier nicht weiter ausgeführt.

2. Die PHP-Lösung

Die PHP-Lösung ist erheblich einfacher und kommt mit viel weniger Code aus. Die Idee ist ganz simpel: Zunächst wird mit einer Browserweichen-Funktion detect_mobile() festgestellt, ob der Nutzer mit einem Smartphone auf die Seite zugreift. Wenn ja if(detect_mobile()) wird ihm die Telefonnummer als Link angezeigt, wenn er nicht else mit einem Smartphone surft, also mit einem gängigen PC auf die Seite zugreift, wird ihm die nicht verlinkte Telefonnummer angezeigt. Diese Lösung kommt ohne eine einzige Zeile CSS aus.

Der PHP-Code:

if(detect_mobile()){
echo '<a href="tel:+49815123456" class="phone">0815 123456</a>';
}
else{
echo '<p>Telefon: 0815 123456</p>';
}

function detect_mobile()
{
    if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT']))
        return true;
 
    else
        return false;
}

Die häufigsten Fehler auf Webseiten 2

In allgemeine Tipps on Juni 17, 2014 at 9:33 am

Leichte Bedienbarkeit
Fehler 1: kompliziertes Kontaktformular
Das Kontaktformular soll in der Regel zur schnellen Kontaktaufnahme dienen in den allermeisten Fällen ist vom Kunden ein telefonischer Rückruf erwünscht. Deshalb ist es für die erste Kontaktaufnahme meist unerheblich in welcher Strasse der Kunde wohnt oder welche Postleitzahl der Kunde hat. Zu viele Eingabefelder schrecken ab und sorgen eher dafür, dass der Kunde kein Formular ausfüllt und zur Konkurrenz geht erfahrene User wissen meist, dass nur Felder mit einem * Stern ausgefüllt werden müssen und der Rest der Eingabefelder daher nicht unbedingt ausgefüllt werden muss, allerdings gibt es auch viele User, die davon ausgehen, dass alle Felder ausgefüllt werden müssen. Es gilt bei Formularen, dass so wenig Felder wie nötig verwendet werden sollten, um die User auch tatsächlich dazu zu animieren, dass vorhandene Formular zu nutzen.

kf_1
Ein solches Formular ist schon zu kompliziert die Anzahl der Felder ist abschreckend und die Unterscheidung zwischen Pflichtfeldern und den übrigen Eingabefeldern bedeutet eine unnötige Komplikation. Am besten die Felder, die nicht unbedingt benötigt werden werden auch nicht aufgeführt:

kf_1
Fehler 2: schwer bedienbare Navigation

Die Navigation sollte
– klar als Navigation erkennbar
– und leicht bedienbar sein

Die Navigation sollte sich klar vom restlichen Inhalt abheben die Schrift sollte größer sein als die übrige Schrift im normalen Fließtetxt oder eine andere Hintergrundfarbe haben, um die Bedienbarkeit zu erleichtern:
kf_1
Durch eine größere Schrift und eine andere Hintergrundfarbe kann die Bedienbarkeit der Navigation erheblich verbessert werden:

kf_1

Wenn Buttons verwendet werden sollte die „Trefferfläche“ ausreichend groß sein, oftmals ist es schwierig ein Menü richtig zu bedienen, wenn die Buttons zu klein sind oder die Abstände zwischen den Buttons nicht groß genug sind, so dass man versehentlich einen anderen Menüpunkt bedient.

kf_1

mehr zur Gestaltung von Navigationen:

Die häufigsten Fehler auf Webseiten 1

In allgemeine Tipps on Juni 16, 2014 at 12:35 pm

Jeder Webseitenbetreiber stellt sich die Frage, ob seine Webseite „gut“ ist. Dabei wird diese Bewertung häufig sehr vereinfachend vorgenommen, gefällt eine Webseite optisch ist sie „gut“, gefällt sie nicht ist
sie „schlecht“. Diese Bewertung ist aber nicht zielführend, zumal Schönheit immer im Auge des Betrachters liegt. Bessere Kriterien für die Beurteilung der Qualität einer Webseite sind, ob diese Seiten

– gut zu lesen
– leicht bedienbar
– übersichtlicht gestaltet
– durch Suchmaschinen gut zu finden
– und auf mobilen Geräten problemlos funktionieren

Die schönste Webseite ist wirkungslos, wenn diese Kriterien nicht erfüllt sind. Die Webseite kann als Schaufenster des Unternehmens verstanden werden, es nützt daher nichts, wenn die Webseite optisch ansprechend ist, aber nicht zum Kauf eines Produktes oder zur Bestellung einer Dienstleistung anregt. Außerdem muss natürlich jeder Kunde das Schaufenster problemlos betrachten können. Immer mehr Menschen gehen mit Ihrem Smartphone online, wenn diese Menschen eine Webseite nur sehr schwer bedienen können, sind sie als potentielle Kunden für das Unternehmen verloren.

Text bzw. Schrift – was muss beachtet werden:

Fehler 1: Unklare Bezeichnungen
Die Webseitenbesucher müssen die Ausdrücke auf der Webseite verstehen, daher muss sich die Sprache an den Besuchern der Webseite orientieren und nicht umgekehrt, es darf nicht erwartet werden, dass die Besucher die Fachausdrücke aus den jeweiligen Bereichen problemlos verstehen.
Give us all a call sollte daher vermieden werden und durch So erreichen Sie uns oder ähnliches ersetzt werden. Im Internetbereich sollte statt von SEO lieber von Suchmaschinenoptimierung und statt von Usability besser von einfacher Bedienbarkeit einer Webseite gesprochen werden.

Fehler 2: Zu kleine oder schlecht lesbare Schrift
Können die Texte auf der Seite nur mit Mühe gelesen werden, werden die meisten Besucher die Seite schnell wieder verlassen. Es kommt nicht auf eine möglichst kunstvolle gestaltete Schrift, sondern auf gute Lesbarkeit an. Eine kleine Schriftart mag zwar gut aussehen, eine Webseite ist aber kein abstraktes Kunstwerk, sondern soll Informationen liefern und den Umsatz steigern, daher ist Lesbarkeit das wichtigste Kriterium.

test_1
test_1
test_1

Fehler 3: Kein ausreichender Kontrast zwischen Hintergrund und Vordergrund
Am besten lesbar ist immer noch der Klassiker: schwarze Schrift auf weissem Grund. Hier ist der Kontrast am größten, möchte man die Schriftfarbe oder die Hintergrundfarbe variieren, kommt es auf den Kontrast zwischen beiden an. Dunkelgraue Schrift ist auf weissem Hintergrund nocht recht gut lesbar, während dunkelgraue Schrift auf hellgrauem Hintergrund nur schwer lesbar ist.
beispiel_1
beispiel_1
Weisse Schrift auf schwarzer Hintergrund verfügt zwar über einen ausreichenden Kontrast, jedoch ist diese Kombination besonders bei längeren Texten sehr anstrengend zu lesen, so dass befürchtet werden muss, dass die Inhalte nicht richtig wahrgenommen werden.

Folgen

Erhalte jeden neuen Beitrag in deinen Posteingang.