Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
Mobile Webseiten
08.03.2011

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.css" media="screen" />
<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:

<link rel="stylesheet" href="style_mobile.css" media="only screen and (max-device width:480px)"/>

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.

<?PHP
  $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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

14

Kommentare:

17.Juni2013

Hallo Harry,

erst ein mal vielen Dank,für das tolle Skript. Ich habe nur folgendes Problem damit:
Die Desktop Version meiner Webseite ist in PHP. Alle URLs enden also mit .php - meine mobile Version habe ich im nachhinein mit jquery und html erstellt, die urls enden mit .html. (bis auf die Kontaktseite,die endet wiederum mit .php)
Wenn ich Dein Skript unverändert einbinde, dann wird von
www.beispieldomain.de (wo eine index.php hintersteckt) auf m.beispieldomain/index.php weitergeleitet. richtig wäre aber .html.
Wie kann ich das Skript entsrechend anpassen?
Vielen Dank für die Hilfe!

17.Juni2013

Ich sehe drei Möglichkeiten:
a) Du benennst deine Seiten von .html auf .php um. Das Laden der Webseiten dauert dann zwar einen Tick länger, da alle Webseiten über den PHP-Interpreter geparst werden - wird aber funktionieren.
b) Du passt die Klasse an und erstetzt bei den Webseiten, die auf .html enden mit str_replace die Extension.
c) Du schaltest in deiner .htaccess ein redirekt von .php auf .html (allerdings nur für das mobile Verzeichnis)

Ich würde Variante a) empfehlen => ist am Einfachsten.

Gruß Harry

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.