t3n News Design

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, Browser-Extensions und Bookmarklet dafür vor.

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Responsive Webdesign: Tools für die Viewport-Vorschau

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 Webdesign: Online-Tools, Browser-Erweiterungen und Bookmarklets.

Sie alle haben ihre Vor- und Nachteile, die wir uns für euch angeguckt haben. Und sollten wir euren Favoriten vergessen haben: Ergänzt ihn doch einfach in den Kommentaren. Wir überarbeiten diesen Artikel regelmäßig und freuen uns über jeden Tipp!

1: Am I Responsive?

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

Das Tool „Am I Responsive?“ von Justin Avery gehört zwar nach wie vor zu den intuitivsten Test-Tools, die es gibt, hat aber auch einen entscheidenden Nachteil. Nach Eingabe der URL spuckt die Seite das Layout in nur 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). Diese Größen zeigen schon: Das letzte Update des Tools ist ein paar Jahre her, genau genommen fünf. Inzwischen gibt es also etliche neue Viewport-Größen, die Am I Reponsive nicht mehr abdeckt. Nette kleine Spielerei: Die vier Devices, die euch als Apple-Geräte angezeigt werden, könnt ihr per Drag & Drop auf dem Bildschirm hin- und herschieben. Wenn ihr euch übrigens für die Entstehungsgeschichte des Tools interessiert – die hat Avery hier aufgeschrieben.

2: #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). Einige Größen mehr als Am I Responsive – dennoch ist die Auswahl auch hier beschränkt.

3: Responsive Web Design Testing Tool

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

Beim Online-Test-Tool von Matt Kersley gibt man die URL der zu testenden Website ein und bekommt dann fünf Vorschauvariationen angezeigt: kleine Smartphones, iPhone, kleine Tablets, iPad angezeigt. Auch das ist nicht gerade üppig, für einfache Tests aber genügt das Tool. Wer es lieber als Bookmarklet einsetzen will, kann die von Ben Keen bereit gestellte Lösung dafür nutzen.

4: 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 zwölf vordefinierte Vorschauvarianten für die gängigsten Endgeräte iPhone, iPhone Plus, iPad, Kindle und Android-Geräte. Auch Responsinator ist neben der Webversion als Bookmarklet verfügbar.

5: 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 allerdings auch nur fünf Endgerätgrößen erhält. Jamies Tool ist trotzdem besonders gut für die schnelle Präsentation von Responsive Websites für Kunden geeignet, da sich zwischen den Geräten schnell hin- und herschalten lässt.

Auf der zweiten Seite haben wir weitere Tools für euch unter die Lupe genommen, unter anderem Responsivepx, ResizeMyBrowser und Screenfly.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
20 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 MLuther 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
  15. von Markus H. am 05.01.2016 (10:41 Uhr)

    Leider nein! Diese Website ist nicht responsive!
    http://responsive-checker.com/de/index.php#url=www.t3n.de

    Aber es gibt ja ´ne tolle t3n mobile Website.. ;-)

    Antworten Teilen
  16. von Chris am 08.01.2016 (11:42 Uhr)

    Wie bereits im Artikel erwähnt sind die Tools zwar interessant um halbwegs ein Gefühl dafür zu bekommen, wie die Seite im Idealzustand ausschauen würde, aber wenn man das jeweilige Tablet oder Smartphone verwendet, findet man meist noch viele Dinge die in der reinen Responsive Ansicht im Browser leider gar nicht angezeigt wurden.

    Antworten Teilen
  17. von grep am 09.01.2016 (15:20 Uhr)

    Hallo ...,


    meine Webseite ist jedenfalls NICHT 'responsive' gestaltet - dass wäre zu viel Code, Aufwand, etc. ... und meine Besucher nutzen eher Textbrowser und sitzen am Desktop.

    Ständig neue mobile Geräte erfordern ein 'ewiges' anpassen seines Codes um die Seiten dann 'responsive' zu halten - dass bedeutet testen, testen, testen !

    Letztlich werden dann selbst 'responsive' Seiten des öfteren schlecht dargestellt - also viel Aufwand für wenig Nutzen.

    Keine Lust drauf !


    Ciao, Sascha.

    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
Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

Webflow: Intuitives Online-Tool für Responsive Webdesign integriert CMS-Funktionen
Webflow: Intuitives Online-Tool für Responsive Webdesign integriert CMS-Funktionen

Responsive Webdesign ist heute Standard. Mit Webflow gibt es eine Online-Plattform, die vieles leichter machen will. An Bord hat der Service Werkzeuge und Hilfsmittel für HTML5 und CSS3 sowie einen … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?