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

Effiziente Website-Prototypen erstellen auf Basis von Bootstrap, und erst noch brauchbaren, validen Code erzeugen? Mit Layoutit funktionierts!

AutorAlex Kereszturi
Datum20.09.2017
Lesezeit6 Minuten

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:

moqups - Websites skizzieren

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:

layoutit - Websites skizzieren

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:

layoutit - Websites skizzieren

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:

layoutit - Websites skizzieren

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:

layoutit - Websites skizzieren

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

layoutit - Websites skizzieren

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

layoutit - Websites skizzieren

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

layoutit - Websites skizzieren

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

layoutit - Websites skizzieren

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»

layoutit-08c

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

layoutit - Websites skizzieren

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

layoutit - Websites skizzieren

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:

layoutit - Websites skizzieren

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:

layoutit - Websites skizzieren

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:

layoutit - Websites skizzieren

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!

Seminare für Softwareentwickler

Bei Digicomp finden Sie ein breites Angebot an Weiterbildungen im Bereich Software- und Webentwicklung. Zum Beispiel:

Alle Kurse …

Bei Digicomp finden Sie ein breites Angebot an Weiterbildungen im Bereich Software- und Webentwicklung. Zum Beispiel:

Alle Kurse …


Über den Autor

Alex Kereszturi

Alex Kereszturi ist Web Solution Developer der ersten Stunden, Trike-Fahrer und Hobby-Psychologe. Als einer der ersten «Webpulisher SIZ» und als «Adobe Certified Instructor» entwickelt er seit seinem 15. Lebensjahr Lösungen für das WWW, Mobilgeräte und andere Lebenslagen. Er ist seit über 14 Jahren Kursleiter bei Digicomp, liebt das Sein in der Natur und setzt bei seinen Schulungen auf einen guten Mix aus Information, Praxisübungen und Unterhaltung. Als Inhaber und CEO führt er die Smilecom GmbH als ein kleines aber feines Software-Entwicklungs-Unternehmen und immer wieder ein turbulentes Familienleben mit drei Töchtern.