ARBEITEN MIT BOOTSTRAP

Werkzeuge prägen unsere Arbeit – auch wenn sie es nicht sollten, sie tun es. Wenn Sie letztlich nur einen Hammer haben, sehen die Probleme vielleicht alle wie Nägel aus. Es lohnt sich also, hin und wieder einen Blick auf die Werkzeuge zu werfen, die wir benutzen, um sicherzustellen, dass wir sie benutzen, weil sie zu unseren Zwecken passen, und nicht, weil wir unsere Zwecke an ihre Verwendung angepasst haben. Heute möchte ich mir Folgendes ansehen: Bootstrap.

Hack/Design

Bei einem kürzlich durchgeführten Projekt haben wir die übliche Kombination aus (in diesem Fall) Visio und Photoshop verwendet, um eine komplexe Webanwendung zu entwerfen. Nach einiger Zeit im – agil gesteuerten – Projekt kamen wir an einen Punkt, an dem eine sehr gefragte Funktion für die Entwicklung hochgefahren wurde: das Drucken des Seiteninhalts ohne die gesamte umgebende Navigation. Einfach genug, aber wie bei allen Dingen gibt es immer mehr als einen Weg.

Normalerweise hätten wir Visio (und Photoshop) angeworfen, um uns ein paar Variationen einfallen zu lassen, wo das Feature platziert werden soll und wie der Ablauf gestaltet werden soll. Unwichtiges Zeug, aber bei einem so wichtigen Feature kommt es auf Kleinigkeiten an. Aber zu diesem Zeitpunkt hatten wir bereits eine teilweise funktionsfähige App, die mehrere Testrunden mit Click-Dummies, Prototypen oder sogar vollwertigen Beta-Versionen durchlaufen hatte, so dass die Erstellung flacher, nicht-interaktiver Dateien, um die Variationen an die Beteiligten zu kommunizieren und zu entscheiden, welche sich am besten anfühlt und funktioniert, einfach überholt schien.

So verwendete ich stattdessen ein Tool, an dem ich schon seit ein paar Wochen herumgebastelt hatte: Bootstrap.

Nun ist Bootstrap streng genommen kein Design-Tool. Es ist ein Gerüst zum Erstellen von Websites. Es hat ein anständiges Frameork eines grundlegenden, css-basierten Designs – mit einem 12-spaltigen, responsiven Grid! plus allem, was man in Bezug auf Buttons, Navbars und Paginierung etc. – und eine gut dokumentierte Reihe von Javascript-Funktionen wie Dropdowns, Tabs, Karussell und Typeahead. Um es zu benutzen, brauchen Sie also ein gewisses Grundverständnis von HTML, CSS, Javascript und wie dieses Zeug funktioniert: aber glauben Sie mir – ein Grundverständnis reicht aus. Das Herunterladen des Frameworks und das Importieren in Ihren bevorzugten HTML-Editor (ich verwende Aptana, aber andere Editoren sind verfügbar) ist eine Sache von Minuten.

Ich habe dann eine Darstellung unserer App auf Basis von Bootstrap gebaut: kein Backend, nur ein Frontend, das noch skizzenhaft aussieht. Es sollte die Idee vermitteln, wie sich der User-Flow für den Druck anfühlt, nicht das gesamte Produkt nachbilden. Auf diese Weise konnte ich mich darauf konzentrieren, die Idee zu vermitteln, indem ich sie einfach in Aktion zeige – anstatt Seiten umzublättern und zu sagen: und dann passiert dies, und dann das…

Wenn ich danach zu den Beteiligten ging, konnte ich ihnen das Design-Konzept in seiner natürlichen Umgebung zeigen: dem Browser. Und zwar nicht nur einen Browser, sondern alle relevanten, die wir zur Verfügung hatten. Wir waren uns schnell einig über das weitere Vorgehen und hatten eine klare, gemeinsame Vorstellung vom zu erwartenden Ergebnis – und das schließt die Entwickler mit ein.

Das war nicht der einzige Fall, in dem ich festgestellt habe, dass die Verwendung von HTML/CSS/JS in der einfachen, zugänglichen Form von Bootstrap der beste Weg war, um Ideen an alle Mitglieder des Teams und Stakeholder außerhalb des unmittelbaren Teams zu kommunizieren. Und das gilt vor allem, wenn es um Ideen geht, die Interaktion beinhalten, aber auch, wenn man Seiten-Layouts ausprobiert (wir haben alle schon diese schönen, ausufernden Designs gesehen, die, wenn man sie in einem Browser normaler Größe betrachtet, einfach zu groß sind, um in den Viewport der gängigsten Benutzereinstellungen zu passen).

Wofür Bootstrap wahrscheinlich nicht gut ist, ist die erste Skizze. Diese ersten Ideen niederzuschreiben, um zu sehen, wohin die Aufgabe führt: dafür verwende ich meistens ein anderes meiner Lieblingswerkzeuge: Stift & Papier.

Checkliste

Nun ein kurzer Überblick über Bootstrap pro und contra:

+ es ist eine richtige Webseite, in einem Browser!
+ sehr nah am fertigen Produkt: hilft Ihnen zu verstehen, wie Sie mit dem Material arbeiten, in dem es schließlich produziert wird.
+ responsive (so responsive wie Sie es machen)
+ Standarddesign, leicht anpassbar
+ viele Interaktionen mit ein wenig Kodierung, alle Interaktionen mit ein wenig mehr Kodierung (unter Verwendung von Dingen wie jquery etc)

– keine Hardcopies, wenn Sie also an eine Druckausgabe denken, ist es wahrscheinlich nichts für Sie (es sei denn, Sie wollen von einem Browser aus drucken)
– Kodierung, nicht Drag-and-Drop und so
– Annotation ist schwierig: Sie können die Inline-Labels und Badges des Tools verwenden, um Annotationen zu erstellen, aber dies interaktiv über das Web zu tun, erfordert ein wenig Arbeit. Es gibt Lösungen, aber… das ist eine andere Geschichte

Benötigte Software
– HTML / CSS-Editor
– Bootstrap (keine Software, sondern Framework, aber, Sie wissen schon…)

Kosten
– Bootstrap ist kostenlos
– Aptana Studio ist kostenlos, andere Editoren können Geld kosten.