Webseiten für Mobilgeräte erstellen

Die große Verbreitung von mobilen Geräten stellt Webdesigner und -Entwickler vor neue Herausforderungen. Machen Sie Ihren Internet-Auftritt mobil.

Voraussetzungen Der wichtigste Unterschied bei der Darstellung einer Webseite auf dem Notebook oder PC ist die Displaygröße. Für die mobilen Geräte sind oft die Bilder zu groß und der drei- oder vierspaltige Aufbau der Seite viel zu breit. Mobile Browser wie Opera Mini und Opera Mobile versuchen daher, das Seitenlayout einspaltig darzustellen und Bilder zu verkleinern und zu komprimieren. Das Ergebnis hängt stark von der jeweiligen Webseite ab. Stellen Sie also lieber selbst eine Alternative zur Verfügung. Einfacher haben Sie es, wenn Sie ein Joomla-CMS oder Wordpress-Blog betreiben: Praktische Erweiterungen sorgen für die korrekte Anzeige auf Mobilgeräten.

Beim Einsatz von CSS zur Seitengestaltung lassen sich für unterschiedliche Medientypen verschiedene Stylesheets hinterlegen. Manche Webseiten halten so beispielsweise unterschiedliche Formatierungen für die Bildschirmausgabe und den Druck bereit.

Auch die Ausgabe auf Smartphones und Tablets lässt sich mit einem Medientyp vorgeben. Dabei erstellen Sie für den Computer und Mobilgeräte jeweils eine eigene CSS-Datei und fügen anschließend folgende Zeilen in den -Bereich Ihrer HTML-Seite ein:

1
2

<link rel="stylesheet" type="text/css" media="screen" href="pc.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="phone.css" />

Mit CSS3 können Sie die Anzeige auch an der Bildschirmauflösung festmachen. Folgende Zeile sorgt dafür, dass bei einer Bildschirmbreite von maximal 480 Pixeln ein eigenes Stylesheet „klein.css“ verwendet wird:

1
2

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

In diesem Stylesheet können Sie dann das Seitenlayout ebenso anpassen wie die Schriften. Bei Bildern sollten Sie nur die Darstellungsgröße ändern und nicht ein kleineres Bild verwenden. Alternativ greifen Sie zu einem Trick: Wenn Sie Bilder als Hintergrund von <div>-Elementen verwenden, können Sie über das CSS-Attribut background-image:url(bild.png) auch eine andere Bilddatei einblenden.

Das Umstellen der Website mit CSS hat seine Grenzen. Manche Seiten sind zu umfangreich, als dass sich aus Ihnen per CSS eine stress- und frustfrei durchsuchbare Webseite machen lässt. In diesem Fall sollten Sie eine Webseite speziell für mobile Geräte anbieten. Dafür eignet sich beispielsweise Maqetta, ein Editor für mobile Benutzeroberflächen.

Möchten Sie möglichst schnell eine kleine, mobile Webseite bauen, greifen Sie am besten auf einen Online-Dienst zurückgreifen. Zum Beispiel lassen sich mit den kostenlosen Angeboten von Wirenode oder Onbile im Handumdrehen kleine Mobil-Webseiten zusammenstellen.

Wollen Sie Seitenbesuchern automatisch eine geeignete Seite anzeigen, müssen Sie feststellen, welchen Browser oder Gerät sie benutzen. Mit Javascript lassen sich Fenstergröße, Browser oder das Betriebssystem herausfinden. Die Methode hat aber zwei entscheidende Nachteile: Im Browser des Benutzers muss Javascript aktiviert sein, und Sie müssen eine lange Liste der verschiedenen Browser und Geräte anfertigen, die zur Entscheidung führt, welche Seite angezeigt werden soll.

Eine solche Geräteliste samt Browserkennungen führt das Projekt WURFL. Damit Sie darauf zugreifen können, liefert WURFL den entsprechenden Java- oder PHP-Code gleich mit. Meist ist PHP bereits vorhanden, daher beschränkten wir uns im Folgenden auf die PHP-Variante.

Laden Sie WURFL-1.3.1-PHP und entpacken Sie es auf Ihrer Festplatte. Den so entstandenen Ordner „wurfl-php-1.3.1“ benennen Sie in unserem Beispiel in wurfl um und laden ihn komplett auf Ihren Webserver - und zwar dorthin, wo auch Ihre Startseite liegt. Achten Sie darauf, dass das Verzeichnis „wurfl“ und seine Unterverzeichnisse für PHP schreibbar sind.

Benennen Sie Ihre bisherige Startseite etwa in pc.html um und nennen Sie die Seite für mobile Geräte mobil.html. Nun erstellen Sie noch eine Datei index.php und fügen ihr folgenden Code hinzu:

1
2

<?php.include_once.'wurfl/examples/demo/inc/header-config.inc';
$geraet = $wurflManager->getDeviceForHttpRequest($_SERVER); ?>

Beim ersten Zugriff auf Ihre „index.php“ dauert es nun ein wenig, da WURFL sich konfiguriert. Die nächsten Zugriffe liefern dann schnell - je nach Gerät - die passende Seite.