Mobil Webseiten
Autor: Markus Fettke | Kategorie: Design, Internet
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 und als Ladegeschwindigkeit kaum eine Rolle mehr spielte. Ein bisschen wirkt es so, als würde sich die Geschichte wiederholen. Wir sind an das Ende der 90er Jahre zurückversetzt. 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 hochauflö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, sodass 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 weggeht; 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 bekommen 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).
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 Vorschaubilder 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 nicht leicht, 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.
Quelle: contentmanager.de (Jens Jacobsen)
Tags: Mobil Webseiten, Mobile Web Initiative, MWI