5 einfache Regeln für mobile Webseiten

Es ist ärgerlich, wenn Sie mit Ihrem iPad, iPhone, Android-Smartphone oder einem anderen mobilen Gerät auf eine Webseite surfen und eine für PCs optimierte Webseite vorfinden, auf der Sie kaum navigieren können. Es kommt manchmal sogar noch schlimmer. Sie werden beispielsweise zu einer dermaßen reduzierten Webseite weitergeleitet, auf welcher der eigentliche Sinn der Webseite nicht mehr erkennbar ist. Beide Situationen treten nur allzu häufig auf.

Aber es muss nicht so sein. Der erste Fall tritt auf, wenn die Webseite keine speziellen Anpassungen und Vereinfachungen für Web-Vorlagen verwendet. Es gibt nämlich bereits Programme, welche die Präsentation der Webseite automatisch für die kleineren Bildschirme der mobilen Geräte anpassen. Das zweite Szenario tritt auf, wenn die Seite eine der vielen „ mobilen"-Dienstleistungsangebote verwendet, die das "Wichtigste" einer Webseite aufnehmen oder gar lediglich den RSS-Feed der Seite nutzen und auf eine WAP-kompatible Version reduzieren, die von nahezu jedem mobilen Gerät gelesen werden kann.

Das Problem an dem WAP-Ansatz ist, dass er nur den kleinsten gemeinsamen Nenner darstellt. Viele alte Geräte können keine Links verwenden, deswerden werden diese nicht mit in die WAP-Darstellung aufgenommen. Die alten Geräte waren einfach nicht dafür gemacht, um im Internet zu surfen. Zu dieser Kategorie gehört neben vielen Nokia Handys auch BlackBerrys, die vor dem Bold ausgeliefert wurden. Weil diese Geräte jedoch nur für 0,5 Prozent der mobilen Webaufrufe verantwortlich sind, ist es nicht sinnvoll eine Webseite gerade dafür zu optimieren. Denn unter dieser Devise müssten alle iOS- und Android-Geräte, die neueren BlackBerrys, Windows Mobile-, Windows Phone 7- und WebOS-Maschinen und die neuesten Nokia-Geräte, welche mit Symbian 3ausgestattet sind, leiden.

Deswegen sollten Sie die alten Geräte bei der Optimierung Ihrer Webseite zu Gunsten der neuen Technologie ignorieren. Mit den folgenden fünf Regeln können Sie für den rasch wachsenden mobilen Markt ansprechende Webseiten gestalten.

Vermutlich haben Sie bereits eine Lösung gefunden, um mit den gewissen Eigenheiten des Internet Explorers umzugehen. Entweder Sie nutzen JavaScript oder ein Server-Skript, um dieses Problem zu umgehen. Verwenden Sie den User-Agent auch für mobile Geräte und finden Sie heraus, welche mobilen Geräte Sie berücksichtigen sollten. Zytrax zum Beispiel bietet eine tolle, häufig aktualisierte Liste über User-Agents.

Tipp: Das Motorola Xoom Tablet gibt sich selbst als einfaches Android-Gerät aus, folglich kann es passieren, dass Sie das Tablet bei der Anzeige einer Webseite wie ein einfaches Smartphone behandeln. Das würde den Xoom-Nutzern jedoch Unrecht tun. Um dieser Falle zu entgehen, sollten die ebenfalls die Größe des Browser-Fensters ermitteln und diese Information für die Unterscheidung zwischen Android Tablet und Android Smartphone nutzen. Diese Unterscheidung ist für das iPad jedoch nicht notwendig, weil es einen anderen User-Agent hat als die anderen iOS-Geräte.

Nachdem Sie herausgefunden haben, welche mobilen Geräte auf Ihre Webseite zugreifen, wollen Sie diese bestmöglich darstellen. Hierfür müssen Sie die unterschiedlichen Bereiche der Webseite entwerfen. Sie können nicht einfach alles, was für eine 1024 x 768 Pixel große Bildschirmseite optimiert wurde für ein mobiles Gerät übernehmen. In der Regel haben die mobilen Geräte gerade mal 320 x 480 Pixel, folglich müssen Sie Ihre Webseite zumindest umgestalten.

Hierfür müssen Sie die Elemente in sogenannte DIV-Elemente packen, sodass Sie diese zum gegebenen Zeitpunkt weiterbearbeiten können. Sie entscheiden, welche der DIVs Sie auf welchem mobilen Gerät anzeigen lassen. Auf diese Art und Weise erstellen Sie eine sich selbst anpassende Webseite.

Tipp: Vermeiden Sie absolute Seiten- und Tabellen-Breiten oder dergleichen. Stattdessen sollten Sie wo immer möglich Prozentwerte nutzen. So vermeiden Sie Elemente, die größer sind als die Breite des mobilen Geräts. Die Geräte können die Webseite dann im Verhältnis 1:1 darstellen. (Größere Elemente werden nämlich mit der gesamten Webseite von den Mobilgeräten automatisch verkleinert.) Es gibt für diese Regel noch eine Ausnahme. Bei eingebetteten Objekten wie Bildern sollten Sie diesen eine absolute Höhe oder Breite zuweisen.

Erst an dieser Stelle treten Ihre Design-Künste in Erscheinung. Sie müssen herausfinden, wie Ihre Webseiten in einem normalen Browser aussehen sollen. Sie müssen sich eigentlich nur um drei Größen kümmern.

1. 320- oder 480-Pixel-Breite für Smartphones: Die Größe hängt davon ab, ob Sie die Webseite für horizontales oder vertikales Betrachten optimieren wollen. Wir empfehlen Ihnen die Webseite für die Vertikale, mit einer Breite von 320 Pixeln, zu optimieren.

2. 768- oder 1024-Pixel für Tablets: Auch hier haben Sie die Wahl. Wobei wir 1024 für Tablets empfehlen würden.

3. Welche Breite bevorzugen Sie bei Desktop-Browsern? Auch hier können Sie 1024-Pixel verwenden, insbesondere wenn Sie davon ausgehen, dass die Webseite mit 17-Zoll-Monitoren, die am meisten verwendet werden, aufgerufen wird.

Zerbrechen Sie sich nicht den Kopf über die kleineren Ausführungen der Smartphones und die unterschiedlichen Bildschirmgrößen der Tablets. Es ist ausreichend, wenn Sie sich um diese drei Kategorien von Bildschirmgrößen kümmern. Wenn Sie Ihre Webseite zusätzlich für Breitbild-Tablets wie das Motorola Xoom optimieren wollen, dann fügen Sie zusätzlich noch die 1280-Pixel-Größe zu den oben genannten Kategorien hinzu.

Jetzt sollten Sie sich dafür entscheiden, was in welcher der drei beziehungsweise vier Kategorien dargestellt werden soll. Im manchen Fällen werden Sie lediglich auf ein paar Komponenten der Webseite verzichten, damit die Seite nicht zu komplex für das Smartphone wird. Damit die Smartphone-Nutzer nicht vollständig auf diesen Inhalt verzichten müssen, können Sie die entfernten Komponenten über Links zu neuen Seiten verfügbar machen. Falls Sie diesen Inhalt für verzichtbar halten, können Sie diesen Teil der Webseite für mobile Nutzer unsichtbar machen. In anderen Fällen ist es notwendig Komponenten zu verschieben, sodass diese vertikal aneinandergehängt und bei Smartphones ein einer Spalte dargestellt werden. Die Webseiten für Tablets und Desktop-Rechner können weiterhin traditionell horizontal ausgerichtet bleiben.

Als nächstes erstellen Sie ein CSS für jede der oben genannten Kategorien. Verstecken Sie die DIVs, die Sie nicht anzeigen möchten und erstellen Sie alternative Versionen wo es notwendig ist. Wenden Sie die besten Layout-Parameter für jede einzelne Geräteklasse an. Nutzen Sie JavaScript, um mobile Geräte zu entdecken und laden Sie das richtige CSS für das Gerät. Sie können alternativ auch Apache Skripte verwenden, um mobile Geräte zu identifizieren und an die richtige Seite weiterzuleiten.

Dieser Ansatz setzt voraus, dass Sie unterschiedliche Webseiten für jedes Gerät verwalten und bedienen müssen. Dieser Nachteil wird durch die Vermeidung des komplexen Seitendesigns, welches von JavaScript vorausgesetzt wird, kompensiert. Sie können immer dann JavaScripte und/oder PHP-Code verwenden, um das Layout zu modifizieren, wenn CSS an seine Grenzen stößt.

Ihre Webseite sollte selbstverständlich auf Vorlagen beruhen, welche DIVs und die zugehörigen CSS und JavaScript-Links nutzen. Andernfalls müssten Sie jede einzelne Seite per Hand für die unterschiedlichen Optionen umprogrammieren. Natürlich benötigen maßgeschneiderte Seiten auch maßgeschneidertes Umprogrammieren, aber die meisten Seiten sollten auf Vorlagen beruhen. Dies gilt insbesondere, wenn Sie ein Content-Management-System nutzen, mit dem Sie Ihre Webseiten erstellen.

Tipp: Wenn Sie erst mal die CSS-Arbeit für jede Geräteklasse erledigt haben, können Sie die Font-Family-Liste erweitern und die Fonts für die mobilen Geräte anpassen. Sie können beispielsweise über CSS Lucida Grande und Palatino zu der Font-Family-Liste hinzufügen. Diese Fonts sind extra für iOS-Geräte und Mac-Rechner entwickelt worden. Für BlackBerry fügen Sie BBAlpha Sans und BBAlpha Serif hinzu. Die CSS Font-Family-Liste lässt die Browser unbekannte Fonts ignorieren. Folglich können Sie alle möglichen Fonts in CSS einfügen, ohne dass es zu Komplikationen kommt.

Tipp: Bei den Seiten, die Sie nicht für die mobile Nutzung optimieren können, haben Sie dennoch mehrere Handhabungsmöglichkeiten. Sie machen die Seite unzugänglich und hinterlassen auf der weitergeleiteten Seite eine Nachricht, in der Sie erklären, weshalb diese Seite nicht mit mobilen Geräten kompatibel ist. Wahlweise können Sie den Nutzer auch zur normalen Desktop-Webseite leiten. Auch hier wäre es von Vorteil, eine kurze Informations-Seite zwischenzuschalten, sodass ersichtlich wird, dass es sich hierbei nicht um einen Fehler handelt.

Eine gut gestaltete Webseite sollte HTML 4 nutzen und die neuen HTML 5-Möglichkeiten soweit es geht verwenden. Auch JavaScript und CSS gehören zu einer guten Webseite. Nur wenn all diese Komponenten gut zusammenarbeiten, funktioniert Ihre Webseite auf den vielen unterschiedlichen Browsern. Die Realität sieht jedoch häufig anders aus. Viele Webseiten wurden programmiert, als der Internetexplorer De facto-Standard war. Deswegen nutzten diese Webseiten ActiveX-Kontrollen und andere Dinge, die nur im Internetexplorer funktionieren. Sie sollten auf diese Altlasten verzichten, weil diese weder von mobilen Geräten noch von Firefox, Safari oder Chrome unterstützt werden.

Möglicherweise nutzt Ihre Webseite Flash-Videos. Auch wenn alle gängigen Desktop-Browser mit einem Plug-In dieses Format unterstützen, sieht es bei den mobilen Geräten ganz anders aus. Dort kann lediglich Android OS 2.2 Flash-Videos anzeigen. Daraus folgt, dass die meisten Smartphones und Tablets keine Flash-Videos abspielen können.

Einigen Nutzern gefallen die speziell für mobile Geräte angepassten Seiten nicht. Diese Leute wollen nicht automatisch zur den mobilen Seiten weitergeleitet werden, sondern die ganze Desktop-Version betrachten. Dabei spielt es für diese Leute keine Rolle, dass die mobile Webseite an die Möglichkeiten des Gerätes angepasst ist. Deswegen sollten Sie diesen Leuten den Zugriff zur normalen Desktop-Seite ermöglichen.

Wenn Sie es auf die elegante Weise erledigen wollen, sollten Sie ein Cookie mit den Vorlieben des Nutzers speichern. Anschließend wird die Person beim nächsten Besuch automatisch zu der bevorzugten Ansicht weitergeleitet. Vergewissern Sie sich, dass Sie den Leuten die Möglichkeit geben, auch wieder zur mobilen Webseite zurück zu wechseln. Fügen Sie hierfür am besten auf jeder Seite einen Link zur mobilen Seite ein.

Natürlich können Sie für eine Dienstleistung zahlen, die Ihre derzeitige Webseite auseinandernimmt oder den RSS-Feed nutzt, um daraus eine mobile Version zu kreieren. Aber beide Herangehensweisen führen zu laufenden Kosten und deren Ergebnisse sind selten zufriedenstellend. Es ist einfach sinnvoller die Standard-Webtechnik zu verwenden und die Webseite für die mobilen Bedürfnisse neu zu gestalten. Wenn Sie Vorlagen verwenden, dauert es nicht lange die Seite auch für mobile Geräte ansprechend zu gestalten.

Immer mehr Menschen nutzen Tablets und Smartphones, um Webseiten zu besuchen. Sie sollten mit der Zeit gehen und diesen Markt mit einer gut gestalteten Webseite bedienen.

Der Originalartikel wurde von Galen Gruman verfasst.