Homepage für mobile Geräte anpassen

Internet-Surfen auf mobilen Geräten wird immer beliebter, immer leistbarer und immer verbreiteter. Eine mobile Version für Webseiten ist heute keine nice-to-have-Funktion mehr. Heutzutage ist eine mobile Version ein Feature, auf das in Zeiten von Smartphones und Internet-Handys keiner mehr so leicht verzichten kann. Wie aber schenk ich meiner Homepage eine mobile Ansicht?

Der einfache Weg – Plugins

Am einfachsten gehts natürlich für alle, die eines der bekannten CMS‘ einsetzen, wie WordPress, Drupal und Co. Dafür gibt es eine Menge von Plugins, die die Installation um eine mobile Ansicht erweitern. Für WordPress gibt es beispielsweise WPtouch, das auch hier im Blog zum Einsatz kommt. Das Plugin ist in wenigen Sekunden installiert und eingerichtet. Das Ganze ist sehr einfach und funktioniert auf Anhieb. Dementsprechend eingeschränkt ist die Lösung aber. Design: Einheitsbrei. Einstellungsmöglichkeiten: Kaum welche. Trotzdem: In den meisten Fällen reichen die wenigen, von Plugins angebotenen Funktionen durchaus aus.

Bildquelle: opera.com

Oder von Hand

Das obige Verfahren ist einfach und funktioniert. Trotzdem gibt es Situationen, in denen es sinnvoll ist, die mobile Seite per Hand anzupassen; beispielsweise wenn die Seite von Hand geschrieben wurde oder größere Anpassbarkeit verlangt wird.

Doch auch hier gibt es kein Patentrezept. Es gibt verschiedene Wege, eine mobile Seite zu realisieren. Prinzipiell kann man zwischen einer eigenständigen Mobilseite, auf die automatisch umgeleitet wird oder einer mit Media Queries angepassten Seite unterscheiden.

m.domain.tld

Auf Seiten dieser Art wird man oft umgeleitet, wenn man über ein Smartphone oder ein Handy domain.tld aufruft. Wie hier deutlich ersichtlich ist, wird man komplett auf eine neue Seite umgeleitet. Die Umleitung kann beispielsweise über JavaScript erfolgen. Etwas eleganter gehts noch mittels HTTP_USER_AGENT und .htaccess-Weiterleitung (siehe hier).

Der Vorteil an der Methode: Man erstellt eine komplett neue Seite und verzichtet auf alles, das nicht unbedingt notwendig ist. Beispielsweise können kleinere Bilder angezeigt werden, die geringeren Traffic verursachen oder Spielereien komplett weggelassen werden, die man auf einem Smartphone einfach nicht benötigt.

Der Nachteil: Werden nur Kleinigkeiten geändert, schießt man mit Kanonen auf Spatzen. Es muss nämlich eine komplett neue Seite gewartet und gepflegt werden. Das zahlt sich nur aus, wenn es auch wirklich signifikante Unterschiede zwischen den beiden Versionen geben soll und nicht, wenn mal eine Leiste in der einen Version ein paar Pixel schmaler sein soll als in der anderen.

Media Queries

Besonders praktisch bei Anpassungen, wenn nur das Design via CSS verändert werden soll, sind CSS 3 Media Queries. Media Queries bietem dem Webdesigner viele Möglichkeiten, das Design, abhängig von Auflösung, Browserfenstergröße, Seitenverhältnis und vielen weiteren Eigenschaften zu manipulieren.

So können beispielsweise Layouts realisiert werden, die bei Fenster-Breiten von über 1000 Pixeln dreispaltig sind. Verkleinert man das Fenster in der Breite, schiebt sich aber die dritte Spalte in den Fußbereich, da sie auf der Seite keinen Platz mehr hat und vertikales Scrollen notwendig werden würde. Möglich ist mit Media Queries Vieles. Der Kreativität sind bei dieser Methode eigentlich keine Grenzen gesetzt, Nachteile gibt es aber auch hier:

Beispielsweise lässt sich mit Media Queries kein Traffic sparen. Verschiedene Elemente können zwar mit CSS, z.B. über display: none; ausgeblendet oder verkleinert werden, heruntergeladen werden sie vom Gerät aber trotzdem.

Sogenannte responsive Designs passen sich automatisch an Bildschirmauflösung und Größe des verwendeten Gerätes an. Falls du selbst einen WordPress-Blog betreibst, möchte ich hier kurz auf die von mir erstellten, responsiven Themes für WordPress hinweisen: picolight und picochic.

Fazit

Der Webdesigner muss sich also genau darüber Gedanken machen, was er überhaupt will. Betreibt er einen WordPress-Blog und will die mobile Seite nur als Notlösung anbieten, sind Plugins das richtige Mittel. Entscheidet er sich dazu, die Arbeit selbst zu erledigen um auch seiner mobilen Seite das gewisse Extra zu verleihen, muss er wieder abwägen. Eine 1,5 MB-Seite bleibt nämlich auch, wenn mit Media Queries viel ausgeblendet wird, eine 1,5MB-Seite. Auf der anderen Seite kann mit einer separaten mobilen Seite zwar viel Traffic gespart werden, trotzdem schafft eine extra Version wieder extra Arbeit.