smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

4 Responsive-Design Testing-Tools

17. April 2012
Stephan
Responsive Webdesign

Neben HTML5, CSS3 & Co. gibt es derzeit viele weitere Trends im Web. Dazu gehört beispielsweise auch das Thema Responsive-(Web-)Design – weg von statischen hin zu flexiblen Designs & Layouts.

Ziel ist es, dass sich das Layout an die verwendete Bildschirmauflösung und den Gegebenheiten/Eigenschaften des jeweiligen Endgeräts (Smartphone, Tablet etc.) anpasst. Da man selbst nun nicht immer über alle Endgeräte verfügt, sind Tools zum Testen von Websites, die mittels Responsive-Design umgesetzt wurden, sehr hilfreich.

Diesbezüglich werde ich euch im Folgenden 4 Responsive-Design Testing-Tools vorstellen.

Eine verständliche Erklärung, was Responsive (Web-)Design eigentlich ist, findet sich bei liechtenecker.at.

The Responsinator

Das Tool The Reponsinator ermöglicht einen schnellen und einfachen Überblick, wie das eigene Responsive Design bei verschiedenen Bildschirmauflösungen aussieht. Dafür werden die Bildschirmauflösungen der bekanntesten bzw. weitverbreitesten Endgeräte, wie z.B. IPhone, IPad und Kindle, verwendet.

Da die Umsetzung relativ gut gemacht ist, eignet sich dieses Tool auch, um z.B. seinen Kunden zeigen zu können, wie die für den Kunden erstellte Website auf den verschienden Endgeräten dargestellt wird.

Vorteile

  • einfache Bedienung & schickes UI/Design (Endgeräte werden grafisch angedeutet)
  • simuliert Browser-Interface (URL-Leiste usw. – die letztendlich ja auch Platz beanspruchen)
  • viele verschiendene Ansichten

Nachteile

  • für jede Ansicht wird eine extra Anfrage (Request) ausgelöst
  • keine individuelle Ansicht (Bildschirmauflösung) auswählbar
  • alle Ansichten untereinander, weshalb relativ viel gescrollt werden muss

Responsive.is

Responsive.is ist im Gegensatz zum vorherigen Tool minimalistischer gehalten. Es gibt zwar nicht so viele verschiedene Ansichten, aber dafür muss man nicht endlos scrollen, um die verschiedenen Ansichten zu sehen, sondern kann am oberen Rand auswählen, welche (Endgerät-)Ansicht angezeigt werden soll.

Der größte Kritikpunkt für mich ist, dass scheinbar nirgends angegeben ist (jedenfalls habe ich nichts gefunden), um welche Bildschirmauflösung bzw. welches Gerät es sich bei den jeweiligen Ansichten genau handelt.

Vorteile

  • einfache Bedienung & minimalistisches, übersichtliches UI/Design
  • nur eine Anfrage (Request) für alle Ansichten benötigt
  • kein unnötiges scrollen – Ansichten leicht über die dazugehörigen Symbole auswählbar

Nachteile

  • keine individuelle Ansicht (Bildschirmauflösung) auswählbar
  • für die vorgegebenen Ansichten ist nirgends die entsprechende Bildschirmauflösung angegeben

Screenfly

Neben dem Responsinator bietet Screenfly im Vergleich zu den beiden anderen vorgestellten Tools ein sehr gelungenes UI/Design. Damit eigenet sich das Tool auch sehr gut, um Kunden einen schnellen Überblick zu verschaffen.

Zusätzlich punktet Screenfly mit einer Fülle an verschiedenen Ansichten, welche von Desktop-, Tablet-, Mobile- bis hin zu Television-Ansichten reichen.

Vorteile

  • einfache Bedienung & schickes UI/Design
  • nur eine Anfrage (Request) für alle Ansichten benötigt
  • kein unnötiges scrollen – Ansichten leicht über die dazugehörigen Symbole auswählbar
  • viele verschiedene Ansichten (mehr als beim Responsinator)

Nachteile

  • keine individuelle Ansicht (Bildschirmauflösung) auswählbar

Responsivepx

Beim Responsivepx-Tool gibt es zwar keine vordefinierten Ansichten zum Auswählen, jedoch kann man selbst jede beliebige Ansicht (Bildschirmauflösung) angeben. Dadurch kann man wirklich für jede erdenkliche Bildschirmauflösung testen, wie die zu testende Website aussieht.

Vorteile

  • einfache Bedienung
  • nur eine Anfrage (Request) für alle Ansichten benötigt
  • Ansichten (Bildschirmauflösungen) individuell auswählbar

Nachteile

  • keine vordefinierten Ansichten (Bildschirmauflösungen), welche bei den bekanntesten bzw. weitverbreitesten Endgeräten genutzt werden, auswählbar
  • UI/Design im Vergleich zu den anderen Tools nicht ganz so gelungen bzw. ansprechend

Fazit

Mittels den vorgestellten Responsive-(Web-)Design Testing-Tools kann man sich relativ leicht und schnell einen Überblick verschaffen, wie denn die eigene Website auf verschiedenen Endgeräten aussieht. Natürlich simulieren die Tools nur die Ansichten und können Tests auf den richtigen bzw. eigentlichen Endgeräten nicht vollends ersetzen.

Ich persönliche setze am liebsten Screenfly und Responinator ein, da es hier schon viele vordefinierte Ansichten für die meist genutzten Endgeräte gibt und das für mich ausreichend ist.

Habt ihr von den vorgestellten Tools schon welche verwendet und wie sind eure Erfahrungen? Kennt ihr noch weitere empfehlenswerte Tools zum Testen eures Responsive-Designs?

Hat dir der Artikel gefallen? Dann interessiert dich vielleicht auch:
Kategorien: Responsive Design
Tags: Responsive Webdesign
Kommentare  
2 Kommentare vorhanden
1 Isabella Bosler schrieb am 12. Juni 2012 um 19:38 Uhr

Super! Sehr hilfreicher Artikel. Erspart mir eine Menge Arbeit ;) Danke.

2 Stephan L. schrieb am 13. Juni 2012 um 13:08 Uhr

Hallo Isabella,

freut mich, dass der Artikel dir weitergeholfen hat :)

Gruß Stephan

1 Trackback/Pingback vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!