Bootstrap Studio

Einige von euch werden sicherlich Twitter Bootstrap kennen. Es ist eine der bekanntesten HTML, CSS und JS Frameworks für responsive Webentwicklung. Bootstrap vereinfacht einiges, doch mit Bootstrap Studio wird das alles noch einfacher! Mit dem WYSIWYG (What You See Is What You Get) Editor lassen sich Webseiten mit wenigen Klicks einfach zusammenstellen. Doch wie viel kann Bootstrap Studio? Und erlaubt es einem auch Freiräume um aus dem Standard Bootstrap Design herauszustechen?

Bildschirmfoto 2016-02-25 um 20.02.30.png

Drag & Drop Editor

Wie immer geht es los mit einem neuen Projekt/Dokument. Bootstrap Studio arbeitet dabei aber mit einem eigenen Dokumentformat, was 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 ’n‘ Drop in die Bibliothek und später in die Seiten eingefügt werden.

Nun könnt ihr anfangen die Seite aus einer Vielzahl an Bootstrap Komponenten per Drag & Drop zusammenzuschieben. Hier gibt es eine große Auswahl gruppiert nach Text, Image, Controls, Grid, Containers, usw. Das ganze hinzufügen der Elemente funktioniert soweit auch einwandfrei! Ihr könnt einfach neue bzw. bestehende Elemente auf der Seite selbst verschieben oder auch links in der Hierarchie Ansicht (Overview).

Drag and Drop.gif

Wie man hier auf dem GIF auch sieht, lassen sich eigene Elemente speichern um sie später wieder einzufügen. Das funktioniert prinzipiell mit jedem Element bzw. mit jede Elementgruppe. Entweder ihr erstellt ein solches Preset direkt aus Bootstrap Studio oder ihr importiert sie von HTML und CSS code.

Custom Element

 

Eigene Style Anpassungen & 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.

Leider ist es momentan noch nicht möglich die verschiedenen CSS Dateien auf die Seiten aufzuteilen. Also momentan werden alle eigenen CSS die man erstellt in jede Seite verlinkt. Die Entwickler haben mir aber bestätigt, dass sie an dieser Funktion arbeiten um sie in den kommenden Wochen zu veröffentlichen.

Custom CSS

Wer nicht so viel Kenntnisse mit HTML und CSS hat, kann die Seite auch komplett basierend auf einem Bootstrap Theme erstellen. Hier liefert Bootstrap Studio einige bereits mit, wie z.B. Cerulean, Darkly, Paper, United und viele mehr. Wer möchte kann aber auch noch eigene Themes hinzufügen.

Theme Selection

Hier hätte ich mir noch eine kleine Vorschau Funktion gewünscht mit der man einen schöneren Überblick über alle Themes hat. Momentan ist das nur eine simple Text-Liste.

Live Preview

Bootstrap Studio arbeitet, wie das für einen WYSIWYG (What You See Is What You Get) Editor nicht anders sein könnte, mit einem Live Preview der Seiten. Schön ist hier, dass es bereits als Vorschau Größen diese 4 zur Auswahl gibt: Phone, Tablet, Laptop und Desktop. Dies sind vorgefertigte Breiten von den gängigsten Größen. Das ist zwar sehr praktisch! Jedoch hätte ich mir als weitere Optionen folgende gewünscht: eigene Breite und komplette Editor Breite. Gerade an einem größeren Bildschirm kann es praktisch sein, die Seite auch in kompletter Editor Breite zu testen und nicht nur mit maximal 1200px Breite (Desktop Preset).

Preview

Aber zum Glück gibt es dafür den Live Preview im eigenen Browser! Durch aktivieren des Live Preview erstellt Bootstrap Studio eine URL die von allen Browsern und Geräten im gleichen Netzwerk geöffnet werden kann. Ihr könnt also nicht nur auf dem eigenen Computer mit einem beliebigen Browser die Seite testen, sondern auch z.B. auf dem iPad oder iPhone. Und das ganze ist tatsächlich Live. Also sobald ihr eine Änderung tätigt wird die Seite im Hintergrund neu geladen und ihr seht sofort die Anpassung.

Live Preview.png

 

Multi Platform

Bootstrap Studio unterstützt nicht nur Mac OS X, sondern auch Windows und Linux! Ich habe nur die Mac Version getestet, aber ich denke die anderen Plattformen werden sich nicht unterscheiden. Man merkt nämlich das es keine native Mac App ist. So sind ein paar wenige Standard Abläufe nicht wie gewohnt implementiert. Das ist aber nicht weiter dramatisch.😉 Tastenkombinationen werden trotzdem für jede Plattform unterstützt. Am ungünstigsten fand ich eigentlich nur die Beenden Warnung:
Close Alert

Hier hätte ich mir doch den Klassiker Dialog gewünscht: Speichern | Nicht Speichern | Abbrechen

 

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 könnt ihr nicht einfach die HTML Dateien kopieren. Dafür gibt es die Export Funktion, die alles für den Upload auf den Server vorbereitet.

 

Fazit

Alles in allem ist Bootstrap Studio ein sehr schöner und praktischer Editor! Ich finde er hat viel Potenzial und kann das erstellen von Webseiten enorm vereinfachen. Bootstrap Studio unterstützt leider noch nicht alle Objekte/Funktionen/Optionen von Bootstrap, aber die Entwickler sind sehr aktiv beim Support und vor allem bei der Weiterentwicklung des Editors. So kommen in der nächsten Version (voraussichtlich am 29.02.) neue Bootstrap Elemente hinzu!

Bootstrap Studio ist also eher ein Tool für kleinere Projekte. Wer eine große umfangreiche Webseite erstellen möchte wird vielleicht an die Grenzen von Bootstrap Studio kommen und lieber einen klassischen Editor verwenden wollen. Dafür eignet es sich für kleinere bis mittelgroße Projekte Ideal!

Als kleines Problem sehe ich nur die Lernkurve. Wer bis jetzt noch nie was von Bootstrap gehört hat oder sich noch nie damit auseinander gesetzt hat wird hier ein bisschen brauchen bis er sich zurechfindet. Die Namen der Elemente sind zwar meistens selbsterklärend (wenn auch auf Englisch), jedoch braucht es ein bisschen Übung bis man versteht welche Elemente wie geschachtelt werden müssen und welche Optionen es gibt. Daher sollten Neueinsteiger (oder Interessierte) vielleicht erst mal die Testversion auf der Produktseite ausprobieren!😉

Wer ansonsten gerade überlegt zuzugreifen: Momentan gibt es 50% Rabatt! Und ihr könnt die Lizenz für bis zu 3 Computer nutzen.

 

PREIS:
50$ (momentan noch 50% Rabatt)

ENTWICKLER:
Zine EOOD

SYSTEMVORAUSSETZUNGEN:
OS X 10.8 oder neuer (alternativ Windows 7 oder neuer, Linux)

STORE LINK

 

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s