LayoutIt! Die smarte Abkürzung für Web-Designer

Wenn es um digitale Produktivität geht und ich angefragt werde, ob ich aus meinem Fachbereich – der Entwicklung von Web-Applikationen – einen Blog-Beitrag dazu beisteuern könne, dann kommt mir als Erstes «LayoutIt!» in den Sinn. Warum? Lesen Sie weiter!

Von der Idee über die Serviette zu HTML-Code

Manchmal überkommt einen ja die Idee zu einer supertollen neuen Website mitten während des Abendessens. Man lässt das Schnitzel kalt werden, während man wie wild seine Ideen auf eine Serviette kritzelt.

Im Zeitalter des omnipräsenten Internetzugangs geht das natürlich auch digital. Online-Tools wie z.B. www.moqups.com helfen einem dabei, Servietten zu sparen. Innert Minuten lassen sich kleine Skizzen wie diese hier anfertigen:

Mit Kunden lässt sich so bequem am Bildschirm konzeptionieren, bevor(!) man auch nur an Photoshop & Co. denkt oder gar die erste Zeile HTML schreibt.

Doch was dann?

Die Arbeit als Web-Developer geht erst jetzt richtig los: Ein HTML-Dokument mit den entsprechenden Elementen muss her und will danach mit CSS visuell formatiert werden. Und wer meine Blog-Beträge verfolgt, weiss: Ich lege dabei Wert auf validen Code.

«Fertiggericht» oder «küchenfertig»?

Wie beim Kochen, gibt es auch für CSS-Schreibende «Fertiggerichte» also Vorlagen und fixfertige Layouts für Webseiten zum Herunterladen. Wer etwas mehr Individualität möchte, jedoch nicht bei Null anfangen will, setzt auf «küchenfertige» Zutaten, sogenannte CSS-Frameworks.

Das wohl populärste CSS-Framework findet sich unter getbootstrap.com und wird auch von mir persönlich sehr gerne eingesetzt, da einfach die Grundprobleme eines jeden Web-Layouts damit schonmal gelöst sind und man sich auf das Wesentliche konzentrieren kann.

Aus der Skizze, die ich mit www.moqups.com erstellt habe, würde ich jetzt also gerne eine HTML-Seite bauen, die so vorbereitet ist, dass ich sie nur noch mit den entsprechenden CSS-Klassen von Bootstrap zu bestücken brauche.

Zusammengefasst: Idee => Skizze => HTML mit Bootstrap

Die Abkürzung

Das Online-Tool, das ich hier vorstellen möchte, kürzt diesen Weg ab und lässt mich meine Ideen direkt als Bootstrap-Seite «skizzieren» …

Unter www.layoutit.com klicke ich auf «START NOW with Bootstrap 3!» und erhalte ein Beispiel-Layout:

Da mir da schon viel zu viele Elemente drauf sind, klicke ich ganz oben rechts auf den «remove»-Button… gleich zweimal, bis die Seite leer und nur noch ein «Container» da ist:

Jetzt beginne ich damit, die einzelnen Bootstrap-Komponenten aus dem Menü links in die Seite rechts zu ziehen.

Unter «Grid System» ziehe ich das Icon neben dem Feld mit der «12» in die Seite und erhalte eine Row (Zeile) mit einer Column (Spalte) drin:

Bootstrap arbeitet mit einem 12-Spalten-Grid-System. Somit deckt eine Spalte mit der Ausdehnung 12 die volle Breite ab. Wenn ich eine Aufteilung will, damit die Navigation neben den Inhalt zu stehen kommt (siehe Skizze oben), trage ich unter «Grid System» im Feld «Enter your own» den Wert «3 9» ein, um eine 3:9-Aufteilung zu erhalten. Nach einem Drag’n’drop sieht das Ganze schon so aus:

In die breite Spalte rechts ziehe ich aus dem Menu «Components» einen «Page Header»:

Und darunter gleich nochmal eine «6 6?-Spaltenverteilung aus dem Menu «Grid System»:

In die zwei neuen Spalten kommen aus dem Menu «Components» zwei einfache «Text»-Elemente:

Für die Navigation auf der linken Seite nehme ich das Element «Navs» aus «Components»:

Da das in der Standard-Konfiguration eher für horizontale Navigationen ausgelegt scheint, fahre ich mit der Maus über das Element und wähle im Dropdown «Styles» den Wert «Pills»…

… und klicke einmal auf den Button «stacked» daneben, damit die Menüpunkte untereinander erscheinen:

So, fast fertig. In die grosse Spalte oben ziehe ich aus dem Menü «JavaScript» ein «Carousel» und probiere es aus lauter Freude grad aus:

Schön effizient, oder?

Exportieren, prüfen, Feierabend

Oben unterhalb der Browser-Adresszeile findet sich der Vorschau-Button, mit dem ich mir das Ergebnis anschauen kann:

Wenn es mir gefällt, klicke ich grad daneben auf «Download». Wer jetzt denkt, dass er es ja gewusst habe, liegt falsch! Da steht zwar etwas von Login und sich anmelden etc. aber das ist keine Pflicht. Ganz unten findet sich ein Knopf: «continue non logged». Wenn ich den anklicke, finde ich den generierten HTML-Code zum rauskopieren oder ein komplettes ZIP-File mit allen benötigten Dateien zum Herunterladen.

Tipp: Wer sich anmeldet, kann seine Layouts für eine spätere Weiter- oder Wiederverwendung speichern lassen.

Die ZIP-Datei lade ich runter, entpacke sie und finde darin ein index.html sowie alle nötigen Komponenten:

Da ich ja – wie oben schon erwähnt – Wert auf validen Code lege, lade ich die index.html noch schnell beim http://validator.w3.org hoch und bin happy – keine Fehler:

Ich mache zufrieden Feierabend, da mich morgen noch einiges an Fine-Tuning erwartet:

• Die un-semantischen HTML-Tags namens DIV wollen mit den korrekten HTML5-Tags ersetzt werden
• Das kundenspezifische Layout will in CSS erstellt bzw. angepasst werden
• Die Inhalte wollen geschrieben werden

Aber das mache ich alles morgen!