website

Responsive Design – Testen leicht gemacht!

Jeder, der schon einmal ein Responsive Design umgesetzt hat, kennt das sicherlich. Ständig vergrößert/verkleinert man am Browserfenster, um zu schauen, ob das Layout in den unterschiedlichen Auflösungen passt.

Wird die Webdeveloper Toolbar benutzt, können über die Resize-Funktion unterschiedliche Formate angelegt und dann per Klick oder Shortcut benutzt werden, um das Browserfenster auf die entsprechende Größe zu skalieren. Das ist ja schon ganz nett. Im Vorfeld müssen natürlich die Formate der gewünschten Geräte ermittelt und angelegt werden.

Bei der Entwicklung eines aktuellen Responsive Magento-Projekts, bin ich über ein sehr schickes, schnelles und effizientes Tool gestoßen. Nämlich den Viewport Resizer von Malte Wassermann  (http://lab.maltewassermann.com/viewport-resizer/).

Es handelt sich hierbei um ein JavaScript Bookmarklet, welches am oberen Fensterrand eine Menüleiste mit den unterschiedlichsten Geräten einblendet. Einfach einmal auf der Webseite den Button „Click or Bookmark“ anklicken und schauen was passiert.

Damit ich die Leiste für meine Projektseiten einsetzen kann, speichere ich zunächst die Webseite ganz normal in meinen Lesezeichen. Im zweiten Schritt kopiere ich mir die Adresse des Links (Rechtsklick auf den Button) und ersetze die URL in meinem Lesezeichen mit dem kopierten Code. Wird nun das Lesezeichen aufgerufen, blendet sich die Leiste ein.

Mittels eines Klicks auf die Geräte-Icons, ändert sich der Viewport des Browsers und ich kann meine Webseite bequem testen. Durch einen erneuten Klick auf dasselbe Gerät, ändert sich die Perspektive von Portrait zu Landscape. Sehr nett!!!

Und damit nicht genug, kann ich mir diese Leiste nach Belieben selber mit Gerätetypen bestücken. Dazu scrollen wir auf der Webseite ein Stück nach unten zur Sektion „Configuration – Build your own Bookmarklet here“. Hier gibt es die Rubriken Mobile, Tablet und Other. Für meine individuelle Leiste habe ich mich für iPhone/iPhone 5, iPad und Widescreen entschieden.

Nachdem ihr euch eure Leiste zusammengeklickt habt, einfach wieder die Adresse des Links kopieren und speichern (siehe oben). Ich benutze folgenden Code:

javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="320x480" data-icon="mobile">Apple iPhone, iPod Touch</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="768x1024" data-icon="tablet">Apple iPad (2-3rd, mini)</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><script src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));

Hier noch ein Beispiel von aktuellen Projekt in den Auflösungen iPhone5, iPad und Widescreen:

Vielen Dank an Malte Wassermann für dieses tolle Tool und euch viel Spaß beim Testen.

PS: Eine kleine Anmerkung noch. Da es sich hier um JavaScript-Code handelt, kann es je nach Art des Projekt und dessen Struktur u. U. vorkommen, dass die Leiste nicht erscheint.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar

wpDiscuz
Weitere Beiträge zum Thema
Doppelte Rewrites für Models, Blocks und Helper
Vortrag über TypoGento auf der T3Con08
Flagbit Magento Modul ist aktueller Magento Staff Pick
Meet Magento schon wieder vorbei