Responsive-Prototyping-Tools

7. Februar 2014

Responsive-Webdesign ist voll angekommen. In den letzten Monaten habe ich kein Web-Projekt gestaltet, das nicht responsive umgesetzt wurde. Für die Konzeption von derartigen Projekten habe ich mir einen Prozess angeeignet, der die Aspekte Responsiveness, Visual-Design und Microinteractions abbildet.

Visual-Design und Microinteractions

Wie schon beschrieben, definiere ich die visuelle Sprache mit StyleTiles, Microinteractions dagegen werden traditionell mit Axure umgesetzt und getestet.

Tools

In diesem Beitrag sind kurz die Werkzeuge und Techniken genannt, die ich für das „Responsive-Prototyping“ verwende. Es geht in dieser Phase darum, alle Inhalte und Elemente (der App, Website, …) sinnvoll und vollständig auf Seiten zu verteilen und anzuordnen. Dabei liegt der Fokus auf Layoutänderungen bei verschieden großen Viewports, also vom Smartphone bis zum Desktop-Bildschirm.

Sublime Text

Ein Texteditor für HTML und CSS/Sass.

Hammer for Mac

Hammer stellt Funktionen bereit, statische Seiten (ohne Server) unkompliziert zu generieren. Insbesondere die @include-Funktion hilft bei wiederkehrenden Elementen wie Header oder Footer und erspart mühsame, doppelte Arbeit. Variablen, Platzhalter-Bilder und Navigation-Helper sind ebenfalls hilfreich. Darüber hinaus wird Sass ohne weitere Installationen compiliert.

Sass

Sass hilft mit seinen bekannten Funktionen (Variablen, @extend, …) schlichtweg weniger Zeilen CSS schreiben zu müssen und wiederkehrende Passagen (@mixin) effizient zu handeln. Insbesondere bei Responsive-Webdesign-Projekten wird vorwiegend in wiederkehrenden Modulen gedacht, hier spielt der CSS-Preprocessor seine Stärken aus.

Chrome

Ein Browser mit mächtigen Analyse-Tools („Element untersuchen“). Außerdem werden neuere Funktionen wie (z.B. Flexbox, SVG, Verläufe, …) unterstützt. Für das Erstellen von Prototypen ist Kompatibilität ein nachrangiges Thema.

Viewport Resizer

Dieses Bookmarklet verändert den Viewport des Browsers auf Knopfdruck. Dabei können voreingestellte Gerätegrößen (z.B. iPad Querformat) oder individuelle Dimensionen gewählt werden. Das erspart ständiges, manuelles Verändern des Browserfensters.

XAMPP

Mit XAMPP lässt sich schnell eine Umgebung erstellen, in welcher der Prototyp unter der URL „localhost“ läuft. So können Webfonts einfach eingebunden werden und der Prototyp ist im Netzwerk abrufbar. So kann das Testen auf den tatsächlichen Geräten (Smartphone, Tablet, …) frühzeitig stattfinden.

Github

In meinem aktuellen Projekt bei inserteffect war eine enge Zusammenarbeit mit Entwicklern notwendig, so dass ich den bekannten Versionierungs-Service erstmals einsetzte. Ich werde es künftig für alle Web-Projekte nutzen. Es unterstützt den Prototyping-Prozess immens, da es durch das Ablegen von Zwischenständen (commits) das typische „Vor-und-Zurück“ eines Designprozess vereinfacht. So ist immer ein Backup der Vorversion verfügbar, es lässt sich experimenteller Arbeiten.

Bootstrap

Von Bootstrap habe ich mir eine Custom-Version geladen, die nur das CSS-Grid und die Responsive utilities enthält. So ist es durch einfach Hinzufügen von CSS-Klassen möglich, schnell mehrspaltige (auch verschachtelt) Layouts zu bauen. Die aktuelle Version 3 ermöglicht zudem, je nach Viewport den Elementen eine unterschiedliche Spaltigkeit zuzuteilen.