Das mobile Internet ist da. Vorbei sind die Zeiten, als Sie nur für den PC planen mussten. Vorbei die Zeit, in der fast alle Probleme mit der Unzahl verschiedener Browser gelöst waren. Vorbei die Zeiten, als Ladegeschwindigkeit kaum eine Rolle mehr gespielt hatte. Ein bisschen wirkt es so, also würde sich die Geschichte wiederholen. Wir sind wie zurückversetzt an die Zeit Ende der 90er Jahre. Alle Probleme von damals tauchen wieder auf – was Sie früher beim Anlegen von Seiten für PCs beachten mussten, das müssen Sie heute beim Anlegen von Seiten für Mobilgeräte beachten.
Konzeption mobiler Websites
Auch wenn es in den deutschsprachigen Ländern mehr Mobiltelefone gibt als Einwohner – noch nicht jeder hat einen Datentarif, mit dem er überhaupt mobil im Web surfen kann und nicht jeder besitzt ein Handy, mit dem das einigermaßen praktikabel ist.
Dennoch hat mit der Einführung des iPhone Ende 2007 das mobile Internet den Massenmarkt erreicht, so wie das mobile Mailen zuvor mit dem Blackberry. Das Apple-Smartphone hat Standards gesetzt, und es verkauft sich bestens. Andere Hersteller versuchen sich abzuschauen, was gut funktioniert. So gibt es mittlerweile auch von RIM (dem Hersteller der Blackberry-Geräte), von Samsung oder von Nokia Handys, mit denen man komfortabel im Web unterwegs ist.
Noch ein paar Details zum iPhone, weil diese der Grund sind, warum das Surfen unterwegs auf einmal so viel Spaß macht:
- Der Bildschirm ist hoch auflösend (160 dpi statt den ca. 100 dpi der meisten modernen Monitore).
- Man kann das Gerät drehen, dann zeigt es die Webseiten automatisch im Querformat an.
- Tippt man auf einen Bereich einer Webseite (z. B. den zentralen Inhaltsbereich oder die Seitenspalte), wird dieser vergrößert dargestellt, so dass man auch klein gesetzte Texte problemlos lesen kann.
- Mit zwei Fingern kann man beliebige Teile der Seite vergrößern, indem man sie an der gleichen Stelle auf dem Touchscreen aufsetzet und sie auseinander zieht – je weiter man die beiden Finger spreizt, desto mehr wird vergrößert.
Damit ist man sowohl unabhängig von den Site-Betreibern (manche Site-Betreiber bieten speziell für Mobilgeräte aufbereitete Versionen ihre Sites an), als auch vom Mobilfunk-Anbieter (manche bereiten wichtige Sites so auf, dass sie auf Mobilgeräten besser lesbar sind). Die Ingenieure von Apple haben also einen pragmatischen Ansatz gewählt: sie haben den Browser des iPhone so eingerichtet, dass er mit den Websites umgehen kann, die es derzeit gibt.
Das ist für Sie als Site-Betreiber ein großer Vorteil. Dennoch gibt es Websites, die besser auf mobilen Geräten funktionieren und solche, die eher mühsam zu benutzen sind. Achten Sie vor allem auf Folgendes (das gilt für alle mobilen Geräte):
Die wichtigsten technischen Beschränkungen:
- geringe Bildschirmauflösung (beim iPhone sind es 480 x 320 Pixel, wovon aber noch Platz für die Steuerelemente weggehen; etliche Geräte haben noch weniger)
- Flash wird nicht unterstützt, auch Java nicht (JavaScript dagegen schon)
Testen Sie unbedingt selbst einmal auf möglichst vielen mobilen Geräten, wie sich das Surfen hiermit anfühlt. Nur so gekommen Sie ein Gefühl dafür, mit welchen Problemen man sich hier herumschlägt.
Technische Umsetzung von Sites für Mobilgeräte
Damit Ihre Site auch auf Handys und Smartphones gut benutzbar ist, optimieren Sie am besten Ihre bestehende Site. Das empfiehlt auch die Mobile Web Initiative (MWI) beim W3C (World Wide Web Consortium), das für die Web-Standards zuständig ist. Über das Thema .mobi habe ich ja vor einigen Tagen schon einmal geschrieben.
Eventuell können Sie auch eine so genannte Browserweiche einbauen, welche die Benutzer entsprechend den Geräten, die sie benutzen zu unterschiedlichen Unterbereichen Ihrer Site leitet.
Bei den Seiten für mobile Geräte achten Sie vor allem auf Folgendes:
- Halten Sie die Seiten klein & kurz – mit Bildern nicht mehr als 100 KB groß und nicht höher als ca. 1000 Pixel bei Standardschriftgröße.
- Fixieren Sie die Schriftgröße nicht.
- Fixieren Sie die Seitenbreite nicht, damit diese an die kleinen Displays angepasst werden kann (meist um die 200 bis 300 Pixel breit).
- Legen Sie die Seiten nicht zu breit an, das heißt, auch die Grafiken sollten möglichst nicht breiter als 300 Pixel sein. Bauen Sie lieber kleine Vorschau-Bilder ein und verlinken Sie diese zu den großen Abbildungen. Das reduziert gleichzeitig auch die Datenmenge.
- Verzichten Sie auf Frames.
- Verzichten Sie auf Formulare zur Navigation, diese werden auf vielen mobilen Browsern entweder gar nicht angezeigt, oder sie sind sehr mühsam zu bedienen. Wenn Sie Formulare tatsächlich brauchen, legen Sie diese möglichst groß an und verteilen Sie die Elemente auf mehrere kurze Seiten.
- Verzichten Sie auf Popup-Fenster.
- Setzen Sie eingebettete Medien wie Flash-Filme mit Bedacht ein. Viele Geräte unterstützen diese nicht. Sehen Sie für solche Fälle einen alternativen Zugang zur Information vor.
- Vermeiden Sie komplexe CSS-Layouts – viele mobile Browser haben mit diesen Probleme. Tabellen zur Gestaltung sind sowieso tabu.
Die Mobile Web Initiative (MWI) veröffentlicht umfangreiche Anleitungen für das Gestalten von Websites, die auch mobil genutzt werden sollen. Auf ihrer Website bietet sie neben umfangreichen Informationen auch einen interaktiven Web-Check an, der Ihre Site kostenlos auf Probleme hin prüft, die bei der Nutzung über ein Mobilgerät auftreten können. Seien Sie auf eine lange Liste mit Problemen gefasst – leider ist es ohne Erfahrung sehr schwer, deren Schwere zu beurteilen.
Die MWI kümmert sich auch darum, die Bedienung zu vereinfachen und zu standardisieren. Dazu ist sie in Kontakt mit Geräte- und Software-Herstellen. Die Initiative gehört zum W3C (World Wide Web Consortium), das für die Web-Standards zuständig ist.
Die Website der MWI ist:
www.w3.org/Mobile/
Ein paar Hintergründe zum iPhone im Newsletter 08/2007 – Lernen vom und für das iPhone.
