Unterscheidung:
Wann wird die mobile oder die herkömmliche Version einer Webseite angezeigt?
Die Entscheidung, ob die mobile oder die herkömmliche Variante einer Webseite angezeigt wird, sollte man nicht dem Endgerät überlassen. Es besteht zwar die Möglichkeit, nach Media getrennte Stylesheet-Dateien zu hinterlegen, doch diese Unterscheidung wird vom Gerät nicht immer korrekt erkannt.
Besonders ältere Browser unterscheiden die Medientypen "screen" und "handheld" nicht. Gleiches gilt für eine große Anzahl mobiler Geräte. Im mobilen Bereich betrifft es allerdings nicht unbedingt nur ältere Geräte, sondern auch hochmoderne Smartphones. Für sie ist wahrscheinlich die Deklaration als Handheld „unter Niveau“, da sie ja „richtige“ Browser beinhalten.
Beispiel für zwei getrennte Stylesheet-Dateien:
<link rel="stylesheet" href="style_mobile.css" media="handheld" />
Eine andere Möglichkeit besteht darin, Media-Queries zu verwenden:
In diesem Beispiel gilt die Stylesheet-Datei nur für Geräte mit einer maximalen Bildschirmbreite von 480px. Aber auch diese moderne CSS3-Variante wird nicht modellübergreifend korrekt interpretiert.
Daraus resultierend muss man serverseitig dafür Sorge tragen, dass die richtige Variante einer Webseite ausgeliefert wird. Sehr gut geeignet ist hierfür die Steuerung über den Useragent des jeweiligen Browsers oder des mobilen Gerätes. Der Useragent lässt sich mit dynamischen Scriptsprachen, wie z.B. PHP, ASP, ColdFusion oder auch per Javascript (würde ich nicht empfehlen) auslesen und auswerten.
Unterscheidung auf Basis des Useragent treffen
Das folgende PHP-Beispiel soll nur das Prinzip verdeutlichen und ist keinesfalls vollständig. Aktuelle und komplette Listen von Useragents mobiler Geräte findet man aber relativ schnell im Internet.
$arrMobiles= array("sony","nokia","mini","mobi","blackberry","iphone");
$bolMobile = false;
foreach ($arrMobiles as $key=>$value) {
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),$value)!==false){
$bolMobile = true;
break;
}
}
if ($bolMobile === true) { // mobile Variante
$strHtml = '<DOCTYPE ....'."\n";
$strHtml.= '<head>'."\n";
$strHtml.= '<link rel="stylesheet" href="style-mobile.css" />'."\n";
} else { // normale Variante
$strHtml = '<DOCTYPE ....'."\n";
$strHtml.= '<head>'."\n";
$strHtml.= '<link rel="stylesheet" href="style.css" />'."\n";
}
echo $strHtml;
?>
Anhand der Erkennung als mobiles Gerät oder als konventioneller Browser, hat man im Script die Möglichkeit, den zutreffenden DOCTYPE auszuwählen, die passende Stylesheet-Datei einzufügen oder andere Unterscheidungen zu treffen.
Diese Umleitungen sind generell auch innerhalb der .htaccess-Datei über Rewrite-Regeln möglich. Diese Variante bietet sich besonders dann an, wenn man auf dem Webserver keine dynamischen Scriptsprachen zur Verfügung hat. Eine gute englische Anleitung hierfür finden Sie im Blog von Ryan.
Umleitung auf Subdomain oder anderes Verzeichnis
Des Weiteren kann man auch anhand des Useragents den Aufruf auf eine spezielle Subdomain (z.B. http://mobile.meine-seiten.de) oder in ein spezielles Verzeichnis (z.B. http://www.meine-seiten.de/m/) umleiten, in dem man einen alternativen Webauftritt anbietet.
Wenn Sie auf alternative Webseiten für mobile Geräte umleiten, so sollten Sie auf jeden Fall dafür Sorge tragen, dass der Inhalt Ihrer Webseiten nur in einer Version von Suchmaschinen durchsucht wird, da der Inhalt sonst möglicherweise von Suchmaschinen als doppelter Content interpretiert wird. Dies könne zur Herabstufung Ihrer Webseiten im Ranking führen. Leiten Sie deshalb die Suchmaschinen gezielt auf eine Version Ihrer Webseiten oder sperren Sie eine Version Ihrer Webseiten für Suchmaschinen. Dies kann z.B. in robots.txt realisiert werden.