Mobile Webseite im LG Optimus 7 e900

Webseiten für Mobilgeräte optimieren

Da immer mehr Webseitenzugriffe über mobile Geräte wie Smartphones oder Tablets erfolgen, sollte man die eigene Webseite für diese optimieren.

Ein mobiles Endgerät erkennen

Um eine Webseite für ein Smartphone oder ein Tablet optimieren muss man dieses erst erkennen. Hat man das Gerät erkannt (in unserem Fall via PHP), kann man wie folgt verfahren:

Umleitung

Es besteht die Möglichkeit eine neue Webseite zu erstellen, auf die man das Mobilgerät umlenken kann.

<?php
$useragent=$_SERVER&#91;'HTTP_USER_AGENT'&#93;;
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50&#91;1-6&#93;i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez(&#91;4-7&#93;0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-&#91;a-w&#93;)|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10&#91;0-2&#93;|n20&#91;2-3&#93;|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-(&#91;1-8&#93;|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-&#91;2-7&#93;|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5&#91;0-3&#93;|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://detectmobilebrowser.com/mobile'); //Wenn Mobilgerät, dann umleiten
?>

Inhalt filtern

Eine weitere Methode kann das Filtern von Inhalten sein. In unserem Beispiel wird am Anfang entschieden, ob es sich um ein Mobilgerät handelt oder nicht. Auf der weiteren Webseite kann man daraufhin mit einer einfachen if Abfrage entscheiden, wie etwas auf dem Mobilgerät oder auf dem Desktop angezeigt werden soll.

<?php
$useragent=$_SERVER&#91;'HTTP_USER_AGENT'&#93;;
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50&#91;1-6&#93;i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez(&#91;4-7&#93;0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-&#91;a-w&#93;)|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10&#91;0-2&#93;|n20&#91;2-3&#93;|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-(&#91;1-8&#93;|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-&#91;2-7&#93;|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5&#91;0-3&#93;|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
$mobil = true; // Mobilgerät erkannt
else {
$mobil = false; //Kein Mobilgerät erkannt
}
?>

if($mobil == true) {
echo '<link href="mobil.css" rel="stylesheet" type="text/css" media="all" />'; //Wenn Mobilgerät, dann dieses Stylesheet verwenden;
}
else {
echo '<link href="style.css" rel="stylesheet" type="text/css" media="all" />'; //Andernfalls Desktopversion verwenden;
}

Quelle: PHP Code stammt von detectmobilebrowsers.com

Stylesheet anpassen

CSS solltet ihr können, daher werde ich hierzu nur wenig sagen. Wenn ihr allerdings solch ein Konstrukt verwendet, empfehle ich Euch die Breite des Wrappers an den Viewport (wird gleich erklärt) anzupassen oder Du nutzt eine flexible Breite. Ist dies nicht der Fall (Wrapper größer als Viewport) muss der Nutzer nicht nur vertikal sondern auch horizontal scrollen, um den kompletten Inhalt sehen zu können. Wenn Du die Flexible Breite beim Viewport verwendest, solltest Du natürlich auch mit prozentualen Breiten in Deinem Stylesheet arbeiten.

<html>
  <head>
  </head>
  <body>
    <div id="wrapper">

      <div id="header">
        <!-- Inhalt -->
      </div>

      <div id="main">
        <!-- Inhalt -->
      </div>

      <div id="footer">
        <!-- Inhalt -->
      </div>

    </div>
  </body>
</html>

Viewport

Der Viewport ist ein wichtiges Werkzeug, um eine Webseite auf Mobilgeräte anzupassen. Dieser legt in erster Linie die Breite des zu sehenden Feldes fest. Bei einer statischen Breite ist es ratsam nur einen Wert von 320 Pixeln zu nehmen oder eben die dynamische Variante zu verwenden.

<head>
  <!-- Vorgegebene Breite -->
  <meta name="viewport" content="width=400" />

  <!-- Flexible Breite -->
  <meta name="viewport" content="width=device-width" />
</head>
  • user-scalable: Dieses Attribut kann es dem Nutzer verbieten (no) oder erlauben (yes) auf der Webseite zu zoomen
  • initial-scale: Dieses Attribut legt die anfänglichen Zoom Größe fest. In der Regel sollte der Standard Zoomgrad von 1.0 genügen
  • minimum-scale und maximum-scale: Dieses Attribut kann die maximale bzw. minimale Vergrößerung durch den Benutzer einschränken
<meta name="viewport" content="width=400, initial-scale=1.0, user-scalable=no" />

Webseiten für Smartphones zu optimieren, indem man den „HTTP_USER_AGENT“ ausliest kann man machen. Mittlerweile gibt es allerdings auch CSS Methoden, um für bestimmte Bildschirmgrößen zu entwickeln (Stichwort: „Media queries“).
Unsere Webseite soll in Zukunft auch für Mobilgeräte optimiert sein. Momentan fehlt allerdings die nötige Zeit um dies zu bewerkstelligen. Trotzdem hoffe ich, dass Dir der Artikel gefallen hat. Wie immer freuen wir uns über Kommentare 😉 .

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.