Vorheriger Artikel Nächster Artikel

Responsive Webdesign: 10 kostenlose Tools zum Testen deiner Seite

Beim können Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch zehn kostenlose Tools und einige Browser-Extensions vor, die euch dabei helfen.

Responsive Webdesign: 10 kostenlose Tools zum Testen deiner Seite

Responsive Webdesign: Viewport-Vorschau leicht gemacht

Wenn man sein Website-Layout alle paar Sekunden aktualisieren und gleichzeitig für verschiedene Ausgabegrößen testen will, ist man mehr mit dem Ändern des Browserfensters beschäftigt als mit den eigentlichen Anpassungen. Zum Glück aber gibt es etliche Tools zum Testen von Responsive Web Design – Online-Tools, Browser-Erweiterungen und Bookmarklets. Hier eine kurze Übersicht.

Am I Responsive?

Das Responsive-Webdesign-Tool „Am I Responsive?“ mit einem Test der t3n-Seite.
Das Responsive-Webdesign-Tool „Am I Responsive?“ mit einem Test der t3n-Seite.

Das Tool „Am I Responsive?“ von Justin Avery gehört zu den intuitivsten Test-Tools, die es derzeit gibt. Nach Eingabe der URL spuckt die Seite das Layout in vier Größen aus: Desktop (1600 x 992 Pixel), Laptop (1280 x 802 Pixel), Tablet (768 x 1024 Pixel) und Mobile (320 x 480 Pixel. Die vier Devices, die euch als Apple-Geräte angezeigt werden, könnt ihr zudem bei Drag & Drop auf dem Bildschirm hin- und herschieben, eine nette kleine Spielerei. Wenn ihr euch übrigens für die Entstehungsgeschichte des Tools interessiert – die hat Avery hier aufgeschrieben.

#deviceponsive

Das Tool #deviceponsive bei der Arbeit.
Das Tool #deviceponsive bei der Arbeit.

Ähnlich schlicht wie „Am I Responsive?“ kommt auch #deviceponsive von Javier Rivera daher. Alle Ausgabegrößen werden einfach untereinander angezeigt, im Header der Seite könnt ihr zudem die Hintergrundfarbe festlegen oder ein eigenes Logo einbinden, um die Screenshots anschließend zu teilen. Testen könnt ihr Seiten bei diesem Tool für folgende Größen: Macbook (1280 x 800 Pixel), iPad portrait (768 x 1024 Pixel), iPad landscape (1024 x 768 Pixel), Kindle portrait (600 x 1024 Pixel), Kindle landscape (1024 x 600 Pixel), iPhone portrait (320 x 480 Pixel), iPhone landscape (480 x 320 Pixel), Galaxy portrait (240 x 320 Pixel) und Galaxy landscape (320 x 240 Pixel).

ResponsiveTest

Bei ResponsiveTest ist der Name Programm.
Bei ResponsiveTest ist der Name Programm.

Etwas übersichtlicher als #deviceponsive funktioniert ResponsiveTest. Nach der Eingabe der URL könnt ihr hier aus einem DropDown-Menü die entsprechenden Devices auswählen, wobei die Bandbreite riesig ist. Diverse Smartphones, Tablets, Laptops und Desktop-Rechner stehen zur Auswahl. Dazu gibt es die Möglichkeit, über Pixel-Angaben individuelle Tests unabhängig von Geräte-Vorgaben durchzuführen.

Responsive Web Design Testing Tool

Das „Responsive Web Design Testing Tool“ von Matt Kersley.

Bei dem Online-Test-Tool von Matt Kersley gibt man die URL der zu testenden Website ein und bekommt dann fünf Vorschauvariationen für kleine Smartphones, iPhone, kleine Tablets und iPad angezeigt. Wer Matts Tool lieber als Bookmarklet einsetzen will, kann die von Ben Keen bereit gestellte Lösung dafür nutzen.

Responsinator

Der Responsinator – ein weiteres Tool, um Responsive Webdesign zu testen.

Der Responsinator von Tama Pugsley und Andy Hovey bietet nach Eingabe der eigenen Website-URL zehn vordefinierte Vorschauvarianten für die gängigsten Endgeräte iPhone, iPad, Kindle und Android. Auch Responsinator ist neben der Webversion als Bookmarklet verfügbar.

Demonstrating Responsive Design

Demonstrating Responsive Design.

 

Jamie Reynolds hat mit Demonstrating Responsive Design ein Online-Tool entwickelt, mit dem man nach Eingabe der eigenen Website-URL eine schicke Vorschau in fünf verschiedenen Endgerätgrößen erhält. Jamies Tool ist besonders gut für die schnelle Präsentation von Responsive Websites für Kunden geeignet.

Responsivepx

Responsivepx.

Bei responsivepx von Remy Sharp gibt man eine lokale oder eine online URL ein und kann dann die gewünschte Breite und Höhe der Ausgabe eingeben, um so die exakten Breakpoint-Breiten in Pixeln zu finden. Hier ein Video zu der Arbeit mit responsivepx:

ResizeMyBrowser

ResizeMyBrowser.

ResizeMyBrowser von Chen Luo funktioniert leider nicht mit Opera, Chrome und Safari, da das Online-Tool mit dem resizeTo-Event arbeitet. Für Firefox und Internet Explorer bietet ResizeMyBrowser aber zwölf vordefinierte Ausgabegrößen, die die aktuelle URL mit gewählter Breite und Höhe in einem neuen Popup-Fenster öffnen. Man kann zusätzlich eigene Viewportgrößen ergänzen. Für Safari empfiehlt Chen die Resize Safari Extension.

Screenfly

Das Responsive-Webdesign-Testtool Screenfly.

Screenfly von Quirktools beinhaltet vordefinierte Auflösungen für Desktop, Tablet, mobile Ausgabe und TV. Man gibt wieder die URL der zu testenden Website ein und kann dann zwischen den unterschiedlichen Viewports auswählen. Allerdings ist die Desktop-Vorschau auf Safari beschränkt, und die TV-Voransicht nur in Opera möglich.

Screenqueries

Screenqueries.

Screenqueri.es von Mandar Shirke ist ein Online-Tool im Beta-Stadium, bei dem man per Drag & Drop beliebige Fenstergrößen aufziehen kann, Lineale sieht und die Pixelanzahl dafür angezeigt bekommt. Auch bei Screenqueries kann man die URL der eigenen Testseite angeben. Vordefinierte Viewports stehen für gängige Tablets und Smartphones samt Blackberry zur Verfügung. Auch die variierenden Ausgabegrößen für die iPhone Modelle 3 und 4 werden bei Screenqueries berücksichtigt (iPhone 4/4S mit Retina-Auflösung in 640x960 Pixeln und iPhone 3/3GS mit 320x480 Pixeln). Aktuell ist die Seite aufgrund von Updates leider offline.

Responsive Webdesign: Testen per Browser-Extension

Die ResponsiView-Extension für Chrome.

Das Media-Query-Bookmarklet von Spark Box ist eine weitere einfache Alternative für die schnelle Vorschau von Resonsive Web Designs im Browser. Der Resizer von Codebomber ist sowohl als Bookmarklet als auch als Erweiterung für Chrome erhältlich. Andere Browser-Extensions für Chrome, die eine Website-Vorschau in unterschiedlichen Auflösungen komfortabel als eigenes kleines Menü integrieren sind zum Beispiel der Window Resizer, Resolution Test oder responsiView, die alle im Chrome-Web-Store bereit stehen.

Die Window-Resizer-Extension für Chrome.

Chris Pederick hat mit Web Developer zudem eine Plattform-unabhängige Erweiterung für Chrome und Firefox entwickelt, die neben Resize-Funktionalität für Browserfenster noch zahlreiche andere Entwickler-Tools für zum Beispiel CSS-Analyse oder Dokumentinformationen bietet.

Die Web-Developer-Extension für Chrome und Firefox.

Der Opera Mobile Emulator ist eine eigene kleine Anwendung, die lokal installiert werden muss. Sie beeinhaltet über 50 vordefinierte Viewportgrößen für Endgeräte von zum Beispiel Samsung, Motorola, LG oder Nokia. Zusätzlich kann man benutzerdefinierte Auflösungen ergänzen oder den Emulator mit Opera Dragonfly verbinden.

Der Opera-Mobile-Emulator als eigene Anwendung.

All diese Werkzeuge für komfortables Testen der Anzeige von Responsive Webdesigns in unterschiedlichen Auflösungen sparen sicher eine Menge Zeit bei schnellen Designanpassungen und vereinfachen die Vorschau während der Entwicklung. Allerdings ist zu beachten, dass die Tools zum Beispiel aufgrund von iFrame-Einbettung oder ergänzter Scrollbars meist nicht zu 100 Prozent pixelgenau arbeiten. Außerdem kann so natürlich nur die reine Viewport-Ausgabe des jeweiligen Endgeräts simuliert werden. Weitere geräteabhängige Einstellungen, die über die Designvorschau hinaus gehen, bleiben also komplett außen vor, und Responsive Webdesigns müssen im Nachgang unbedingt zusätzlich noch auf den entsprechenden Endgeräten selbst getestet werden.

Kennt ihr noch weitere hilfreiche Tools zum Testen von Websites auf unterschiedlichen Endgeräten? Ergänzungen als Kommentar sind immer gern willkommen.

Weiterführende Links zum Thema „Responsive Webdesign“

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
16 Antworten
  1. von Ich am 03.04.2012 (15:02 Uhr)

    Gibt es eigentlich auch eine Möglichkeit LOKAL die Bildschirmauflösung höher zu schalten? Mein Notebook kann nur 1280px aber ich würde gerne mal sehen wie meine Seite in 1920px aussieht. Allerdings möchte ich auch mit der Seite dabei interagieren, also z.B. Login machen, Knöpfe drücken etc. Das geht mit den Onlinetools ja nicht (oder hab ich was übersehen?) Auch mein Browserfenster kann ich maximal auf Bildschirmgröße ziehen (Windows 7), nicht breiter. Irgendwelche Ideen?

    Antworten Teilen
  2. von Monika Steinberg am 03.04.2012 (15:31 Uhr)

    @Ich Lokal fällt mir da gerade nichts Vernünftiges ein. Bei manchen Online-Tools, wie z.B. responsivepx kann man aber zumindest eine Breite von 1920px einstellen, muss dann allerdings horizontal scrollen - klar ;) Vielleicht reicht es ja zum Testen von Bedienelementen?

    Antworten Teilen
  3. von Ich am 03.04.2012 (16:23 Uhr)

    @Monika, prima, sowas hab ich gesucht, das hilft mir schon mal, vielen Dank! Leider hat die Seite einige Probleme wenn auf der aufzurufenden Seite JavaScript verwendet wird, aber um das grundsätzliche Design zu sehen reicht das schon mal. Vielen Dank!

    Antworten Teilen
  4. von Jens Grochtdreis am 03.04.2012 (17:25 Uhr)

    Interessant sind auch das Media Query Bookmarklet von Frederic Hemberger sowie von Frank Bültge der Simple Media Queries Tester und der Simple Media Queries Debugger.

    Antworten Teilen
  5. von Patrick am 04.04.2012 (09:33 Uhr)

    @Ich:
    Mit der Chrome-Extension "Window Resizer" kannst du verschiedene Fenstergrößen definieren, welche mit einem Klick aktiviert werden können. Hier kannst du auch 3000x2000px als Fenstergröße angeben. Funktioniert einwandfrei.

    Antworten Teilen
  6. von Ich am 05.04.2012 (13:38 Uhr)

    @Patrick,
    danke für den Tipp. Gerade ausprobiert, aber leider gehts auch hiermit nicht über meine Bildschirmbreite (1366px) hinaus. Wenn ich 1600 o.ä. auswähle bleibt es trotzdem bei 1366 :-( Ich arbeite an einem Notebook ohne externen Monitor. Obs daran liegt? Bei Dir scheints ja zu laufen.

    Antworten Teilen
  7. von M.Luther am 13.10.2012 (17:33 Uhr)

    Vielen Dank für den interessanten Artikel, ich hatte den Link dazu schon länger gespeichert und bin gerade wieder darauf gekommen und mir fällt dazu eine weitere Möglichkeit zum Testen ein.

    Als vor ein paar Tagen Firefox 16 released wurde, habe ich noch eine scheinbar neue Möglichkeit entdeckt, mobile Webseiten lokal im Browser zu testen.

    Dazu gibt es unter dem Menüpunkt 'Extras' » 'Web-Entwickler' » 'Bildschirmgrößen testen' (Strg. + Umschalt + M) die Möglichkeit einen Rahmen einzublenden, der sich auch in der Größe ändern und von Hochformat auf Querformat drehen lässt.

    Antworten Teilen
  8. von 2kit am 26.02.2013 (11:57 Uhr)

    Mit den in Google Chrome integrierten Developer Tools kann man auch ganz einfach Responsive Designs testen: http://2kit.de/news/mobile-apps/einfaches-testen-von-responsive-design-und-mobilen-webseiten-mit-google-chrome/

    Antworten Teilen
  9. von Magnum am 05.08.2013 (13:35 Uhr)

    Sowas gibts es doch schon lange im Firefox oder täusche ich mich da ? !

    Antworten Teilen
  10. von Sebastian am 05.08.2013 (14:10 Uhr)

    ich hab mir zum Teste einfach ein paar Bookmarklets erstellt, um in entsprechender Größe ein Popup (iiiihhh :-) ) zu öffnen. So zB:

    javascript:(function(){open(window.location,'iPad','height=1024,width=768,status=no,location=no,resizable=no,menubar=no,toolbar=no,scrollbars=yes');})()

    Antworten Teilen
  11. von Thilo am 05.08.2013 (15:27 Uhr)

    Lokal testen kann der Firefox auch. Einfach im Menü Extras > Web-Entwickler den Punkt 'Bildschirmgrößen testen' auswählen.

    Da braucht man nichts weiter.

    Antworten Teilen
  12. von Michael Pehl am 06.08.2013 (18:13 Uhr)

    http://www.brianapps.net/sizer/ ist eigentlich besser da es keine Browser extension ist.

    http://www.responsivedesigntest.net/ ist eine "Weiterentwicklung" des „Responsive Web Design Testing Tool“ von Matt Kersley, wo man nicht horizontal scrollen muss.

    Antworten Teilen
  13. von thomas.hasenfratz am 12.11.2013 (17:38 Uhr)

    Für einen Kurztest ist diese Link vielleicht auch hilfreich: http://www.cloudweb.ch/responsive-check/

    Antworten Teilen
  14. von webongo am 20.11.2014 (07:50 Uhr)

    Dieses Tool nutzen wir für das Responsive Webdesign:
    Responsive Design Test von webongo
    Responsive Design Test webongo

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Die Basics des Responsive Webdesign [Infografik]
Die Basics des Responsive Webdesign [Infografik]

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher … » weiterlesen

Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates

Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose … » weiterlesen

Die Basics des Responsive Webdesign in 9 schicken GIFs
Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont. » weiterlesen

Kennst Du schon unser t3n Magazin?

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