Website-Optimierung für mobile Endgeräte (Smartphones, Tablets)

Optimierung für mobile Endgeräte

Immer mehr Nutzer gehen mit dem Handy, einem Smartphone oder einem Tablet-PC ins Internet. Jede Website sollte daher auch auf solchen mobilen Endgeräten zugänglich und benutzbar sein. Die folgende Übersicht listet die wichtigsten Punkte auf, die hierfür zu beachten sind.

Erkennung von mobilen Endgeräten

Zunächst müssen Besucher, die mobil surfen, zuverlässig erkannt werden. Dies geschieht über den so genannten User-Agent. Der User-Agent ist eine Kennung, die der Webbrowser an den Server überträgt und sieht z.B. so aus:

Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.15 (KHTML, like Gecko) Chrome/24.0.1295.0 Safari/537.15
(Google Chrome auf Windows 7)

Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; en) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.1.0.346 Mobile Safari/534.11+
(Blackberry Smartphone)

In einer vereinfachten Variante kann man nun den User-Agent auf das Vorhandensein bestimmter Stichworte überprüfen, die auf ein mobiles Endgerät hinweisen. In PHP könnte das so aussehen:

$keywords = array('BlackBerry','Handheld','Mobile','Nokia','Opera Mini','Pocket','Portable','Smartphone','Windows CE', ... ); foreach($keywords AS $key) if($_SERVER["HTTP_USER_AGENT"] && stristr($_SERVER["HTTP_USER_AGENT"],$key)) $mobile = 1;

Damit mobile Endgeräte zuverlässig erkannt werden, muss die Keyword-Liste aber gepflegt und aktuell gehalten werden. Empfehlenswerter ist daher eine professionelle und immer aktuell gehaltene Variante wie z.B. die PHP-Klasse von mobiledetect.net .

Bei statischen HTML-Seiten ist die Erkennung von mobilen Endgeräten nicht möglich.

Eine oder zwei Versionen?

Prinzipiell gibt es zwei Möglichkeiten, den für mobile Endgeräte optimierten Webinhalt anzubieten:

eine zweite, völlig separate Version, die speziell für Smartphones & Co. optimiert ist

Es hat sich eingebürgert, diese auf einer Subdomain namens "m" oder "mobile" bereitzustellen. Z.B.:
normale Version: http://bahn.de
mobile Version: http://m.bahn.de
Es gibt nur eine Version. Bei Erkennung eines mobilen Endgeräts wird automatisch ein modifizierter Inhalt angezeigt.

Webseiten für mobile Endgeräte

Folgende Besonderheiten sind bei Handys, Smartphones und Tablets zu berücksichtigen:

das Display ist kleiner
die Internetverbindung ist langsamer
statt mit der Maus wird per Touchscreen navigiert
Plugins wie Flash oder Java sind - je nach Endgerät - evtl. nicht vorhanden oder abgeschaltet

Insgesamt sollte die Version für mobile Endgeräte (Smartphones, Tablets) möglichst schlank, übersichtlich und auf das wesentliche reduziert sein. Daraus ergeben sich u.a. folgende Ansatzpunkte für eine Optimierung:

Bilder: Optimierung der Maße und Dateigröße, für nicht zu große Darstellung und schnellere Ladezeiten
Layout: Die Gestaltung des Kopfbereichs (Head) mit dem Logo ist so anzupassen, dass er auf dem kleinen Display gut aussieht
die Schrift sollte nicht zu klein sein, damit sie lesbar bleibt
das Layout sollte einspaltig sein, d.h. linear von oben nach unten.
Quelltext: Der HTML-Code sollte möglichst schlank geschrieben sein, um die Ladezeiten zu verkürzen. Javascript und CSS-Styles sollten in eine externe Datei ausgelagert werden.
Inhalt: Noch mehr als sonst sollte der Schwerpunkt der Präsentation auf den Inhalten liegen. Drumherum, das nur dem Betreiber nützt (z.B. Werbebanner und Tracking-Skripte), sollte auf ein vernünftiges Maß reduziert oder ganz abgeschaltet werden, um Platz und Ladezeiten zu sparen. Ebenso unnötiges Beiwerk wie z.B. Animationen oder Hintergrundmusik.
Navigation:
eine Menüleiste am linken Rand beansprucht Platz auf Kosten des Inhalts; daher ist sie besser oben, über dem Inhalt aufgehoben
die Navigation sollte nicht verschachtelt sein, sondern auf die wichtigsten Punkte reduziert werden
keine Hover-Effekte (aufklappende Menüs), da diese wegen fehlender Maus nicht funktionieren

Browser-Simulation – Wie sieht die Seite auf einem Smartphone aus?

Folgende Online-Tools simulieren die Darstellung einer Webseite auf einem mobilen Endgerät. Bei einigen kann auch das Handy-Modell und die Display-Größe ausgewählt werden.

Spezielle Meta-Angaben

Mit folgender Meta-Angabe können Sie eine für mobile Endgeräte optimierte Version Ihrer Website kennzeichnen:

<meta name="HandheldFriendly" content="true">