.mobi Preview am Desktop-PC
Bei der Entwicklung mobiler Webseiten stehen Sie vor dem Problem sich eine Vorschau des Web-Angebotes auf Ihrem Entwicklungs-Systems zu schaffen. Während die Bildschirmgrößen auf dem Handy bei 160 Pixeln Breite beginnen und bei etwa 240 bis 320 Pixeln enden sehen Sie als Entwickler im normalen Webbrowser die Seiten im bildschirmfüllenden 17 Zoll-Format. Die Anzeige muß verkleinert werden.
Über ein Verkleinern des Browserfensters können Sie zwar die Darstellungsfläche reduzieren, damit geht Ihnen jedoch auch der einfache Zugang zur Menue- und Werkzeugleiste des Browsers verloren. Es ist zudem schwierig die Größe des Browserfensters abzumessen und als Einstellung festzuhalten, auch die Web-Developer-Toolbar für Firefox kann dieses Problem nicht vollständig lösen. Oft gibt der Browser eine Mindestbreite des Browserfensters von etwa 200 Pixeln vor, ein einfaches Verkleinern des Browserfensters reicht daher für die Entwicklung von Dotmobi-Seiten nicht aus.
Eine Alternative sind Emulationen mit denen es möglich ist einzelne Handy-Modelle im Web-Browser zu simulieren. Diese werden zum Teil kostenlos im Internet angeboten, benötigen dann aber einen Entwicklungsserver der vom Internet erreichbar ist. Für die Entwicklung eines neuen Angebotes ist aus aus mehreren Gründen nicht optimal: Sie werden ihren Entwicklungsserver nicht im Internet veröffentlichen wollen und benötigen einen ständigen Online-Zugriff auf die Webseite der Emulation.
Weitere Anbieter liefern auch Handy-Simulationen für den Betrieb im lokalen Umfeld, diese müssen jedoch lizensiert werden, was für ein einzelnes kleines Projekt schnell zur Kostenfalle werden kann.
Die Kontrolle mit echten Mobiltelefonen setzt ebenfalls einen öffentlichen Zugang zum Entwicklungsserver oder einen WLAN-Zugang für das Mobiltelefon oder den PDA voraus. Mobiltelefone scheiden daher in den ersten Entwicklungsphasen eines Dotmobi-Projektes nicht nur aus Kostengründen ebenfalls aus.
Also zurück zum Desktop-Browser: Nur hier haben Sie kostengünstig die Möglichkeit einen vollen Zugriff auf lokales Entwicklungssystem zu bekommen. Für die ersten Phasen der Entwicklung ist ein Desktop-System mit Firefox oder Internet-Explorer daher trotz alle Probleme das Instrument der Wahl.
Darstellungsfläche reduzieren
Über einen HTML-Seite mit Inline-Frames können Sie die komplette Seite auf eine beliebige Größe beschneiden. Bei meinen Versuchen hat sich die Darstellung in 3 unterschiedlich großen iframes bewährt:
- Mittlere Darstellung, Web-Handy's oder PD: 210x240 Pixel
- kleine Darstellung, normale Handys: 160x190 Pixel
- OGO, mobile Web: 240x160 Pixel
Da die Handybrowser zusätzlichen Platz im Display für einen schmalen Scrollbalken, Funktionsbuttons und eine Titelleiste belegen, sollten die gewählten Frames nochmal etwas kleiner als die angegebenen Displaygrößen des Handys sein. Ich setze die drei Frames nebeneinander in eine Tabelle und kann so alle Auflösungen gleichzeitig betrachten. Ein dicker Rahmen um die Frames verbessert den Eindruck des Handy-Displays für den Entwickler.
Wichtige Einschränkung: Firefox und Internet Explorer interpretieren deutlich mehr CSS als ein Handy-Browser. Ob das CSS funktioniert läßt sich auf diese Weise nur sehr eingeschränkt prüfen.
Browser und Tools
Für die Entwicklung von mobilen Webseiten empfehle ich den Einsatz von Firefox mit einigen Erweiterungen:
- Web Developer Toolbar: Diese Toolbar ermöglicht das Rahmen von Elementen, das Umschalten der CSS von Screen auf Handheld und vor allem das Umschalten der Fenstergröße (Resize) auf gespeicherte Werte.
- User Agent Switcher: Sammeln Sie die Werte des User-Agents ihrer Besucher (Aus dem Serverlog oder per $_Server-variable mit PHP) und schalten Sie den eigenen Browser auf einen anderen User-Agent um. So wird für den Webserver aus einem Firefox unter Windows ein Nokia6680.
- Firebug: Sehr gutes Tool um die Kommunikation zwischen Browser und Server zu überwachen. Anzeige aller Http-Header und der Ladezeiten.
Mit diesem Werkzeugkasten bekommen Sie immer noch keine Pixelgenaue Simulation eines Handy-Browsers, aber der Server wird den Unterschied nicht merken. Das grundsätzliche Design kann am Desktop-PC überprüft werden und die Fehlersuche auf der Serverseite wird deutlich vereinfacht.
nach oben