Alle Artikel

Bootstrap Studio

Eine leistungsstarke Desktop App zum Erstellen ansprechender Websites

Bootstrap Studio ist eines unserer Tools für kleinere bis mittelgroße Projekte mit überschaubarem Umfang. Seine leistungsstarke Drag and Drop Oberfläche ermöglicht es uns zügig Webseiten direkt im Code zu konzipieren bzw. umzusetzen. Mit dem WYSIWYG Editor (What You See Is What You Get) lassen sich Webseiten schon mit wenigen Klicks zusammenstellen. Diese Anwenderfreundlichkeit macht es zu einem optimalen Tool im gesamten Team: Unsere Designer realisieren schnelle Screendesigns und die Frontend Entwickler modellieren auf kurzem Wege ausgewählte Elemente. Aber auch für unsere Azubis, bietet sich Bootstrap Studio an, um in eigenständigem Workflow Websites zu bauen und sich in der direkten Umsetzung auszuprobieren.

Arbeiten in 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.

Bootstrap Studio Code

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.

Bootstrap Studio Templates

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.

Bootstrap Studio Export Files

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."

Alle Artikel

Kommentare

Toni - 11. März 2020 - 21:12
Da ein Import eines Templates nur als Custom Code möglich ist, arbeite ich derzeit an einem Web Service, welcher aus einer Vorlage ein Bootstrap Studio Design erstellt. Dies macht die Bearbeitung von Templates noch einfacher... Bis zur Veröffentlichung wird es noch etwas dauern... Schaut euch das Preview Video an und hinterlasst ein Kommentar... Sorry, das Video ist jetzt nur mal spontan aufgenommen ;) https://tinylink.app/328Fd

Neuen Kommentar schreiben