Opera Mobile Emulator für Responsive Webdesign

Als im Jahre 2009 die Version 10 von Opera Mobile entwickelt wurde, beschlossen die Entwickler, das Programm so zu erweitern, dass man damit auch Seiten für Windows und Linux entwickeln kann. Was ursprünglich nur als eine einfache Möglichkeit zur Qualitätskontrolle gedacht war, erwies sich auch schnell als nützlich, wenn es darum ging, die Inhalte zu erstellen. Schließlich musste nun nicht mehr aufwendig auf einem mobilen Gerät getestet werden, sondern alles konnte schnell und einfach in einem neuen Fenster überprüft werden. Es hatte zusätzlich den Vorteil, dass es dadurch natürlich auch möglich wurde, für ein mobiles Gerät zu testen, wenn keines zur Verfügung stand. Man konnte also auch mehrere Optionen durchspielen, wenn nur ein Gerät vorhanden war.

Die Entwickler beschlossen also, noch ein paar Fehler zu beseitigen und eine öffentlich zugängliche Version des Development Tools zu veröffentlichen. Nachdem es noch erweitert wurde, um auch die Anforderungen eines Macs zu bedienen, wurde es unter dem Namen Opera Mobile Emulator veröffentlicht. Es kann seitdem sowohl im Mac App Store als auch auf der Seite von Opera heruntergeladen werden. Das Programm beansprucht nur wenig Speicherplatz und lässt sich schnell und unkompliziert installieren. Die Bedienung ist natürlich an die Benutzung von Opera Mobile angelehnt, wie es auf einem mobilen Gerät der Fall wäre. Es wurden nur noch ein paar Anwendungen ergänzt, mit denen es sich komfortabler arbeiten lässt. So kann beispielsweise auch dann die Tastatur genutzt werden, wenn eigentlich ein Gerät mit einem Touchscreen simuliert wird. Dieser Artikel soll einen tieferen Einblick in das Tool geben und Möglichkeiten aufzeigen, wie damit gearbeitet werden kann.

Die Grundlagen

Nachdem der Emulator gestartet wurde, sieht der Benutzer zunächst einen Bildschirm, auf dem er ein Profil wählen kann. Dabei können verschiedene Versionen von Opera Mobile gewählt werden und der Anwender kann sich entscheiden, mit welcher er arbeiten möchte. Die Einstellungen werden dabei natürlich so übernommen, als benutzte man ein mobiles Gerät mit der entsprechenden Version von Opera Mobile.

Seiten lassen sich anschließend natürlich dadurch aufrufen, dass die URL in die Adressleiste getippt wird, es können aber auch Objekte oder URLs per Drag and Drop in den Browser gezogen werden. Die eigentliche Bedienung der Seite orientiert sich an der Nutzung auf einem Smartphone oder Tablet, wird aber mit der Maus ausgeführt. Ein Klick ersetzt also das entsprechende Antippen auf dem Touchscreen und das Verschieben der Seite wird entweder über ein Trackpad erledigt oder über entsprechende Symbole, die im Browser erscheinen. Die Bedienung ist dabei im Grunde recht intuitiv und lässt sich schnell verinnerlichen, sodass es dem Anwender gelingt, sich schnell daran zu gewöhnen. Es dauert also nicht lange, bis es einem natürlich vorkommt, damit zu arbeiten.

Ein wichtiger Unterschied zur Betrachtung auf einem mobilen Gerät ist, dass sich hier die Größe des Fensters nach Belieben verändern lässt und sich das Layout entsprechend anpasst. Dies wäre zwar auf einem Gerät mit einer festen Größe nicht der Fall, da das Fenster ja die Größe des Displays annimmt, es erlaubt den Entwicklern aber, ihre Seiten auch für die verschiedenen Größen zu testen und zu sehen, wo Probleme mit dem Responsive Design auftreten können. Das ist damit auch gleich einer der großen Vorteile, mit dem Programm zu arbeiten, denn auf diesem Wege lassen sich die unterschiedlichsten Optionen testen, wo an anderer Stelle vielleicht das eine oder andere Problem nicht auftreten würde und sich dann erst zu spät bemerkbar macht.

Deshalb beziehen sich auch die entsprechenden Angaben der Bildschirmgröße nicht auf den tatsächlich verwendeten Monitor, sondern eben auf die Abmessungen, die der Simulation zugrunde gelegt werden. Wer außerdem noch mit verschiedenen Formaten experimentieren will, findet in der rechten oberen Ecke einen Button, mit dem er zwischen Hoch- und Querformat wechseln kann.

Man muss natürlich zugeben, dass auch das beste Tool einen Test auf einem mobilen Gerät nicht vollständig ersetzen kann. Die Erfahrung ist eben doch immer eine andere, wenn die Limitierungen sich tatsächlich bemerkbar machen. Und gerade was die Hardware angeht, haben die meisten mobilen Geräte eben doch mit einer geringeren Leistung zu kämpfen. Aber für die ersten Stadien der Entwicklung eignet sich das Tool eben doch, weil es einen guten ersten Blick darauf erlaubt, wo man zu jedem Zeitpunkt steht. Und gerade wer mit einem begrenzten Budget zu kämpfen hat, findet hier auch die Möglichkeit, verschiedene Geräte zu simulieren, die man in der Praxis vermutlich nicht alle zur Verfügung hätte.

sceen-opera-mobile-emulator

Optionen für Fortgeschrittene

In der rechten Seite der Profil-Auswahl befinden sich auch noch einige Optionen, mit denen sich noch konkreter arbeiten lässt. Man kann dort die üblichsten Auflösungen auswählen und seine eigene angeben, wenn diese nicht aufgeführt wird. Die Pixel-Dichte kann ebenfalls angegeben werden und bestimmt den Zoom-Faktor, der später verwendet wird. Mit diesen Einstellungen kann also noch genauer festgelegt werden, wie das Ergebnis später präsentiert werden soll. Außerdem wird noch die Möglichkeit geboten, sich für ein bestimmtes Eingabe-Modell zu entscheiden. „Touch“ bezieht sich auf eine spätere Nutzung mit Touchscreens und stellt sich auf diese ein, „Keypad“ ist für mobile Geräte gedacht, die nicht über einen Touchscreen verfügen und deswegen auf Tasten optimiert sind, wobei der Entwickler trotzdem seine Maus benutzen kann, um beispielsweise zu klicken oder zu zoomen. Zuletzt bietet „Tablet“, wie der Name schon sagt, die Option, sich speziell auf die Entwicklung für Tablets zu konzentrieren.

Mit Argumenten arbeiten

Zu guter Letzt kann man noch sogenannte Argumente angeben, also recht einfache Befehle, mit denen man schnell und einfach eine neue Anwendung starten kann. Man kann beispielsweise die Größe des gewünschten Bildschirms angeben und welche Seite darauf gestartet werden soll. Die vielleicht wichtigsten Befehle hier sind displayzoom und monitorppi. Mit displayzoom kann man die Größe des simulierten Geräts besser erreichen, wenn man das Fenster um einen bestimmten Faktor verkleinert. Mit monitorppi lässt sich die Auflösung des Monitors, der momentan benutzt wird, angeben, um die Größe des mobilen Gerätes besser simulieren zu können. Die beiden Optionen können allerdings nicht gleichzeitig benutzt werden. Um einen genaueren Einblick in die möglichen Optionen zu bekommen, lässt sich natürlich auch immer die Hilfe aufrufen, wo alles aufgelistet und erklärt wird.

Einstellungen im Browser

Unter Einstellungen finden sich verschiedene Möglichkeiten, das Erlebnis auf individuelle Bedürfnisse anzupassen. Hier lassen sich neben genaueren Einstellmöglichkeiten übrigens auch die Cookies löschen, falls dies nötig sein sollte.

Mit Opera Dragonfly verbinden

Wer ein Projekt für das Netz realisieren will, erreicht irgendwann den Punkt, an dem es absolut notwendig ist, zu analysieren, was genau im Browser vor sich geht. Deswegen kann auch der Opera Mobile Emulator mit Opera Dragonfly kommunizieren, dem Debugger aus dem Hause Opera. Das geht ganz einfach, man öffnet Opera und findet mit einem Rechtsklick die gewünschte Option. Wo man klickt, ist dabei übrigens egal. Nun startet Dragonfly und man kann die nötigen Einstellungen vornehmen, obwohl man im Grunde nichts ändern muss, der Standard kann schon so genutzt werden. Dann öffnet man den Opera Mobile Emulator und startet seine Anwendung, anschließend klickt man auf „debug“ und „connect“, wobei auch hier die Einstellungen übernommen werden können. Nun können sämtliche gewünschte Projekte geöffnet und auf Fehler untersucht werden.

Es kann beispielsweise überprüft werden, ob alle Befehle richtig angegeben sind, oder ob Bilder auch auf kleinen Bildschirmen richtig angezeigt werden. Hier lässt sich auch der Cache ausschalten und der Entwickler kann spezielle Einstellungen vornehmen und bestimmte Optionen testen. Wer mehr über die Möglichkeiten von Dragonfly erfahren möchte, findet dazu Informationen im Netz, die tiefer ins Detail gehen, als das hier möglich wäre.

Sie möchten mehr über unsere Dienstleistungen erfahren oder haben spannende Projekte? Sprechen Sie uns an, wir helfen Ihnen gerne weiter!

Anruf unter +49 228 28695920
E-Mail an
Projektanfrage zum Formular

Wir verwenden Cookies, um Ihnen einen bestmöglichen Service zu bieten. Die Daten werden zur Optimierung unserer Webseite und zu Online-Marketingzwecken erhoben und zu statistischen Zwecken ausgewertet. Klicken Sie auf „OK”, um der Nutzung von Cookies zuzustimmen. Weitere Informationen finden Sie in unserer Datenschutzerklärung