Drücke die Tasten ◄ ► für weitere Artikel  

Diese 8 Tools helfen dir beim Testen mobiler Websites

Dass Websites heutzutage auch für mobile Geräte optimiert sein müssen, ist kein Geheimnis. Doch die große Anzahl an unterschiedlichen Geräten und Displaygrößen stellt Webentwickler für neue Herausforderungen. Wir zeigen euch zahlreiche Tools, die das Testen von Web-Projekten für Smartphones und Tablets erleichtern.

Diese 8 Tools helfen dir beim Testen mobiler Websites

Simulatoren

Simulatoren versuchen das Verhalten eines bestimmten Gerätes nachzuahmen. Oft wird hierbei lediglich der Bildschirm-Ausschnitt verkleinert. Manche Simulatoren schaffen es aber durchaus treffend das wiederzugeben, was später auch auf dem Gerät zu sehen ist.

iPhone-Tester

iPhone-Tester

Mit dem Online-Tool iPhone-Tester können Websites auf ihre Wirkung auf dem iPhone hin getestet werden. Nachdem das Tool mit einer URL versorgt wurde, kann die Webseite in Echtzeit im Emulator betrachtet werden.

iPhoney

iPhoney

iPhoney ist die „Offline“-Version von iPhone-Tester, die als eigenständiger Download für den Mac daherkommt und auch das Drehen des iPhones simulieren kann. Im Gegensatz zum iPhone-Tester, kommt das Programm besser mit dem Viewport Meta-Tag zurecht und skaliert größere Seiten herunter, sodass man eine realitätsnähere Darstellung vom Emulator bekommt.

iPad Peek

iPad Peek

iPad Peek simuliert die Darstellung euerer Webseiten auf einem iPad im Hoch- und Querformat. Zusätzlich dazu bietet das Tool eine Simulation vom iPhone. Eine Schwachstelle dieses Emulators ist die fehlende Simulation der Meta-Viewport-Einstellungen.

Screenfly

Screenfly Simulator

Mit Screenfly können Webseiten in einer Vorschau für verschiedenste Geräte-Größen und -Typen getestet werden. Neben Desktop-, Tablets- und Mobiltelefonen sind auch Tests für TV-Browser möglich.

Mobile Phone Emulator

Mobile phone emulator

Der Mobile Phone Emulator ist einer der beliebtesten Emulationen, da er auch die Kompatibilität der Webseite mit vielen verschiedenen Geräten zahlreicher Hersteller überprüfen kann, darunter auch Samsung, LG und HTC. Das Tool skaliert die Ausgabe, je nach Größe eueres Bildschirms, sodass die Wiedergabe des Contents in etwa der Größe des Ausgabegeräts entspricht.

Emulatoren

All Simulatoren haben ein gemeinsames Problem: Sie geben nur sehr beschränkt wieder, wie der Benutzer die Webseiten im Endeffekt auf den Geräten dargestellt bekommt. Viele der vorgestellten Tools versuchen, das Verhalten der jeweiligen mobilen Geräte so gut wie möglich nachzuahmen. Nur wenige kommen aber an das heran, was im Endeffekt im Smartphone rauskommt.

Die beste Möglichkeit zu testen, wie euere Webseite letztendlich auf dem Endgerät aussieht, ohne das entsprechende Gerät kaufen zu müssen, sind Emulatoren. Diese ahmen nicht nur das Verhalten des Gerätes nach, sondern auch die Software der Geräte.

iOS Simulator

iOS Simulator

Für alle, die einen Mac ihr Eigen nennen, stellt Apple einen iOS-Simulator zur Verfügung. Dieser kann alle mobilen Apple-Geräte, 1:1 simulieren. Als Einzel-Download ist das Programm jedoch nicht erhältlich. Der Simulator ist Bestandteil von XCode, das im App-Store kostenlos bezogen werden kann. Eine Teilnahme am Apple Developer Programm ist nicht notwendig.

Der einfachste Weg, an das etwas versteckte Tool zu kommen, ist in XCode ein iOS-Projekt anzulegen und anschließend mit „Run“ an den Simulator zu schicken, um das Programm dann direkt im Dock festpinnen zu können.

Leider sind mit dem iOS-Simulator nur Tests im Safari und nicht beispielsweise im Chrome für iOS möglich.

Opera Mini Simulator

Opera Mini Simulator

Oft vergessen, aber dennoch durchaus in Gebrauch, ist der Opera Mini. Zum Testen der Webseiten auf Kompatibilität bietet Opera einen Opera-Mini-Simulator auf Java-Basis an.

Android Simulator

Android Emulator

Ein Ähnliches Tool bietet mit dem AndroidSDK an. Nach dem Download kann ein Gerät nach den eigenen Vorstellungen konfiguriert und gestartet werden. Da es eine große Anzahl unterschiedlicher Android-Geräte gibt, gilt es hier ein paar mehr Konfigurations-Möglichkeiten vorzunehmen, bevor es ans Testen geht. Außerdem ist deutlich mehr Einlesen gefragt als beispielsweise beim iOS-Simulator. Dafür steht das SDK auch Windows-Nutzern zur Verfügung.

Kennt ihr noch weitere Tools zum Testen mobiler Websites?

193 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
19 Antworten
  1. von Mac am 16.01.2013 (10:52Uhr)

    ich nutze den Responsinator: http://www.responsinator.com/

  2. von pixelfreak am 16.01.2013 (11:02Uhr)

    Danke für den Artikel. Find Screenfly ja echt ne schicke Sache! :)

  3. von Bernhard am 16.01.2013 (11:08Uhr)

    Meiner Meinung nach sind die Simulatoren reine Zeitverschwendung, denn man kann genau so gut seinen Desktop Browser kleiner oder größer ziehen, ist der gleiche Effekt.

    Was noch an Emulatoren Fehlt ist der Emulator für Windows Phone, hier (kostenlos) zu finden: http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-for-windows-phone

    Den kann man auch als Standalone ausführen, einfach mal danach im Internet Suchen.

  4. von Steffen am 16.01.2013 (11:22Uhr)

    Firefox 19 bietet eine Remote Debug Console. Die Console lässt sich mit einem auf dem Android Device laufenden Firefox verbinden. Breakpoint, Log, DOM Tree etc. ist dabei...

  5. von Andrey am 16.01.2013 (13:09Uhr)

    Opera bietet ebenfalls schon seit längeren eine Remote Debugging Konsole. Damit kann man den Desktop Browser mit einem Gerät oder Emulator verbinden.

    In MS Webmatrix 2 sind ein iPhone und WinPhone Simulator mit dabei.

  6. von Martin Ba via facebook am 16.01.2013 (13:10Uhr)

    Dann lieber Edge Inspect von Adobe, vor allem wird dann nicht emuliert, sondern direkt über das Endgerät gestreamt. Kostet bisher auch nichts.

  7. von Michael Oeser am 16.01.2013 (14:03Uhr)

    Für den schnellen und durchaus recht zuverlässigen Test ist das hier meine erste Wahl: http://lab.maltewassermann.com/viewport-resizer/

  8. von Markus am 16.01.2013 (22:33Uhr)

    Für mich hat sich perfecto mobile bewährt. Viele echte Geräte mit echten Browsern: http://www.perfectomobile.com/

  9. von Jens Peters am 16.01.2013 (22:37Uhr)

    Web Developer Toolbar für Firefox --> Resize --> View Responsive Layouts

    Damit kommt man schon ganz gut voran. ;-)

  10. von Horst am 18.01.2013 (16:34Uhr)

    Danke für diese übersichtliche Darstellung. Ich kannte bisher nur Screenfly und war damit halbwegs zufrieden. Ein weiteres ähnliches Tool findet man auf der Seite von Matt Kersley unter http://mattkersley.com/responsive/

  11. von Der Aperto Online Marketing Wochenrückb… am 22.01.2013 (13:18Uhr)

    [...] Das Magazin t3N hat 8 nützliche Tools zum Testen mobiler Websites vorgestellt. Wer testen möchte, ob sein mobile Webseite auch wie gewünscht dargestellt wird, findet hier effiziente und einfache Lösungen. Diese 8 Tools helfen dir beim Testen mobiler Websites [...]

  12. von Kunden überzeugen: Diese Tools zeigen d… am 01.03.2013 (11:31Uhr)

    [...] Einen vergleichbaren Funktionsumfang für Apple-Geräte bietet das kostenfreien Tool iOS-Simulator Cropper mit dem Screenshots vom auf dem mit XCode zur Verfügung gestelltem iOS Simulator erzeugt und in verschiedene Vorlagen eingefügt werden können. Wie ihr an den iOS-Simulator von Apple kommt, erfahrt ihr in unserem Artikel zum Testen von Websites auf mobilen Geräten. [...]

  13. von Mobile Viewport - Darstellung in Smartph… am 02.05.2013 (21:09Uhr)

    [...] im Webkrauts Blog mit dem Thema ausführlich beschäftigt. Auf t3n wurden übrigens erst kürzlich 8 Tools vorgestellt, um mobile Websites zu [...]

  14. von Cowboy Google: “mobile Website, so… am 18.06.2013 (10:23Uhr)

    [...] Testen Ihrer eigenen mobilen Website finden Sie in diesem Artikel 8 Tools, um die Darstellung auf einem Mobilgerät zu [...]

  15. von Ikonica: Mach deine Icons fit für iOS 7… am 25.07.2013 (09:39Uhr)

    [...] visuelles Feedback kann man auch mit dem Einsatz der Xcode-5-Developer-Preview und dem iOS-Simulator erreichen. Wem die Vorschau auf dem Endgerät, das Zusammenspiel zwischen Desktop und Mobilgerät [...]

  16. von Online Marketing Wochenrückblick KW 03… am 23.08.2013 (15:48Uhr)

    […] Das Magazin t3N hat 8 nützliche Tools zum Testen mobiler Websites vorgestellt. Wer testen möchte, ob sein mobile Webseite auch wie gewünscht dargestellt wird, findet hier effiziente und einfache Lösungen. Diese 8 Tools helfen dir beim Testen mobiler Websites […]

  17. von Mobile Viewport – Smartphones &… am 10.09.2013 (10:12Uhr)

    […] im Webkrauts Blog mit dem Thema ausführlich beschäftigt. Auf t3n wurden übrigens erst kürzlich 8 Tools vorgestellt, um mobile Websites zu […]

  18. von Lesetipps: Digitalisierung, Usability, N… am 19.01.2014 (20:00Uhr)

    […] Diese 8 Tools helfen dir beim Testen mobiler Websites: Bei t3n findet man immer wieder tolle Tipps für Webdesigner und Online-Marketer. In diesem Beitrag stellt Ilja Zaglov acht Tools vor, die beim Testen mobiler Websites helfen können. Weitere Tipps finden sich in den Kommentaren zum Artikel. […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webentwicklung
Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]
Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

TYPO3 CMS: Das TYPO3-Backend kennenlernen [t3n-Video-Workshop]
TYPO3 CMS: Das TYPO3-Backend kennenlernen [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

Das ist doch gar nicht „responsive“! Ein Guide gegen Bullshit-Bingo in der Web-Entwicklung
Das ist doch gar nicht „responsive“! Ein Guide gegen Bullshit-Bingo in der Web-Entwicklung

Responsive, Adaptive, Fluid, Mobile First oder Elastic – wir alle haben davon gehört, aber was bedeuten diese Begriffe eigentlich genau? Ein Guide ohne eine einzige Zeile Code. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen