Opera Mini Emulator

Mobile Browser Emulatoren

Immer mehr Webseitenzugriffe finden über mobile Geräte wie Smartphones oder Tablets statt. Daher ist es sinnvoll die eigene Webseite gerade für solche Endgeräte zu optimieren. Worin teste ich allerdings meine Homepage, wenn ich auf dem PC entwickle?

Online Lösungen

Für das Entwickeln von Webseiten für mobile Endgeräte sind Online-Lösungen gänzlich ungeeignet, da diese voraussetzen, dass die besagte Webseite schon online ist.

Screenfly von Quirktools

Quirktools Seite
Unter den Online-Lösungen hat Screenfly in allen Kategorien überzeugt. Der Dienst sieht nicht nur super aus, sondern bietet auch viele Funktionen. So lassen sich Webseiten in 4 Endgeräten darstellen. Neben der Möglichkeit die eigene Homepage in verschiedenen Bildschirmauflösungen beziehungsweise Größen zu testen, bietet der Dienst auch einen Proxy an, der beispielsweise den User Agent (PHP) auslesen kann.

http://quirktools.com/screenfly/

Mobilephone Emulator

Mobile Phone Emulator
Der Mobile Phone Emulator kann mehrere Smartphones simulieren, die mit verschiedenen OS laufen. Besonders interessant ist, dass die Bildschirmgröße ausgelesen wird und damit das Smartphone in einem Maßstab von 1:1 im Browser angezeigt wird. Auch dieser Dienst funktioniert über einen Proxy, der es ermöglicht den User Agent auszulesen.

http://www.mobilephoneemulator.com/

Web-App Tester

Opera Mini Simulator
Der Web App Tester ist schlicht gehalten. Dieser ermöglicht es lediglich die Bildschirmauflösung in 2 verschiedenen Varianten (iPhone, iPad) im horizontalen und vertikalen Modus zu verändern.

http://theleggett.com/tools/webapptester/

Browser Addons

Browser Addons eignen sich zum Entwickeln von mobilen Webseiten um einiges besser, da diese auch offline funktionieren. Aus Erfahrung stellen diese aber nicht die Seiten exakt wie im Smartphone dar. Meist sind dies aber nur Kleinigkeiten, die man im nachhinein ohne großen Aufwand ausbessern kann.

Mozilla Firefox

Firefox Addon zur Darstellung von Mobilwebseiten
Das Addon für den Mozilla Firefox bietet die Einstellung die Webseite aus der Sicht verschiedenster Versionen des Internet Explorers (6, 7 und 8), die Sicht von Suchmaschinen Bots (Google, MSN und Yahoo) und die Sicht aus dem iPhone 3 darzustellen. In der Regel reicht dies auch vollkommen aus.

https://addons.mozilla.org/de/firefox/addon/user-agent-switcher/

Google Chrome

Chrome Addon zur Darstellung von Mobilwebseiten
Das Addon für Chrome geht weiter. Dieses ermöglicht die Darstellung der Webseite aller gängigen Browser. Allerdings sind nicht alle Versionen enthalten. Auch Smartphones mit den Betriebssystemen iOS, Android und Windows Phone werden unterstützt.

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

Emulatoren

Emulatoren sind wohl die effektivste Möglichkeit smartphoneoptimierte Webseiten zu testen. Diese imitieren meist das komplette Betriebssystem oder den entsprechenden Browser, der auf dem Mobilgerät installiert ist.


Opera Mini

Opera Emulator
Der Opera Mini ist wohl die beste Möglichkeit smartphoneoptimierte Seiten zu entwickeln. Dieser benötigt nur eine geringe Festplattenkapazität und ist einfach zu bedienen. Es ist möglich aus verschiedenen Smartphones und Tablets zu wählen, die Auflösung und die Pixeldichte fest zu legen.

http://www.opera.com/de/developer/mobile-emulator

iOS

Webseite von XCODE
Besitzer eines Macs können die komplette Appentwicklersoftware herunterladen, die einen iPhone Emulator enthält.

https://itunes.apple.com/de/app/xcode/id497799835?mt=12

Android

Android SDK
Auch das Android SDK hat einen Emulator für Android. Allerdings schlägt dieses mit einer Größe von knapp 400mb weit über das hinaus, was man als Webentwickler benötigt.

http://developer.android.com/sdk/index.html

Windows Phone

Visual Studio Express für Windows Phone Webseite
Auch Windows Phone lässt sich mit der eigenen Appentwicklersoftware emulieren. Allerdings benötigt diese weit über einen Gigabyte Speicherplatz, was schlich und ergreifen zu viel ist.

http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-for-windows-phone

Fazit

Für das Entwickeln von Webseiten für mobile Endgeräte ist wohl der Opera Mini Emulator die beste Wahl. Dieser benötigt nur wenig Speicherplatz und ist schnell installiert. Für das Entwickeln im Browser kann sich der User Agent Switcher für Chrome sehen lassen. Dieses bietet nicht nur die Möglichkeit die Webseite in vielen verschiedenen Browsern darzustellen, sondern integriert auch die Standardbrowser der 3 größten Smartphonebetriebssysteme. Zum Testen einer bereits hoch geladenen Seite ist der Online-Dienst Screenfly von Quirktools zu empfehlen. Dort ist es möglich die Seite in allen bedenklichen Auflösungen anzuzeigen (auch benutzerdefiniert) und Screenfly unterstützt unter anderem auch das Auslesen des User Agent.

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.