Internetseiten auf dem Handydisplay? Wer glaubt, bei einer durchschnittlichen Displayauflösung von 240 mal 320 Pixeln mache der Ärger über das Scrollen den Surfspaß zunichte, trifft den Nagel auf den Kopf – es sei denn, es handelt sich um für mobile Geräte optimierte Seiten .

Mobil ins Netz – dieser Slogan dominiert zurzeit die Werbung deutscher Mobilfunkbetreiber. Einige locken mit “echtem Internet” für das mobile Gerät. Je erschwinglicher die Tarife für die mobile Internetnutzung sind, desto interessanter werden solche Angebote. Doch eignet sich der winzige Bildschirm eines Handys wirklich zum Surfen? Die Antwort hängt stark davon ab, ob und wie gut die aufgerufenen Seiten für mobile Geräte optimiert sind.

Mobiles Internet 1.0

Mobiles Internet ist keine neue Erfindung. Seit Langem gibt es Handys mit Modem-Funktion. Mitte der 90er Jahre kam WAP auf. Die Werbung versprach mit dieser Technik umfassende Informationen an jedem Ort. Das Wireless Application Protocol war eine Sammlung von Techniken und Protokollen, die spezielle Inhalte auch über schmalbandige Verbindungen schnell übertragen sollten. Es konnte sich aber nicht durchsetzen. In den Köpfen der Anwender stand WAP bald für “Wait and Pay” – zu langsam und teuer war die Verbindung, ganz abgesehen davon, dass kaum Inhalte bereitstanden.

Den zweiten Versuch für ein Mobil-Internet startete E-Plus mit seinem Angebot I-Mode. Der Portaldienst basierte auf einer proprietären Entwicklung von NTT Docomo aus Japan. Im Erfinderland konnte das Angebot durchaus Erfolg für sich verbuchen, doch in Deutschland scheiterte auch diese Technik. Der deutsche Anbieter hat I-Mode zum 1. April dieses Jahres eingestellt.

Keine Extrawurst

Der Misserfolg zweier speziell auf mobile Geräte zugeschnittener Informationsplattformen legt nahe, das Kapitel “Sonderdienste für mobile Geräte” als abgeschlossen zu betrachten. Inzwischen bringen die meisten Handys daher Browser fürs gewöhnliche Internet mit.

Allerdings lässt schon ein Blick auf die gegenwärtig üblichen Displaygrößen vermuten, dass das Surfen in für Computerbildschirme optimierten Seiten wenig Spaß macht. Die am häufigsten anzutreffende Auflösung beträgt 240 mal 320 Pixel. Auf Handys der unteren Preiskategorie ist das Display 220 mal 176 Pixel, 160 mal 128 Pixel oder gar nur 128 mal 128 Pixel groß (Abbildung 1).

Abbildung 1: Zoom wider Willen: Auf dem T-Com TC 300 ist von einer nicht optimierten Seite nur ein verschwindend geringer Ausschnitt sichtbar.

Höherwertige Geräte wie der Nokia Communicator E90 mit 800 mal 352 Pixeln oder das I-Phone von Apple mit 480 mal 320 Pixeln bieten dagegen bessere Voraussetzungen für das Surfen. Beinahe PC-Feeling kommt mit so genannten Internet Tablets wie den Linux-basierten N810 [1] oder N700 [2] ebenfalls aus dem Hause Nokia auf. Alles in allem gilt jedoch: Handy-Displays zeigen nur kleine Ausschnitte einer Seite an (Abbildung 2) – es sei denn, der Server liefert über eine Browserweiche eine spezielle, auf mobile Geräte zugeschnittene Form der Seite aus (Abbildung 3).

Abbildung 2: Standard: Die meisten der zurzeit genutzten Handys haben wie das Nokia E51 eine Displayauflösung von 240 mal 320 Punkten – zu klein, um bei gewöhnlichen Webseiten mehr als nur den Kopf zu sehen.

Abbildung 3: Optimiert: Ist das Webdesign an mobile Geräte angepasst und verzichtet auf umfangreiche grafische Elemente, sind auf dem Display mit der verbreiteten Auflösung von 240 mal 320 wesentlich mehr Inhalte zu erkennen.

Kostenfrage

Auch bei den Kosten unterscheidet sich das Handy beim Surfen vom heimischen Internetanschluss. Anders als dort hat bisher nur eine Minderheit eine Internetflatrate fürs Handy, nach wie vor überwiegen zeit- oder volumenbasierte Tarife. Während dem Surfer am Schreibtisch eine Tastatur, Maus oder andere Eingabegeräte zur Verfügung sehen, muss er auf dem Mobiltelefon meist mit zwölf kleinen Tasten auskommen.

Eine für den gewöhnlichen PC-Desktop entworfene Seitennavigation wirkt im Hochformat der Mobilgeräte außerdem meist ganz anders, als der Webdesigner es sich vorgestellt hat. Auch die üblichen Textmengen überfordern das Anzeigegerät. Die Größe der Bilder ist gewöhnlich für Displays mit mindestens 1024 mal 768 Pixeln optimiert. Neben dem Scrollen nerven lange Übertragungszeiten, bei volumenbasierten Tarifen verursachen die für das Handy-Display unnötig großen Grafiken hohe Kosten.

Vielfalt

Noch weniger als auf dem Desktop hat sich auf den Handys ein bestimmter Browser systemübergreifend durchsetzen können. Fast alle Hersteller kochen ihr eigenes Süppchen. Während Apple einen abgespeckten Safari mit Webkit-Technologie einsetzt, ist bei aktuellen Nokia-Geräten ein Mozilla-Derivat mit Gecko-Engine installiert. Mit diesen beiden Varianten surft der Anwender recht zügig – eine passende Verbindung über UMTS oder EDGE vorausgesetzt.

Ein weiterer weitverbreiteter und technologisch interessanter Browser ist Opera Mini (Abbildung 4). Er nutzt einen speziellen, ausgelagerten Proxy, über den er den gesamte Verkehr abwickelt. Dieser rechnet die Webseiten klein und optimiert sie für die Darstellung auf mobilen Geräten. Neben geringerem Traffic macht sich auch der deutlich niedrigere Rechenaufwand positiv bemerkbar.

Abbildung 4: Optimierung on the Fly: Opera rechnet gewöhnliche Webseiten selbst auf ein für die mobile Anzeige optimiertes Format um.

Eine Nischenlösung ist Minimo (Abbildung 5). Wie Opera optimiert auch er Webseiten zur Anzeige auf kleinen Displays. Das von der Mozilla-Foundation geförderte Projekt setzt wie die Nokia-Browser Teile von Firefox und die Gecko-Engine ein. Allerdings scheint die Entwicklung zu stagnieren, seit über einem Jahr ist keine neue Version erschienen. Die bisher existierenden laufen ausschließlich auf Windows-CE- und Windows-Mobile-5-Geräten.

Abbildung 5: Klein aber fein: Wie Opera optimiert auch der Webbrowser Minimo die angezeigten Webseiten in Eigenregie.

Zu guter Letzt bleibt noch der Windows-Mobile/CE-eigene Browser zu erwähnen. Er nennt sich “Pocket Internet Explorer” oder “Internet Explorer Mobile”, ist aber eine vom großen Bruder Microsoft Internet Explorer unabhängige Software. Er leidet im Gegensatz zu anderen mobilen Browsern unter starken Defiziten: Er kann nicht oder nur schlecht mit Javascript umgehen, CSS bereiten ihm ebenso Schwierigkeiten wie Popups.

Anzumerken ist, dass Microsoft mit der jüngst vorgestellten Version Windows Mobile 6.1 auch den Browser überarbeitet hat. Wie gut er sich nun an aktuelle Standards hält, ließ sich bis Redaktionsschluss aber nicht klären, da noch keine Testgeräte zur Verfügung standen.

Planspiel

Wer sein Webangebot um eine für Mobilgeräte optimierte Variante erweitern möchte, muss sich zunächst überlegen, welche Teilbereiche überhaupt für Handy-Nutzer zur Verfügung stehen sollen (vergleiche Kasten “Planung von Mobil-Webseiten”): Normalerweise interessieren sich mobile Besucher nur für einen relativ geringen Ausschnitt eines typischen Internetangebots.

So wird ein Reisender, der sich auf der Suche nach einem Restaurant im Netz informiert, Seiten über die Geschichte des Lokals als kontraproduktiv empfinden. Er möchte lediglich auf dem schnellsten Weg Adresse, Öffnungszeiten und Telefonnummer erfahren und einen Auszug aus der Speisekarte begutachten. Kann der hungrige Reisende auch noch direkt online reservieren, ist er dem Restaurant als Kunde aber schon fast sicher.

Auf eine Mobil-Webseite gehören also speziell auf den Handy-Nutzer zugeschnittene Informationen und Dienste. Die zugehörigen Seiten sollten so knapp wie möglich ausfallen. Bei den Inhalten sind Zurückhaltung und eine gezielte Auswahl wichtig. Schon deshalb reicht es nicht aus, die bisherige Webpräsenz nur um ein eigenes Stylesheet für Handhelds zu ergänzen.

Neben den Inhalten tragen eine auf das kleine Display und die Nutzung ohne Maus maßgeschneiderte Struktur und Navigation zum Erfolg einer Seite bei. Auch ist es, wie das Restaurant-Beispiel verdeutlicht, sinnvoll, die Site-Struktur, der speziellen Situation anzupassen, in der ein mobiler Besucher die Seite typischerweise aufruft. Um zu prüfen, ob die Konzeption wirklich aufgeht, lohnt es sich, Prototypen der neuen Webpräsenz mit Unbeteiligten (Kollegen, Freunden und Verwandten) zu testen.

Immer wieder neue Testversionen einer Site zu bauen bedeutet relativ viel Aufwand. Einfacher ist es, den Inhalt der Unterseiten einschließlich der Links erst einmal auf Karteikarten zu skizzieren. Diese simulieren dann in einer Art Kartenspiel die noch nicht fertiggestellte Website: Möchte eine Testperson einen Link auf der Karte “anklicken”, zeigt ihr der Tester die der verlinkten Seite entsprechende Karte. So lässt sich ebenfalls herausfinden, ob die Menüpunkte tatsächlich die Inhalte suggerieren, auf die sie verlinken. Für diesen einfachen Test ist zudem keine Hardware nötig.

Ob beim Test mit echten HTML-Seiten oder mit Karteikarten: Schon mit wenigen Testpersonen wird eine Tendenz erkennbar. Nach etwa 20 Testern treten erfahrungsgemäß nur noch selten neue Erkenntnisse zu Tage.

Spielregeln

Zum Schreiben des HTML-Code solcher Webseiten lassen sich die gewohnten Webeditoren [3] ohne Abstriche weiter nutzen. Der Designer muss sich aber bei Anordnung und Größe der Seitenelemente konsequent an den Displaygrößen der mobilen Geräte orientieren.

Da die Zunahme der Internetnutzung mit Hilfe mobiler Geräte absehbar war, sind schon im Jahr 2000 mit XHTML Basic und XHTML MP [4] Standards für angepasste Webseiten erschienen. XHTML MP liegt jetzt in Version 1.2, XHTML Basic in Version 1.1 vor. Beide unterscheiden sich nur wenig vom bekannten XHTML. 2005 hat das W3C erstmals mit seinen Best Practices Basic Guidelines [5] stilistische Richtlinien für praxistaugliche Mobil-Webseiten veröffentlicht.

Die Sites sind im Kern genauso aufgebaut wie herkömmliche XHTML-Seiten. Die Seite beginnt mit der Definition des Doctype, gefolgt vom XML-Charakter-Encoding und dem HTML-Bereich. Stylesheets lassen sich wie gewohnt einbinden, es gelten beinahe die gleichen Grundregeln wie für normale XHTML-Seiten (siehe Kasten “XHTML für Mobil-Webseiten”). Da Fehldarstellungen auf kleinen Handy-Displays aber besonders störend wirken, ist es bei diesen Seiten noch wichtiger, sich konsequent an die Grundlegeln für sauberes HTML zu halten.

Die noch immer verbreitete, früher oft nicht vermeidbare Unart, die Elemente mit Hilfe von Tabellen auf der Seite zu platzieren, ist bei Webseiten für Handys tabu. Statt dessen sollte CSS zum Einsatz kommen, da es auf pixelgenaue Platzierung ankommt. Zudem verhalten sich viele mobile Browser bei komplexeren Tabellen unberechenbar. Last but not least lassen sich mit CSS realisierte Layouts leichter pflegen.

Weise Selbstbeschränkung

Unabhängig von der Platzierung mit Stylesheets sollten die Elemente bei Webseiten für mobile Geräte stets in der richtigen Reihenfolge im Quelltext stehen, sodass sie auch Geräte mit schlechter CSS-Unterstützung wenigstens einigermaßen sinnvoll platzieren.

Eine für mobile Geräte optimierte Seite darf nur selten eine Breite von 200 Pixeln überschreiten. Das schließt eine herkömmliche Navigation, in der die Navigationselemente am linken oder oberen Seitenrand liegen, von vornherein aus, da bei dieser Anordnung nicht genug Platz für eine lesbare Schrift wäre. Bewährt hat sich folgendes Layout: Oben auf der Seite liegen die Menüpunkte »Zurück« und »Startseite«. Darunter folgen die eigentlichen Inhalte der Seite. Unten auf der Seite stehen die Links in Form einer Liste, deren Einträge mit den Nummerntasten [0] bis [9] verknüpft sind.

Das lässt sich in HTML mit dem »accesskey«-Attribut umsetzen (Abbildung 6):

<ol>
  <li><a href="index.html" accesskey="1">
      Startseite</a></li>
  <li><a href="oeffn.html" accesskey="2">
      Öffnungszeiten</a></li>
  <li><a href="res.html" accesskey="3">
      Tisch reservieren</a></li>
  <li><a href="angeb.html" accesskey="4">
      Angebot</a></li>
</ol>

Mobile Webbrowser kennen neben den Accesskeys noch weitere HTML-Erweiterungen. So wählt ein Klick auf den Link »<a href=”tel:+4912312345678″>+49 (0) 123 12 34 56 78</a>« die mit »tel:« referenzierte Nummer.

Neben der Übersicht auf kleinen Displays gibt es einen weiteren Grund, nur wenige Links auf einer Seite zu platzieren: Viele Geräte stoppen das automatische Scrollen, wenn sie auf einen Link treffen. Wenn es sich jedoch nicht vermeiden lässt, eine Mobil-Webseite aus vielen Unterseiten aufzubauen, sollte es zumindest eine von überall aus schnell erreichbare Sitemap geben.

Noch mehr als bei Links ist bei Formularen Zurückhaltung geboten (Abbildung 7). Das Ausfüllen der Felder auf mobilen Geräten ist für den Benutzer alles andere als komfortabel. Wegen der mehrfach belegten Tastatur kommt es leicht zu Tippfehlern. Die Eingabefelder sollten sich wie Links durch Accesskeys ansteuern lassen. Es hilft außerdem, die Eingabe durch ein spezielles CSS-Attribut auf bestimmte Zeichen, zum Beispiel auf Zahlen, zu beschränken: »style=\’ -wap-input-format: “*N”\’« (Listing 1, Zeile 19).

Abbildung 6: Nummerierte Listen eignen sich besonders für Menüs auf Mobil-Seiten: Das »accesskey«-Attribut sorgt dafür, dass der Anwender die Punkte über die Handytastatur auswählen kann.

Schlicht und einfach

Da noch nicht alle Mobil-Browser mit eingebetteten Objekten und Javascript umgehen können, ist es besser, auf diese Techniken verzichten. Das Gleiche gilt für Frames. Lassen sich Javascript oder Frames nicht umgehen, ist ein Test auf möglichst vielen Geräten wichtig. Auch Popups funktionieren auf vielen Geräte nicht, genauso externe Mediendateien wie Flash-Animationen. Zu den echten Todsünden zählen nicht größenoptimierte Jpegs und über HTML-Attribute skalierte Bilder. Grafiken mit einer Breite bis 120 Pixeln bereiten dagegen den meisten Mobil-Browsern keine Probleme.

Bleibt der gesamte Internetauftritt inklusive aller Stylesheets und Bilder zwischen 20 KByte und 100 KByte, so stellt dies auch auf mobilen Geräten angemessene Ladezeiten sicher.

Mit dem W3C Validator [6] kann der Designer die fertigen Seiten online auf Fehlerfreiheit prüfen. Der Tests mit möglichst vielen mobilen Geräten bleibt dennoch unverzichtbar. Im Internet gibt es viele Emulatoren [7], doch auch diese sind kein vollwertiger Ersatz für den Test direkt auf dem Handy.

01 <form method="post" action="robot.php">
02  <fieldset>
03   Was möchten Sie:<br />
04   <input type="radio" title="Kategorie" name="kat" id="kat1" value="bestellen" accesskey="b" />
05   <label for="kat1">Tisch <span class="accesskey">b</span>estellen</label><br />
06   <input type="radio" title="Kategorie" name="kat" id="kat2" value="tagesangebot" accesskey="t" />
07   <label for="kat2"><span class="accesskey">T</span>agesangebot bestellen</label><br />
08   <input type="radio" title="Kategorie" name="kat" id="kat3" value="anderes" accesskey="a" />
09   <label for="kat3"><span class="accesskey">a</span>nderes</label><br />
10  </fieldset>
11  <div>
12   <label for="kommentar">Kommentar:</label><br />
13   <textarea id="comment" name="comment" rows="5" cols="20"></textarea><br />
14  <label for="Namel">Name:</label><br />
15   <input type="text" name="name" id="name" style=' -wap-input-format: "A*a"' /><br />
16   <label for="email">eMail:</label><br />
17   <input type="text" name="email" id="email" /><br />
18   <label for="telefon">Telefon (optional):</label><br />
19   <input type="text" name="telefon" id="telefon" style=' -wap-input-format: "*N"'/><br />
20   <input type="submit" value="Senden" />
21  </div>
22 </form>

Veröffentlicht

Nicht nur beim Design, auch beim Publizieren gelten für Mobil-Webseiten einige besondere Regeln. Dies beginnt mit der URL, aus der hervorgehen sollte, dass es sich um ein Angebot für mobile Geräte handelt. Am deutlichsten signalisiert dies die Toplevel-Domain ».mobi«. Aber auch eine Subdomain (»mobi.Domainname.de«) oder ein Verzeichnis »/mobi« im Pfad erfüllen den gleichen Zweck.

Am komfortabelsten für den Besucher sind Browserweichen, die automatisch zur Mobil-Version einer Seite weiterleiten. Für Firmenwebsites rentiert sich eventuell eine kommerzielle Lösung [8]. Wer die Browserechos der mobilen Geräte kennt, kann die Umleitung jedoch auch leicht in den gängigen Server-seitigen Sprachen programmieren. Beispiele für die Erkennung mobiler Geräte liefern [9] und [10]. Wichtig ist, dass die Weiterleitung über vom Server versandte HTTP-Statuscodes erfolgt [11], Javascript-Lösungen funktionieren im Mobilbereich nicht zuverlässig.

Der Forumseintrag [10] spricht ein Problem bei der automatischen Weiterleitung an: Nicht jeder Handy-Nutzer, zumal wenn er ein Gerät mit großem Display besitzt, möchte ohne Rückfrage die abgespeckte Version einer Seite sehen. Ein Link zum reguläre Angebot auf den mobilen Seiten gehört daher zum guten Stil. Ein Get-Parameter (»http://Domain/Seite.html?mobile=no«) verhindert dabei, dass die Browserweiche erneut in Aktion tritt.

Umgekehrt sollte auch das reguläre Angebot einen gut sichtbaren Link auf die Mobil-Version der Seite enthalten. Auch Benutzer, deren Browser sich nicht explizit als mobil ausweisen, haben so die Chance, die zeit- und kostensparende Variante des Internetangebots zu nutzen.

Summa summarum

Ein vorhandenes Webangebot für mobile Geräte zu optimieren ist ähnlich aufwändig wie ein kompletter Relaunch, kann sich aber als Investition in die Zukunft bezahlt machen. Zwar nutzen nach aktuellen Studien vergleichsweise wenige Handybesitzer die Internetfähigkeiten ihres mobilen Geräts. Mit steigender Verfügbarkeit von kostengünstigen Flatrates dürfte sich dies jedoch ändern. Für bestimmte Branchen wie etwa Restaurants oder Hotels ist das Marketingpotenzial des Internets für mobile Geräte bereits jetzt nicht zu verachten. (pkr)