Manuel-Bieh.de – Web-Development & Consulting

Viele werden sich bisher nicht mit dem Thema befasst haben, viele werden das vielleicht auch in näherer Zukunft erst einmal nicht tun, doch spätestens seit es UMTS und die ersten einigermaßen vernünftigen Browser für Mobiltelefone und PDAs gibt ist das Thema aktueller denn je: die Optimierung von Internetauftritten für mobile Endgeräte.

Fast jeder kennt das, man ist bei Bekannten, hat ein oder zwei Gläschen Wein (wahlweise auch Bier) getrunken, und möchte nun bald heimfahren. Doch natürlich hat man keine Ahnung wann der ÖPNV Richtung Heimat geht. Der Bekannte hat aber leider gerade nicht die Möglichkeit ins Internet zu schauen. Es wäre also jetzt ein leichtes, mit dem Handy samt eingebauten Browser die elektronische Fahrplanauskunft aufzurufen, und sich bequem den nächsten Bus zu suchen.

Leider spielen auch in Zeiten des WAP 2.0 die wenigsten Internetseiten da mit. Zwar erlauben es moderne Mobilgerätebrowser wie der Opera Mini oder der Minimo mittlerweile auch rein für das Web optimierte Seiten auf Handys etc. anzuzeigen, dennoch sind diese oft aufgrund großer Datenmengen oder vorausgesetztem JavaScript nur mit Einschränkungen benutzbar.

Dabei muss in einen Webauftritt, der für mobile Geräte angepasst werden soll, nicht einmal viel Aufwand gesteckt werden. Der angesehene amerikanische Entwickler Cameron Moll spricht dabei von 4 Methoden:

1. Nichts tun
2. Styling von Elementen entfernen und ungestaltetes HTML ausgeben
3. Angepasste media="handheld"-Stylesheets verwenden
4. Inhalte, Code und Bilder speziell für Benutzer mobiler Geräte anpassen

All diese Methoden haben Vor- und Nachteile, auf die hier kurz eingegangen werden soll.

Nichts tun und hoffen

Natürlich macht es am wenigsten Aufwand, nämlich ziemlich genau gar keinen, wenn man eine Seite nicht für mobile Browser optimiert, und darauf hofft, dass ein Benutzer von Handys oder PDAs alle relevanten Informationen auch ohne eine spezielle Anpassung findet. Wenn alles gut verläuft, so findet der User sogar genau die Informationen, welche er beim surfen mit dem Webbrowser vorfindet. Die Seite wird somit sozusagen „unverfälscht“ auf dem Handy wiedergegeben. Allerdings wird bei dieser Methode auch am wenigsten auf die Bedürfnisse von eben solchen Benutzern eingegangen. Es werden unter Umständen eine Menge an unnötiger Daten, große Bilder, Stylesheets, aufgeblähter Code und so weiter übertragen. Das verursacht dem Benutzer auch in der heutigen Zeit noch recht hohe Übertragungskosten. Ein wenig freundlicher ist da schon die nächste Methode.

„Rohes“ HTML ausgeben

Bei dieser Methode, bei der die Website im Optimalfall zwischen Inhalt (HTML) und Styling (CSS) trennt, wird auf sämtliche Stylesheets verzichtet, der Handheld-Browser somit dazu gebracht browsereigene Stildefinitionen beim Rendern der Seite zu benutzen. Dies spart zumindest ein wenig Code ein, da keine extra Stylesheets, und somit auch keine möglicherweise definierten, speicherintensiven Hintergrundbilder geladen werden müssen. Doch auch hier besteht die Seite eigentlich aus gewöhnlichem HTML Output, welcher in der Regel für die Ausgabe am Bildschirm erstellt wird.

Handheld-Stylesheets einbinden

Eine bessere Variante ist, ein Stylesheet für Mobilgeräte zu optimieren, und dieses für nur eben solche Geräte, mittels media="handheld"-Attribut mit in die Seite einzubinden. Das bietet uns den Vorteil unnötige Elemente ausblenden zu können oder speicherintensive Bilder gar nicht erst laden zu lassen. Der User muss sich somit auch keine zusätzliche Adresse merken (beispielsweise eine Subdomain wie mobile.google.com oder google.com/mobile) und das Prinzip der Geräteunabhängigkeit von Dokumenten bleibt somit außerdem gewahrt. Dennoch muss man bei dieser Methode beachten, dass das media="handheld"-Attribut teilweise immer noch unzureichend unterstützt wird, und selbst dann auch nur einige wenige CSS-Eigenschaften letztendlich vom Browser korrekt interpretiert werden. Der Entwicklungs- und Wartungsaufwand hält sich aber auch bei dieser Methode noch in Grenzen.

Eigenen Content, Code und Bilder für mobile Geräte

Die vierte und somit auch letzte Methode ist wohl die, mit meisten Vor- aber auch Nachteilen. Nämlich die Bereitstellung von eigenen Inhalten speziell für Handhelds. Hierbei wird der Code von allen, für die mobile Darstellung irrelevanten Seitenelementen bereinigt. Beispielsweise werden wohl kaum „Seite drucken“ Links, Bilder in hoher Auflösung und dergleichen auf kleinen Handydisplays benötigt. Der Aufwand ist bei dieser Methode wohl am höchsten, da der Entwickler hierbei für gewöhnlich 2 verschiedene Seiten entwickeln muss. Dies widerspricht außerdem dem Prinzip der geräteunabhängigen Erstellung von Dokumenten für das Web. Weiter muss eine solche Seitenversion meist unter einer separaten Adresse aufgerufen werden, was nicht immer für Jedermann logisch und ersichtlich ist. Ein Aufwand der eines Tages umsonst gewesen sein könnte, wenn Mobile Endgeräte später einmal so leistungsfähig wie Desktop PCs sind. Doch bis dahin sollte wohl noch einiges an Zeit vergehen.

Eine kurze Anleitung wie man einen ersten Schritt in die letzte genannte Methode gehen kann, beschreibt Mike Davidson in seinem Artikel „Make your Site Mobile-Friendly in Two Minutes“ (englisch). Dort wird darauf eingegangen wie man mittels eigener Subdomain, binnen 2 Minuten, eine Seite von unnötigen Elementen bereinigen, und den Code durch entfernen von Leerzeilen verkleinern kann.

Das Ergebnis rechtfertigt den Aufwand

Lohnt sich ein solcher Aufwand für eine verschwindend kleine Minderheit an Benutzern, die unterwegs ins Internet gehen möchten? Das bisher nur wenige Benutzer vom Handy gebrauch machen um ins Internet zu gehen, dürfte momentan jedoch primär daran liegen, dass sich viele Entwickler die gleiche Frage stellen.

• Der Benutzer hat stets die volle Kontrolle darüber wo er die Inhalte einer Website lesen möchte. Im Bus auf dem Weg zur Arbeit, zuhause auf dem Sofa oder heimlich im stinklangweiligen Seminar.
• Anbieter von Klingeltönen haben es erfolgreich vorgemacht, schon 12-jährige geben jeden Monat viel Geld für Klingeltöne und Handyvideos aus. Das Handy ist längst als neues Medium neben Internet, TV, Radio und Print anerkannt. Wieso sollte man einem Markt, für vergleichsweise so geringen Aufwand so wenig Beachtung schenken? Nach der Kamera wird auch das Internet in Handys von immer mehr Leuten benutzt. Wieso nicht einfach einmal einer der ersten sein, der diesen Markt für sich erschließt?
• GPS macht es heute bereits möglich durch fremde Orte und Städte zu navigieren. In Zukunft wird noch viel mehr mit dem Handy in Verbindung mit dem Internet möglich sein. Beispielsweise eine GPS-gesteuerte Suche nach dem nächsten Restaurant in der Umgebung. Ein Handy ist standortunabhängig und kann auch heute schon als Navigationsgerät benutzt werden, entsprechende Software vorausgesetzt.
• Durch so genannten Semacode ist es möglich, beispielsweise Informationen mit Wikipedia Artikeln zu verknüpfen. Semapedia ist nur ein praktisches Beispiel wie man die Außenwelt über das Handy mit dem Internet in Verbindung bringen kann. Durch Semapedia ist es z. B. möglich, Sehenswürdigkeiten oder interessante Bauwerke mit einem Aufkleber zu bekleben welcher so genannten Semacode enthält (zu finden übrigens auch auf jeder Handyrechnung zur leichteren Auffindung von Kundendaten). Fotografiert man nun mit seiner Handykamera diesen Sticker ist es (ähnlich wie beim EAN-Barcode) möglich, durch diesen auf den entsprechenden Wikipedia-Artikel oder andere Zusatzinformationen geleitet zu werden.
• Neben dem Internet hat in letzter Zeit vor allem das Handy unsere Welt verändert wie kaum etwas anderes. Mittlerweile ist es möglich nicht mehr nur beides separat zu benutzen, die Übergänge sind mittlerweile fließend. Über Dienste wie Skype oder Jajah ist es möglich über das Internet mit dem Handy zu telefonieren. Mit jedem modernen Handy kommt man problemlos ins Internet. Eine Technologie die sich in den nächsten Jahren mit hoher Wahrscheinlichkeit noch viel weiter entwickeln wird.

Fazit

Auch wenn viele Stimmen, aus teilweise berechtigten Gründen, gegen die .mobi Top-Level-Domain sind: Die bereits abgeschlossene Einführung einer Domain speziell für Mobile Geräte ist ein weiterer Punkt in einer Liste, welche verdeutlichen soll, welchen Stellenwert die Anpassung von Internetseiten für portable Geräte in Zukunft haben wird. Das Internet wird viele neue Möglichkeiten bieten welche mit dem Handy genutzt werden können. Jemand der im Internet Erfolg haben möchte, sollte nicht davor zurückschrecken zumindest einmal einen Blick auf das „mobile Web“ zu wagen.

Weiterführende Links

• Buchtipp: Cameron Moll – Mobile Web Design (Englisch)
• 10 Reasons to Publish to Mobile (Englisch)
• Make your Site Mobile Friendly in 2 Minutes (Englisch)
• Semapedia Projekt
• Positivbeispiel: Mobile Wikipedia
• Positivbeispiel: Kicker.mobi

Dieser Artikel erschien am 22.12.2006 im Webkrauts-Adventskalender