Unterscheidung:
Wann wird die mobile oder die herkömmliche Version einer Webseite angezeigt?
Update: 30.06.2013
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-Type 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 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" />
Da sich in letzter Zeit der mobile Markt rasant entwickelt hat und kaum noch jemand über ein Handy surft, sondern meist Smartphones oder Tablets zum Einsatz kommen, würde ich eher Media-Queries empfehlen:
In diesem Beispiel gilt die Stylesheet-Datei nur für Geräte mit einer maximalen Bildschirmbreite von 480px. Wenn man sich mit Media-Queries intensiver beschäftigt, ist man ganz schnell auf dem Weg zu responsive Webdesign. Eine Website responsive zu gestalten, sehe ich aktuell als die „state of the art“ Technik, um alle möglichen Webseitenformate abzudecken.
Unterscheidung auf Basis des Useragent treffen
Wer (noch) nicht von responsive Webdesign überzeugt ist, kann die Auslieferung der Inhalte auch über die Auswertung des User-Agents steuern. 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. 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 $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.