Webstandards - Small Screen Emulation
Das “Mobile Web” kommt in Schwung, immer mehr mobile Endgeräte mit Kleinbild-Displays sind in der Lage auch XHTML und CSS basierte Webinhalte anzuzeigen. Setzt man beim Entwickeln von Webseiten auf die heutig aktuellen Webstandards, sprich einer tabellenlosen XHTML Struktur in Verbindung mit dem konsequenten Einsatz von CSS für die Gestaltung des Layouts, dann sollten die erstellten Inhalte eigentlich auch auf mobilen Endgeräten anzeig- und benutzbar sein. Da natürlich nicht jeder Webentwickler über ein Sammelsorium internetfähiger Handys, PDA’s oder sonstiger mobiler Geräte verfügt, sind Werkzeuge sehr willkommen, mit denen zumindest eine Vorabsimulation im Small Screen Modus ermöglicht werden kann.
Einige Beispiele zum Emulieren von Geräten mit Kleinbildschirmen sollen hier vorgestellt werden. Drei Probanten kamen dabei in die engere Wahl. Opera ist seit längerer Zeit als Hersteller von Software für mobile Endgeräte auf dem Markt bekannt und hat dieses Feature in seinem Desktop-Browser fest integriert. Für den populären Webbrowser Firefox gibt es eine Erweiterung, welche neben vielen anderen nützlichen Funktionen auch die Ansicht im Small Screen Modus ermöglicht. Über den Opera Mini Simulator wird ein Handy mit Opera Mini Browser nachgebildet.
Zur Praxistauglichkeit der hier vorgestellten Möglichkeiten muß fairerweise erwähnt werden, daß sie echte internetfähige Mobilgeräte natürlich nur näherungsweise emulieren können. Die Darstellung im Kleinbildmodus fällt, sowohl bei Werkzeugen die diesen emulieren als auch bei den vielen am Markt vorhandenen Geräten, meistens unterschiedlich aus. Durch die Linearisierung der Seiteninhalte im emulierten Kleinbildmodus, das heisst die Darstellung folgt dem im Quelltext abgebildeten Elementefluss, ist es aber immerhin möglich, sich einen Eindruck über Qualität und Nutzbarkeit der so angezeigten Seiten zu verschaffen. Fehler und Unzulänglichkeiten in Struktur und Abfolge des Quelltextes sowie des verwendeten Stylesheets sollten sich damit schnell aufdecken lassen.
Grundsätzlich sei gesagt, daß die für mobile Endgeräte erstellten und zu testenden Seiten auf fehlerfreiem und semantischem Markup beruhen sollten. Alle im Dokument eingebundenen Stylesheets sollten desweiteren über Medienattribute für die entsprechenden Ausgabegeräte verfügen. Empfohlen ist das Einbinden eines für mobile Geräte erstellten Stylesheets, mit der Angabe von media=”handheld”, welcher die spezifischen Anpassungen für die Darstellung auf diesen Geräten enthält.
Beispiel - Stylesheet für den Medientyp “Handheld” einbinden:
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />
Browser mit Kleinbildschirm-Modus
Opera:
Opera verfügt seit der Version 7 über einen eingebauten Small Screen Modus. Erreichbar ist dieser Anzeigemodus mit der Tastenkombination Umschalttaste + F11 oder über den Menüpunkt Anzeige –> Klein-Bildschirm.
Ist im Dokument kein Stylesheet für das Ausgabemedium “Handheld” eingebunden, wird im Browserfenster ein Kleinbild-Display mit einer festen Breite von 246 Pixeln emuliert. Zu beachten ist hierbei, das dann die im Dokument eingebundene Stylesheets ohne Medientypangabe oder mit der Medientypangabe “Screen” interpretiert werden. Dies wiederum kann zu unerwünschten Darstellungseffekten im Small Screen Modus führen.
Beim Vorhandensein eines Stylesheets für das Ausgabemedium “Handheld” hingegen, wird ausschliesslich dieser interpretiert und dabei die gesamte aktuelle Größe des Browserfensters bei der Anzeige genutzt.
Mozilla Firefox und Web Developer Extension:
Mittels der Web Developer Extension von Chris Pederick, lässt sich der Firefox Browser um eine Reihe von nützlichen Funktionen für die Webentwicklung erweitern. Enthalten ist hier auch eine Möglichkeit, die Anzeige in den Small Screen Modus umzuschalten. Ist im Browser die Toolbar der Web Developer Extension aktiviert, kann über den Toolbar-Menüpunkt Miscellaneous –> Small Screen Rendering die Kleinbildanzeige eingeschaltet werden.
Auch hier gilt, ist im Dokument kein Stylesheet für das Ausgabemedium “Handheld” eingebunden, wird ein Kleinbild-Display mit einer festen Breite von 250 Pixeln im Browserfenster emuliert und die im Dokument eingebundenen Stylesheets ohne Medientypangabe oder mit der Medientypangabe “Screen” zur Darstellung genutzt. Eine suboptimale Darstellung kann die Folge sein.
Ist ein Stylesheet für das Ausgabemedium “Handheld” vorhanden, wird ausschliesslich dieser, wie auch beim Opera, zur Darstellung herangezogen. Hier wird dann wieder die gesamte aktuelle Größe des Browserfensters bei der Anzeige genutzt.
Opera Mini Simulator (Java basiert)
Opera Mini ist ein (X)HTML und CSS fähiger Browser, der für den Einsatz auf Handys mit J2ME (Java 2 Mobile Edition) vorgesehen ist. Die Aufbereitung der im Opera Mini angezeigten Seiteninhalte erfolgt dabei über einen zwischengeschalteten Server, welcher eine Datenkompression von Texten und Bildern vornimmt. Dadurch werden die zu übertragenden Datenmengen erheblich reduziert. Der Opera Mini verwendet die Rendering Engine von Opera Mobile zusammen mit dem Small Screen Rendering.
Eine Java basierte Simulation des Opera Mini Browsers auf einem Handy kann unter dieser Adresse aufgerufen und zum Testen genutzt werden:
Opera Mini Simulator
Dieser Artikel ist abgelegt unter dem Thema: Webstandards