Webstandard & Webdesign - CSS, HTML

 

Mobile Web oder wie kommt das Internet ins Handy: Part3

Nach dem wir uns im ersten Teil meiner Serie zum Thema Mobile Web mit den Unterschieden des Mobilen Webs zum Internet beschäftigt haben, waren im zweiten Teil die Auszeichnungssprachen WAP und XHTML-MP die Hauptthemen. Im dritten und letzten Teil der Serie, möchte ich den Interessierten noch ein paar allgemeine Tipps im Umgang mit dem mobilen Web, mit an die Hand geben.

• Part1: Unterschied Mobiles Web und Internet ( Endgeräte und deren Eigenschaften )
• Part2: Unterschiede der Auszeichnungssprachen WML & XHTML-MP
• Part3: Tipps & Tricks bei der Umsetzung von mobilen Inhalten

Mobile Inhalte können unter anderem wie bereits in Erfahrung gebracht, mittels WML oder durch XHTML-MP, nahezu wie mit dem Desktop Rechner, dargestellt werden. Für eine optimale Darstellung sind wie beim PC, Browser verantwortlich die bspw. wie bei manchen Smartphones Webseiten unterschiedlich darstellen können. Netfront bspw. kann außer einer reinen Textansicht, die das Übertragungsvolumen gering hält, auch alle Informationen untereinander anordnen. Images lassen sich verkleinert anzeigen, und erst bei bedarf vergrößern, so dass der Gesamteindruck einer Webseite auch bei der mobilen Nutzung erhalten bleibt. Allerdings muss vorher seitens der Entwicklung Vorarbeit geleistet werden, damit dies möglich ist.

Mit Hilfe des neuen Opera Mini ( Javafähige Handys vorausgesetzt ) lassen sich auch mit Mobiltelefonen HTML-Seiten darstellen, deren Browser sonst häufig nur über WAP-Fähigkeiten verfügen. Das Rendering der Webseiten übernimmt hier ein Server, der Text und Bilder komprimiert an Opera Mini übergibt, womit die übertragene Datenmenge um etwa 20Prozent der sonst anfallenden Daten verringert. Diese beiden Anwendungsmöglichkeiten zeigen auf was möglich ist, was aber auch berücksichtigt werden muss und das ist meiner Meinung nach, in erster Linie die Datenmenge. Onlinezeit mit Mobilen Endgeräten kostet immer noch einiges an Geld. Wie bereits im zweiten Teil der Serie berichtet, ist die Bandbreite von GMS-9,600 Bit/s im Vergleich dazu HCSD - 115,2 kBit/s oder GPRS - 171,5 kBit/s noch recht gering. Deshalb erlebt eine altbewährte Technik bei Mobilfunkanbietern, einen neuen Hype. Gemeint sind die Speed Optimizer, die von den Anbietern der Mobilfunkgeräte bereit gestellt werden. Die Software komprimiert Bilder und entfernt bspw. unnötige Leerzeichen. Da zum Beispiel ein Freikontingent von 30MB eines Users ohne Komprimierung schnell aufgebraucht werden kann, ist es mit Komprimierung möglich wesentlich mehr Daten lesen zu können.

Die Benutzerfreundlichkeit ( Usability ) des mobilen Web-Angebots ist ein wichtiger Erfolgsfaktor und um das zu gewährleisten, sollten bei der Umsetzung von mobilen Webinhalten folgende Schritte bei der Entwicklung berücksichtigt werden.

Wichtig ist bei der Umsetzung mobiler Inhalte mittels XHTML-MP, CSS, DOM, RSS auf Grund der begrenzten Interaktionsmöglichkeiten und technischen Voraussetzungen, die Wahl der zu wählenden Farbkontraste bei Schriften, Grafiken etc. In Innenräumen von mobilen Endgeräten sind die oft kontrastreichen Displays kein Problem, draußen bei Lichteinfall hat man oft Schwierigkeiten die Inhalte gut zu erkennen. Da Inhalte beim Nokia Communicator 9500 bspw. eine 640x200 Pixel ( 16-Bit-Farbwiedergabe ) grosse Auflösung zur Verfügung haben, ein SK65 von Siemens aber nur 132x176 Pixel, sollte man die Inhalte per CSS ( media=handheld ) dynamisch gestalten. Tabellenlayouts mit festen Werten, sorgen nur für Chaos, da man alle Typen von Handy, Smartphones, PDA etc. nicht berücksichtigen kann. Die Benutzerfreundlichkeit ( Usability ) des mobilen Web-Angebots ist ein wichtiger Erfolgsfaktor und um das zu gewährleisten, sollten bei der Umsetzung von mobilen Webinhalten folgende Schritte bei der Entwicklung berücksichtigt werden.

Tipps beim Umsetzen des Projektes:

• Links und Formularelemente sollten weitesgehend mit Accesskeys belegt werden, damit die entsprechenden Inhalte über die mobile Tastatur schneller aufgerufen werden können.
• Designs sollten mittels einer Spalte umgesetzt werden
• valides HTML, bei effizientem semantischen Code ( Dokumenten Reihenfolge beachten, denn Spalten von Tabellen werden in der Reihenfolge der Spalten umgebrochen und wenn nicht anders möglich untereinander dargestellt ) in Kombination mit CSS ( beachten der Schriftgrössen, -farben etc. )
• ein Verzicht von dekorativen Grafiken ( bei display:none wird die Grafik zwar nicht angezeigt aber ein Download der Grafik findet trotzdem statt )
• eine Verwendung von Alt-Texten, da User oft Grafiken ausschalten, um so schneller an Informationen zu kommen, damit eventuelle Links funktionsfähig bleiben bitte Alternativtexte verwenden
• vermeiden von dynamischen Effekten, da zur Navigation oft eine Maus nötig ist und über belegte Tasten etc. schwerer zu erreichen ist
• Div und span Tags sollten ebenso überlegt wie im Desktopbereich eingesetzt werden
• vermeiden von Frames und popups nicht nur aus Gründen der Usability

Testszenarien:

• testen der Anwendung mit dem Small Screen Rendering Extension in Firefox bzw. der Klein-Bildschirmdarstellung im Opera
• Test der Seite mit ausgeschalteten Grafiken und JavaScript ( wie der ein oder andere erkennt sind die Schritte denen des Desktopentwicklung eigentlich sehr ähnlich )
• ein letzter guter Test ist es immer, die Anwendung nur mit der Tastatur zu nutzen, um die Interaktionsmöglichkeiten des Mobile Users besser zu verstehen und so eventuell auf Fehler aufmerksam zu werden

Ich habe in diesem dritten und letzten Teil der Serie, bewusst darauf verzichtet eine Art Tutorial mit Codebeispielen zu präsentieren. Da es mir in erste Linie mit dieser Serie darum ging, das Bewusstsein bei der Umsetzung von mobilen Auftritten, zumindest ein wenig, zu schärfen. Dem Entwickler oder Designer vor Augen führen, dass es gilt ebenso ( wenn nicht sogar mehr ) technische Voraussetzungen ( mobiles Endgerät, Software etc. ) zu berücksichtigen, wie bei Entwicklung für Desktopbereich. Es sollte nicht damit getan sein, dem User nur eine einfache Printversion anzubieten und diese als Handheld Version zu verkaufen. Wenn man einige der hier, und in den anderen zwei Teilen der Serie, angesprochenen Herangehensweisen berücksichtigt, kann dem Nutzer schon ein wenig mehr geboten werden. Das Potential der mobilen Nutzer ist um ein Vielfaches grösser als das der Desktop Nutzer und nur weil die mobile Entwicklung in Deutschland noch sehr stiefmütterlich behandelt wird, muss es nicht so bleiben.

Wer sich nun für das Thema ein wenig mehr interessieren sollte, dem gebe ich noch ein paar nützliche Links mit auf den Weg:

• Mobile Web Best Practices 1.0
• WAP und WML Tutorial
• OMA ( Open Mobile Alliance )
• Open Source at Nokia
• XHTML-MP Style Guide