Beim Erstellen des Layouts für mobile Browser kommt man eher früher als später an den Punkt, an welchem man testen muss, wie das Layout auf den verschiedenen Geräten aussieht und ob die Browserweiche auch entsprechend funktioniert.

Für dieses Problem gibt es verschiedene mögliche Lösungen:

• Man verfügt über einen ausserordentlich zahlungskräftigen Kunden oder sehr gute Beziehungen zu den Herstellern und beschafft sich alle gängigen Geräte mit unterschiedlichen Browsern und Bildschirm Auflösungen. Aber mal ehrlich.. wirklich? Sehr unwahrscheinlich
• Man nutzt frei verfügbare Emulatoren im Web wie zB.
  • www.testiphone.com
  • www.iphonetester.com
  • www.ipadpeek.com
  • usw.. nutzt Google

  Das Problem wo ich hierbei aber sehe ist, dass man nie sicher sein kann, welcher Agent-Code verwendet wird und was für eine Browser-Engine verwendet wird. Deshalb nicht meine Lieblings-Variante.

• Viele Hersteller von Smartphones oder Netbooks bieten Entwickler-Tools an, welche meist auch einen Emulator enthalten. Bestimmt die sicherste Variante, aber auch aufwendig sich in alle Entwickler-Tools der Hersteller einzuarbeiten. Auf der Seite www.mobilexweb.com/emulators findet ihr eine schöne Zusammenfassung von nützlichen Emulatoren. Ich werde meine eigene Webseite nach und nach an Mobile Browser anpassen und die verschiedenen Emulatoren genauer betrachten.
• Ich persönlich arbeite während der Entwicklung am liebsten mit dem Firefox. Egal ob ich das Layout für Desktop-Browser oder mobilen Browser mache.
  Firefox kann dem Server einen anderen User-Agent Code senden und somit vorgaukeln, er wäre ein Smartphone, Netbook oder was man halt gerade braucht. Dazu öffnet man die about:config und setzt folgende Variabel:

  general.useragent.override = Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

  Nach einem Neustart des Firefox sendet er nun den gleichen User-Agent Code zum Server wie ein Safari auf einem iPhone mit iOS5.

  

  Firefox normal

  

  Firefox mit iPhone4 User-Agent

  Was jetzt noch fehlt ist die Anpassung der Auflösung. Ich nutze dafür die Firefox-Extension “Web Developer” und stelle dort die Fenstergrösse entsprechend der Auflösung des zu simulierenden Smartphone ein. Das Resultat sieht folgendermassen aus:

  

  iPhone

  

  iPhone mit Firefox simuliert

  Ist nicht perfekt, aber man spart bei der Entwicklung Zeit, welche später für ein ausführliches Testen mit dem fertigen Layout verwendet werden kann.
  Natürlich ist mir klar, dass ein Browser-Engine einen entscheidenden Einfluss auf das Erscheinungsbild der Webseite auf den Endgeräten spielt und dass dies ein Firefox nicht simulieren kann. Diese Methode ersetzt auch das Teste der Webseite in den entsprechenden Browsern (oder zumindest Emulatoren) nicht.

Tags: Browser, Emulatoren, Firefox, Mobiles Web

Dieser Post wurde am Freitag, 21. Oktober 2011 um 21:15 in der Kategorie Mobiles Web publiziert. Sie können alle Kommentare zu diesem Post mit Hilfe des RSS 2.0 Feed verfolgen. Sie können einen Kommentar hinterlassen, oder einen Trackback von ihrer eigenen Seite senden.