Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

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

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

Beim Responsive Webdesign 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: 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.

Finde einen Job, den du liebst zum Thema Webdesign

20 Reaktionen
grep
grep

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

Chris
Chris

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

Markus H.
Markus H.

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

webongo
webongo

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

Antworten

thomas.hasenfratz
thomas.hasenfratz

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

Antworten

Michael Pehl
Michael Pehl

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

Lukas Blatter
Lukas Blatter

Ich nutze dieses Bookmarklet sehr gerne:
http://lab.maltewassermann.com/viewport-resizer/

Antworten

Thilo
Thilo

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

Sebastian
Sebastian

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

Magnum
Magnum

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

Antworten

240967 (abgemeldet)
240967 (abgemeldet)

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

M.Luther
M.Luther

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

Ich
Ich

@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

Patrick
Patrick

@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

Jens Grochtdreis
Jens Grochtdreis

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

Ich
Ich

@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

Monika Steinberg

@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

Ich
Ich

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

E.
E.

Hier kannst du dir deine Seite mit 1920px oder auch in 2560px ansehen:
http://www.infobyip.com/testwebsiteresolution.php

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen