Tool zum testen von responsive Designs.

Mobil first! Das ist die Aussage, die immer mehr Webdesigner treffen.

Viele User sehen sich inzwischen Webinhalte auf ihren mobilen Geräten (Tablets oder Smartphones) an. Der Desktop-PC gerät immer mehr in den Hintergrund. aus diesem Grund sollte man sich als Webentwickler mit diesen Medien auseinandersetzen.

Erst vor kurzem hat das W3C die CSS 3 Media Queries in den Status “Recommendation” gehoben, also als Standard verabschiedet. Ein klares Zeichen in Richtung responsive Designs.

Ich möchte euch heute ein Tool vorstellen, mit dem ihr eure Designs für die unterschiedlichen Endgeräte testen könnt. So bietet es die Möglichkeit das Design auf normaler Bildschirmgröße (je nach Auflösung), auf Tablet-Größe (1024×768 Pixel) oder auf Smartphone-Größe (320×480 Pixel) darstellen zu lassen.

Die Rede ist vom Tool “Responsive Design Bookmarklet”, das ihr euch hier laden könnt.

  Responsive Design Bookmarklet

Das Tool ist schnell installiert. Zieht den Button von der Startseite einfach in eure Bookmark-Leiste und klickt den Link an. Ihr bekommt nun eine Toolbar eingeblendet, die in etwa so aussieht:

Ihr seht nun unterschiedliche Symbole, mit denen ihr euer Seiten-Design auf die gewünschte Größe skalieren könnt. Dabei simuliert das Tool die Darstellung auf einem mobilen Endgerät mit entsprechender Auflösung.

Hier mal ein paar Bilder, wie das Tool arbeitet und das Waipoua-Theme auf emelpe.de damit rüber kommt.

Eine coole Sache, wie ich finde, um mal eben Änderungen am Design zu checken, ohne das man Emulatoren oder andere Software installieren muss oder wie blöde das Browserfenster klein und wieder groß zieht.

Na dann mal viel Spaß beim ausprobieren…