Bootstrap Studio

Drag and Drop Editor

Bootstrap Studio arbeitet mit einem eigenen Dokumentformat, das alle wichtigen Dateien (Fotos, CSS, …) in einem Dokument vereint. In jedem Dokument lassen sich beliebig viele Seiten erstellen, die jeweils automatisch als HTML Datei angelegt werden. Externe Schriften und Bilder können per Drag and Drop in die Bibliothek und später in die Seiten eingefügt werden. Auch bereits bestehende HTML und CSS Dateien lassen sich unkompliziert in ein bestehendes oder neues Projekt einfügen.

Mit der Vielzahl aus Bootstrap Komponenten lässt sich eine Seite per Drag and Drop zusammenzuschieben. Das Tool bietet es eine große Auswah, die nach Text, Image, Controls, Grid, Containers, usw. sortiert vorliegt. Das Hinzufügen der Elemente funktioniert einwandfrei. Neue sowie bestehende Elemente lassen sich direkt auf der Arbeitsfläche oder in der linksseitigen Overview Liste verschieben.

Eigene Style Anpassungen und Themes

Generell lassen sich im übrigen alle Elemente frei bearbeiten. Bootstrap Studio gibt die gängigsten Bootstrap Optionen z.B. für Buttons oder die Navigation schon in der Seitenleiste (rechts) an. Wer aber darüber hinaus noch weitere Abänderungen hinzufügen möchte kann jedem Element im live generierten HTML Code eine eigene ID oder weitere CSS Klassen hinzufügen. So kann man nicht nur weitere Bootstrap Optionen anfügen, sondern auch komplett eigene CSS Styles. Wer keine tieferen Kenntnisse im Bereich HTML und CSS hat, kann die Seite auch komplett basierend auf einem vorgefertigen Bootstrap Theme erstellen. Dazu liefert Bootstrap Studio eine Auswahl bereits mit, wie z.B. Cerulean, Darkly, Paper, United und viele mehr. Wer möchte kann aber auch eigene Themes hinzufügen.

Wer keine tieferen Kenntnisse im Bereich HTML und CSS hat, kann die Seite auch komplett basierend auf einem vorgefertigen Bootstrap Theme erstellen. Dazu liefert Bootstrap Studio eine Auswahl bereits mit, wie z.B. Cerulean, Darkly, Paper, United und viele mehr. Wer möchte kann aber auch eigene Themes hinzufügen.

Live Preview

Bootstrap Studio arbeitet, wie für einen WYSIWYG Editor (What You See Is What You Get) üblich, mit einer Live Preview der Seiten. Hilfreich ist, dass es bereits verschiedene Viewport Größen zur Auswahl gibt: Phone, Tablet, Laptop und Desktop. Dies sind vorgefertigte Einstellungen basierend auf den gängigsten Größen.

Durch Aktivieren der Live Preview erstellt Bootstrap Studio eine URL, die von allen Browsern und Geräten im gleichen Netzwerk geöffnet werden kann. So lassen sich also die Seiten nicht nur auf dem eigenen Computer mit einem beliebigen Browser testen, sondern auch z.B. parallel auf Tablet oder Smartphone. Diese Ansicht läuft live, das bedeutet, sobald eine Änderung im Code geschieht, wird die Ansicht auf allen Geräten neu geladen und die Anpassung wird sofort sichtbar.

Export

Wichtig für das Hochladen ist natürlich das Exportieren der Webseite. Da Bootstrap Studio, wie eingangs erwähnt, mit einem eigenen Dokument Format arbeitet, gibt es eine Export Funktion, die die Daten für den Upload auf den Server vorbereitet. Es wird eine statische Website exportiert, die aus HTML, CSS, JS und Bildern besteht. Dazu braucht es nicht mehr als einen Klick zum Exportieren und das Wählen eines Speicherorts, den Rest erledigt Bootstrap Studio in wenigen Sekunden.

Fazit

Alles in Allem ist Bootstrap Studio ein sehr angenehmer und praktischer Editor. Er hat viel Potenzial und kann das Erstellen von Webseiten stark vereinfachen. Bootstrap Studio unterstützt leider noch nicht alle Objekte/Funktionen/Optionen von Bootstrap, doch die Entwickler sind sehr aktiv beim Support und vor allem bei der Weiterentwicklung des Editors. So kommen laufend neue Bootstrap Elemente hinzu. Knifflig ist lediglich die Lernkurve. Wer noch nie zuvor von Bootstrap gehört hat oder sich noch nicht damit auseinander gesetzt hat, wird etwas Zeit benötigen, bis er sich zurechtfindet. Die (englischen) Namen der Elemente sind zwar meistens selbsterklärend, jedoch braucht es ein bisschen Übung bis man versteht welche Elemente wie verschachtelt werden müssen und welche Optionen es gibt. Einige Programmiervorkenntnisse bzw. ein gutes Verständnis von Code sind notwenig, um das starke Tool wirklich sinnvoll nutzen zu können. Durch die Live Vorschau ist es jedoch gleichzeitig ein sehr gut geeignetes Tool, um die eigenen Programmierkenntnisse zu verbessern. Du bist neugierig geworden und möchtest mehr über das Arbeiten in einer Digitalagentur erfahren? Dann ließ doch unseren Blogartikel "Fünf fantastische Gründe dafür, in einer Digitalagentur zu arbeiten".