Tool zum testen von responsive Designs.

Titelbild RWD-Bookmarklet

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:

Toolbar responsive design booklet

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…

eMeLPe

Hi, mein Name ist Marc Lettau-Poelchen. Ich bin Mediengestalter und Webentwickler. Ich liebe Code, Blogs, das Netz, gutes Design und durchdachte Konzepte. Mein Anliegen ist es, mit diesem Blog, meinen Weg als Webentwickler zu dokumentieren und meine Fortschritte aufzuzeigen.

Kommentare (2) Schreibe einen Kommentar

  1. Pingback: Impressum für Facebook-Seite einrichten. | eMeLPe

  2. Pingback: Tool zum testen von responsive Designs. | eMeLPe | responsive design II | Scoop.it

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.