der tag und ich

Responsives Webdesign einfach testen

Bekanntlich ist ja responsibles Webdesign aktuell der heiße Scheiß. Und das ist eigentlich auch ganz klug. Denn so kann man seine Webseite schnell für verschiedene Endgeräte, sprich neben Desktops und Notebooks auch Tablets und Mobiltelefone anpassen. Ein paar CSS-Media Queries mit angepassten Werten in das Stylesheet und fertig. ((Zumindest ist so die einfache Theorie. In Wirklichkeit ist das ein wenig aufwändiger.))

der tag und ich - auf einem simulierten iPad

Den neuen Code zu testen ist dann aber nicht ganz so einfach, zumindest ich habe zum Beispiel zu Hause kein iPad rumliegen. Gut das es Menschen gibt, die Dinge wie Resizer entwickeln. Das ist ein Bookmarklet für den Browser, dass einem die darstellende Fläche im Browser entsprechend der Darstellungsfläche eines der Endgeräte skaliert. Zur Auswahl stehen dabei die Auflösungen

Ich benutze die dazugehörige Resizer Chrome Extension seit ein paar Tagen und bin ziemlich begeistert davon. Wie in obigem Screenshot dargestellt sieht dieses Blog zum Beispiel in der iPad-simulierenden Ansicht aus. Oben rechts sieht man auch, zugegebenermaßen eher schlecht, die kleine Box mit der man die verschiedenen Auflösungen auswählen kann.

Zwar kann die Extension den Test auf dem echten Gerät nicht komplett ersetzen, doch ist es so schon tausend Mal komfortabler und genauer, als einfach den Browser ein wenig größer oder kleiner zu ziehen.

Außerdem machte mich Shortee auf das Responsive Design Test Bookmarklet von Benjamin Keen aufmerksam. Das zeigt nach einem Klick die verschiedenen Darstellungsvarianten einer Webseite nebeneinander in einem Browserfenster an.

Responsive Mehrfachansicht

Und wo wir gerade dabei sind: Sowohl The Responsinator, als auch responsive.is bieten den gleichen Mehrwert, sehen dabei aber anders/hübscher aus.