Viewport-Vorschau leicht gemacht
Wenn man sein Website-Layout alle paar Sekunden aktualisieren und gleichzeitig für verschiedene Ausgabegrößen testen möchte, ist man mehr mit dem Ändern der Browserfenstergröße beschäftigt als mit den eigentlichen Designanpassungen. Zum Glück gibt es für diesen Zweck hilfreiche Werkzeuge als Online-Tool, Browsererweiterung oder Bookmarklet. Hier eine kurze Übersicht geeigneter Tools zum Testen von Responsive Web Design.
Responsive Web Design Testing Tool
Bei dem Online-Test-Tool von Matt Kersley gibt man die URL der zu testenden Website ein und bekommt dann 5 Vorschauvariationen für kleine Smartphones, iPhone, kleine Tablets und iPad angezeigt. Wer Matts Tool lieber als Bookmarklet einsetzen möchte, kann die von Ben Keen bereit gestellte Lösung dafür nutzen.
Responsinator
Responsinator von Tama Pugsley und Andy Hovey bietet nach Eingabe der eigenen Website-URL 10 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
Jamie Reynolds hat mit Demonstrating Responsive Design ein Online-Tool entwickelt, mit dem man nach Eingabe der eigenen Website-URL eine schicke Vorschau in 5 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
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 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 12 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
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
Screenqueri.es von Mandar Shirke ist ein Online-Tool im Beta-Stadium bei dem man per Drag-and-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).
Media Query Bookmarklet von Spark Box ist eine weitere einfache Alternative für die schnelle Vorschau von Resonsive Web Designs im Browser. 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 z.B. Window Resizer, Resolution Test oder responsiView, die alle im Chrome Web Store bereit stehen.
Chris Pederick hat mit Web Developer 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 z.B. CSS-Analyse oder Dokumentinformationen bietet.
Der Opera Mobile Emulator ist eine eigene kleine Anwendung, die lokal installiert werden muß. Opera Mobile Emulator beeinhaltet über 50 vordefinierte Viewportgrößen für Endgeräte von z.B. Samsung Galaxy, Motorola. LG oder Nokia. Zusätzlich kann man benutzerdefinierte Auflösungen ergänzen oder den Emulator mit Opera Dragonfly verbinden.
All diese Werkzeuge für komfortables Testen der Anzeige von Responsive Web Designs 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 z.B. aufgrund von iFrame-Einbettung oder ergänzter Scrollbars meist nicht 100%tig pixelgenau arbeiten. Außerdem kann so natürlich nur die reine Viewportausgabe 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 Web Designs 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:
von Ich 03.04.2012 (15:02Uhr) 1.
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?
von Monika Steinberg 03.04.2012 (15:31Uhr) 2.
@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?
von Ich 03.04.2012 (16:23Uhr) 3.
@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!
von Jens Grochtdreis 03.04.2012 (17:25Uhr) 4.
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.
von Patrick 04.04.2012 (09:33Uhr) 5.
@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.
von Responsive Web Design komfortabel testen… 04.04.2012 (22:19Uhr) 6.
[...] Responsive Web Design komfortabel testen » t3n News [...]
von Ich 05.04.2012 (13:38Uhr) 7.
@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.
von Test-Tools für Responsive Web Design &l… 08.04.2012 (13:31Uhr) 8.
[...] Responsive Web Design komfortabel testen » t3n News. [...]
von Linkhub – Woche 14-2012 10.04.2012 (00:33Uhr) 9.
[...] Responsive Web Design komfortabel testen » t3n News [...]
von User Experience von Responsive Webdesign… 11.05.2012 (09:06Uhr) 10.
[...] Responsive Web Design komfortabel testen: Vorstellung von gut geeignete Test-Werkzeuge, die bei der Optimierung von Websites auf unterschiedliche Auflösungen helfen. [...]
von Header-Design-Trends 2012 [Bildergalerie… 25.05.2012 (11:14Uhr) 11.
[...] Die aktuellen Design-Trends werden meist von interessanten Markteinflüssen und psychologischen Entwicklungen dominiert. Am stärksten wirkt sich momentan der Siegeszug der mobilen Geräte aus – eine Entwicklung, deren Ende noch lange nicht in Sicht ist. Die große Nachfrage an mobilen Geräten wie Smartphones und Tablets verändert die Ansprüche an Design und Optik stark. Wie die Anzeige von Websites auf verschiedenen Endgeräten und Bildschirmauflösungen getestet werden kann, haben wir hier beschrieben. [...]
von M.Luther 13.10.2012 (17:33Uhr) 12.
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.
von Responsive Webdesign: Tipps und Informat… 14.01.2013 (10:38Uhr) 13.
[...] Responsive Webdesign komfortabel testen - t3n News [...]
von Responsives Layout testen | WiSch 18.02.2013 (20:55Uhr) 14.
[...] var st_hover_widget = new sharethis.widgets.hoverbuttons(options);Monika Steinberg hat bei tn3.de schon vor einiger Zeit mal dargestellt, mit welchen (Online-) Tools man sein Layout auf [...]
von 2kit 26.02.2013 (11:57Uhr) 15.
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/
von tence 15.05.2013 (11:23Uhr) 16.
Noch ein Testtool:
http://www.virtualtrends.de/responsive.html