Unverzichtbare Tools für Responsive Designs
Kommentare

Webdesigner dürften es aus eigener Erfahrung kennen: das Übertragen der Klientenwünsche auf die spätere Website ist manchmal keine einfache Aufgabe. Nicht nur, weil immer neue Wünsche auftauchen oder dem Klienten das Design plötzlich doch nicht mehr gefällt, sondern auch, weil sich die Implementierung von Responsive Designs sehr schwierig gestalten kann.

Um den Design- und Entwicklungsprozess von Responsive Designs einfacher zu gestalten, gibt es zahlreiche Tools. Zwölf davon hat Richa Jain vorgestellt.

Schritt Eins: Das Mock-Up

Um ein Website-Design responsiv zu gestalten, bietet es sich an, mit der Grundlage anzufangen, nämlich einem Sketch oder Mock-Up. Dabei kommt es vor allem darauf an, die Layouts für eine möglichst große Anzahl mobiler Devices auszurichten.

Mit InterfaceSketch lassen sich PDF-Templates ausdrucken, die verschiedenen Mobile-Device-Displays gleichkommen und wo mit einem Bleistift ein erstes Design visuell dargestellt werden kann. Bei StyleTiles geht es vor allem um den visuellen Reiz eines Designs. Anstatt jedoch mehrere vollständige Mock-ups zu erstellen, kann das Aussehen leicht verändert werden, bis es den Geschmack des Auftraggebers trifft.

Nachdem die ersten Skizzen vorliegen, können Wireframes erstellt werden. Besonders einfach geht das zum Beispiel mit Responsive Wireframes, das typische Layouts aufgegriffen und Wireframes für sie erstellt hat, sodass man sie nicht von Grund auf selbst erstellen muss. Wer das trotzdem gerne tun möchte, kann sich die Arbeit mit Wirefy leichter machen. Das Tool erlaubt Webdesignern, funktionale Wireframes mit fluidem Design zu erstellen, bei dem der Fokus auf dem tatsächlichen Content liegt.

Schritt Zwei: Responsive HTML und CSS generieren

Nachdem man sich Mock-ups und Wireframes erstellt hat, ist es an der Zeit, am eigentlichen Code des Responsive Designs zu arbeiten. Um responsiven Code zu generieren, gibt es einige nützliche Tools, die das Codieren ein wenig vergnüglicher gestalten können.

So stellt PureCSS ein für mobile Devices optimiertes Set von CSS-Modulen bereit, mit denen sich Responsive Layouts gestalten lassen. Auch mit Responsive Web CSS kann ein Layout durch das Hinzufügen von div-Elementen für jeden Teil der späteren Website gestaltet werden. Sie können auf verschiedene Größen für die Darstellung auf unterschiedlichen Devices gesetzt werden; anschließend kann ein HTML- und CSS-Skelett heruntergeladen werden.

Mit der nativen Applikation Macaw werden dem Nutzer verschiedene nützliche Funktionen für die Gestaltung der Website an die Hand gegeben, etwa ein Bild-Editor, die Möglichkeit, Elemente per Drag-und-Drop zu platzieren oder die Typography der Seite festzulegen.

Schritt Drei: Schriftarten, Bilder und Videos

Nach dem Erstellen des Grund-Codes geht es daran, die Feinabstimmung des Responsive Designs durchzuführen. Dazu gehört zum Beispiel die Festlegung der Schriftarten oder wie Bilder und Videos eingebunden werden. Auch dafür gibt es einige nützliche Tools auf dem Markt, etwa das Online-Tool Font Family Reunion, mit dem sich überprüfen lässt, welche Schriftart der Browser auf verschiedenen Betriebssystemen nutzt.

Mit dem jQuery-Plug-in FlowType kann die optimale Zeichenanzahl pro Zeile erreicht werden, da das Plug-in die Schriftgröße anhand der Breite eines Elements automatisch anpasst.

Mit Adaptive Images werden die Prinzipien von fluiden Bildern eingefügt. Das Tool kontrolliert die Displaygröße des Website-Besuchers und gibt anhand dessen eine skalierte Version des Ursprungsbildes aus.

Ein weiteres nützliches jQuery-Plug-in ist FitVids.js, das die Größe von eingebetteten Videos für die Displaygröße des mobilen Devices passend ändert, gleichzeitig aber das richtige Verhältnis beibehält.

Schritt Vier: Testen

Bevor die Seite gelauncht wird, sollte sie getestet werden. Doch wer hat schon für jede mögliche Spezifikation das passende Device zur Hand?

Mit dem DesignModo’s-Responsive-Test-Tool kann die URL der Website für verschiedene Dimensionen mobiler Devices getestet werden oder auch direkt ein bestimmtes Device ausgewählt werden. Ein weiteres nützliches Test-Tool ist Brad Frost’s Ish, mit dem die Fensterbreite in px oder em gesetzt werden kann. Zudem stellt es verschiedene Voreinstellungen zur Verfügung, bei der zum Beispiel die Größe nach und nach zunimmt.

Natürlich gibt es noch weitere Tools, mit denen das Erstellen von Responsive Designs vereinfacht werden kann, allerdings dürften die hier vorgestellten Tools bereits genug Auswahl geben, um die Arbeit mit Responsive Designs leichter von der Hand gehen zu lassen.

Aufmacherbild: Mockup business template von Shutterstock / Urheberrecht: Yevhen Vitte

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -