Der Styleguide definiert das Erscheinungsbild Ihrer Webseite
Zu einer professionellen Website gehört ein konsistentes Erscheinungsbild. Die Basis dafür legen Sie am besten über einen eigenen Styleguide. Wie Sie diesen aufsetzen, erklären unsere Tipps.
Ein Styleguide ist eine Richtlinie, in der Sie die Grundlagen für die Gestaltung Ihrer Website festlegen. Dies ist vor allem dann wichtig, wenn es sich nicht um eine private Site handelt und sich mehr als eine Person um die Pflege kümmert. Im optimalen Fall legen Sie einen Online-Styleguid...
Ein Styleguide ist eine Richtlinie, in der Sie die Grundlagen für die Gestaltung Ihrer Website festlegen. Dies ist vor allem dann wichtig, wenn es sich nicht um eine private Site handelt und sich mehr als eine Person um die Pflege kümmert. Im optimalen Fall legen Sie einen Online-Styleguide an, bevor Sie mit der Entwicklung oder der Aktualisierung einer Webseite beginnen. Damit haben Sie ein Konzept, das Sie potenziellen Auftragnehmern an die Hand geben können.
Je genauer die Anforderungen beschrieben sind, desto näher entspricht das Ergebnis anschließend auch Ihren Wünschen. In diesem Workshop zeigen wir Ihnen, welche Themen Sie auf jeden Fall in einem Styleguide beschreiben sollten, welches wichtige Schwerpunkte sein sollten und warum eine regelmäßige Aktualisierung notwendig ist. In der zweiten Hälfte des Artikels stellen wir Ihnen darüber hinaus den Vorschlag eines Designers zur möglichen technischen Umsetzung eines Styleguides vor.
Der Inhalt
Für die Beschreibung des Aussehens einer Website gibt es verschiedene Optionen und Standards, die jedoch alle das gleiche Ziel haben: das endgültige Erscheinungsbild so gut wie möglich zu beschreiben, damit eine Umsetzung oder spätere Anpassungen ohne größeren Aufwand möglich sind. Zu diesem Zweck sollte ein Styleguide einen definierten Mindestinhalt besitzen. Am Anfang sollte in der Regel eine kurze Beschreibung über die darzustellenden Inhalte, das Unternehmen oder die Produkte zu finden sein.
Damit bekommt der Entwickler oder Designer ein erstes Gespür, in welchem Umfeld er sich bewegt. Zusätzlich dazu sollten Sie auch immer eine grobe Zielrichtung des Dokuments angeben. Zwei gute Umsetzungsbeispiele finden Sie auf der Website der BBC unter dem Stichwort "GEL" sowie beim Styleguide der Bundesregierung.
In beiden Styleguides finden Sie zu Beginn einen Abschnitt, in dem die Grundphilosophie beziehungsweise die Gestaltungsprinzipien beschrieben sind. Nachdem dies geklärt ist, sollten Sie im Anschluss festlegen, welche grundlegenden Elemente bei der Gestaltung einer Website zulässig sind.
Die Grundelemente
Bei einer Firma, Marke, Behörde und so weiter spielt natürlich das Logo eine zentrale Rolle. Geben Sie in Ihrem Styleguide die verschiedenen Varianten an und zeigen Sie auf, in welcher Form das Logo eingesetzt werden darf und welche Veränderungen prinzipiell nicht erlaubt sind. Ein weiterer zentraler Schwerpunkt ist das Layout der Website. In der Regel werden die Elemente einer Internetseite heutzutage über ein Gitter angeordnet.
Der Styleguide der BBC beispielsweise widmet der Anordnung der Elemente ein komplettes Kapitel. Im Gitter geben Sie die Gesamtzahl der Spalten und die Breite der Einzelspalte an - folglich also, wie breit das komplette Gitter ist. Falls Sie auch Ihr Layout auf einem solchen Gitter aufbauen möchten, sollten Sie festlegen, welche Aufteilungen aus Ihrer Sicht zulässig sind. Legen Sie in dieser Definition neben der Breite der Spalten auch die Höhe der Zeile sowie den Abstand zwischen den einzelnen Elementen fest.
Anordnung von Elementen
Ein weiteres Element, das Sie in Ihrem Styleguide beschreiben sollten, ist die Menüstruktur: Wie viele Ebenen darf sie besitzen und wie sind Unterebenen positioniert? Damit haben Sie die Anordnung der wichtigsten Objekte festgelegt und sollten sich im nächsten Schritt um die Definition weiterer Elemente kümmern. Dies sind vor allem die zulässigen Schriftarten, deren Einsatzgebiete und die damit verbundenen Schriftgrößen. Legen Sie für alle Ebenen fest, wie groß die Schrift sein muss: von der Überschrift bis hin zu den Texten innerhalb der Fußzeile. Für einen Designer oder Entwickler muss klar sein, wie er die CSS-Definitionen für die einzelnen HTML-Elemente festlegen muss, um das gewünschte Zieldesign zu erreichen.
Objekte auf der Website
Geben Sie detailliert an, welche Schriftarten auf Ihrer Website zulässig sind und in welcher Ausprägung Sie diese verwenden möchten. Fügen Sie zu jeder Schriftart ein entsprechendes Beispiel hinzu, am besten das komplette ABC in Groß- und Kleinschreibung sowie die Ziffern von 0 bis 9. Definieren Sie die zulässigen Schriftgrößen und geben Sie die notwendigen Rahmenparameter an, wie etwa den Einzug oder die Laufweite der jeweiligen Schriftgröße.
Wenn Sie in einer Darstellung mehrere Schriftarten kombinieren, sollten Sie für die verschiedenen Layouts am besten ein Beispiel mitliefern. Damit ist klar, wie die Gesamtkomposition aussehen sollte.
Wichtig ist in diesem Zusammenhang nicht nur der Einsatz der einzelnen Schriftarten und Schriftstile, sondern auch die Anordnung der Schriften und der Abstand zwischen den Schriften und den anderen Objekten.
Bilder und Symbole
Haben Sie für Ihre Website Standardsymbole vorgesehen, dann sollten Sie diese ebenfalls innerhalb des Styleguides festlegen. Gerade wenn Sie eine umfangreiche Webseite aufbauen und pflegen, kommt schnell eine recht ansehnliche Sammlung zusammen. Geben Sie die Bedeutung der einzelnen Symbole und unter Umständen auch deren Einsatzzwecke an.
Wenn Sie den Einsatz der Symbole im Zusammenhang mit Text planen, ist es wichtig, die zulässige Anordnung festzulegen und am besten mit einem optischen Beispiel zu beschreiben. Gibt es für die Symbole verschiedene Größen? Welche Abhängigkeiten gibt es zu anderen Objekten?
Standardelemente
Abhängig vom Aufbau und den Inhalten Ihrer Website sollten Sie darüber hinaus noch festlegen, welche Gestaltungselemente Sie für Ihre Inhalte vorsehen und ob Sie eine bestimmte Implementierung bevorzugen. Mögliche Objekte in diesem Zusammenhang sind beispielsweise ein Karussell für die Darstellung von Bildern oder ein Akkordeon-Effekt für die komprimierte Darstellung von Text.
Geben Sie in Ihrem Styleguide die zulässigen Darstellungselemente an - falls Sie explizite Implementierungen bevorzugen, dann sollten Sie diese auch entsprechend benennen. Gerade wenn Sie eine Bibliothek wie etwa jQuery verwenden, sollten Sie diejenigen Plug-ins angeben, die verwendet werden sollen. Damit behalten Sie den Überblick über die eingesetzten Bausteine und müssen nicht zu viele Anpassungen beim Erscheinen neuerer Versionen durchführen.
Starterpaket
Wenn Sie Ihren Dienstleistern mehr als den Styleguide liefern möchten, dann sollten Sie ein entsprechendes Starterpaket schnüren. In dieses gehören neben dem eigentlichen Styleguide, falls vorhanden, die verwendeten Symbole sowie ein Layoutbeispiel. Viele Auftraggeber liefern dieses heute noch als Photoshop-Datei mit. Das Bildformat ist noch immer eines der beliebtesten Werkzeuge bei der Erstellung von Grundlayouts und Darstellungsbeispielen.
Diesen klassischen Weg verlässt Stephen Hay mit seinem Ansatz konsequent. Im Internet wird seine Präsentation, gehalten 2012 auf der Smashing Conference in Freiburg, viel diskutiert. In dieser hat er den Grundsatz "Styleguides are the new Photoshop" geprägt und wirbt für ein Vorgehen, bei dem ein webbasierter Prototyp auf Basis eines vordefinierten Styleguides die zentrale Rolle spielt. Der Amerikaner bringt die entsprechende Historie als Entwickler und Berater mit und arbeitet aktuell als Principal Consultant für die niederländische Agentur Zer01nterface.
In seiner Präsentation erläutert Stephen Hay, warum Styleguides in Kombination mit statischen webbasierten Prototypen aus seiner Sicht statische Photoshop-Bilder bei der Gestaltung ablösen werden. Die Präsentation finden Sie unter anderem bei Lanyrd.com.
Die Vorteile
Die Vorteile eines solchen neuen Styleguide-Formats liegen dabei klar auf der Hand: Sie haben ein Werkzeug, mit dem Sie einen besseren Einblick in das Aussehen und die Dynamik einer Website geben können. Dabei sind vor allem, nachdem Sie die grundlegenden Arbeiten erledigt haben, Änderungen deutlich schneller umgesetzt. Sie müssen in der Regel nicht mehr von Neuem beginnen, sondern können die Korrekturen in das aktuelle Design einpflegen.
Damit entfällt vor allem auch die aufwändige Umsetzung eines Photoshop-Bildes in ein webbasiertes Layout. Wenn Sie das Photoshop-Design konsistent umsetzen möchten, ist ein ständiges Nachmessen und die Berücksichtigung der Formate unverzichtbar. Darauf können Sie mit einem neuen Styleguide verzichten, da in diesem die exakten Maße bereits feststehen.
Stephen Hay geht mit seinem Ansatz jedoch noch einen Schritt weiter: Er will nicht nur den Photoshop-Ansatz eliminieren, sondern auch die Erstellung von Webstyleguides deutlich vereinfachen. Dazu formuliert er eine Wunschliste von Funktionen, die für die Erstellung eines solchen Funktions- und Layoutkatalogs gegeben sein sollten. Dabei kommt er auf insgesamt sechs Punkte:
- einfaches Werkzeug zum Beschreiben von Anforderungen
- Werkzeug für Bildschirmfotos
- automatisierte Aktualisierung von Code-Fragmenten
- automatisierte Aktualisierung von Bildschirmfotos
- keine zusätzlichen Dateien für Bildschirmfotos
- Hervorheben der Syntax
In den folgenden Abschnitten stellen wir Ihnen verschiedene Werkzeuge vor, welche Stephen Hay verwendet, um diese Anforderungen umzusetzen.
Beschreiben von Anforderungen
Stephen Hay war auf der Suche nach einem Werkzeug, das all seine Forderungen umsetzt, erkannte aber recht schnell selbst, dass das die sprichwörtliche eierlegende Wollmilchsau wäre. In seiner Präsentation nennt er dies "Sporf" - eine Kombination aus Messer, Gabel und Löffel. Da es einen solchen Sporf im Bereich der Styleguide-Erstellung leider nicht gibt, hat Stephen Hay eine Sammlung verschiedener Werkzeuge und Programme zusammengestellt und zeigt Beispiele, wie er damit seine Anforderungen abdeckt.
Den Start macht dabei eine Kombination der Anwendungen Dexy und Pandoc für die funktionale Beschreibung der Anforderungen. Dexy wurde ursprünglich geschaffen, um Software zu dokumentieren und wissenschaftliche Schriften zu erstellen. Dabei ist ein recht mächtiges Beschreibungswerkzeug entstanden, das Ihnen eine hohe Flexibilität in der Beschreibung eines Szenarios lässt.
Sie entwickeln damit nicht nur einen Styleguide, sondern zeigen auch gleichzeitig, wie das Ergebnis aussehen soll. Im folgenden Beispiel wird eine HTML-Seite dargestellt, in der Sie eine CSS-Datei integrieren und diese auf eine weitere Datei anwenden. Auf diese Weise können Sie Ihren Styleguide formulieren und die Ergebnisse direkt aufzeigen. Damit haben die Entwickler direkt die Grundlage für die Definitionen und müssen sie kein zweites Mal entwickeln.
<html><head><style type="text/css"> {{ pygments[,meinstylesheet. css'] }}</style></head><body><h2>Eine Schaltfl äche</h2> Eine Schaltfläche hat auf der Website folgendes Aussehen:...<div class="mockup"> {{ d[aussehen/aussehen. html|htmlsections'][,button'] }}</div></body></html>
Auf Basis der Informationen in der Datei meinstylesheet.css stellt Ihnen Dexy anschließend nicht nur die formatierte Schaltfläche dar, sondern zeigt Ihnen mit einigen zusätzlichen Zeilen auch noch den entsprechenden Abschnitt innerhalb der CSS-Datei an. Dies ist zwar ein recht technischer Ansatz, der jedoch die Konsistenz Ihrer Entwicklungen sicherstellt. Für den Einstieg in Dexy empfehlen wir Ihnen die Online-Dokumentation "The Dexy Guide", in der Sie schrittweise an das Werkzeug und seine Möglichkeiten herangeführt werden.
Sollten Sie darüber hinaus das Ergebnisdokument in einem bestimmten Format zur Publikation benötigen, bietet Ihnen unter anderem Pandoc gute Dienste. Es handelt sich dabei um einen Konverter für verschiedene Formate. Damit können Sie beispielsweise auch die von Dexy generierte HTML-Datei in ein Opendocument-Format oder eine Mediawiki-Seite konvertieren. Einen ersten Eindruck über das Tool verschaffen Sie sich am besten über die Online-Variante.
Screenshots erzeugen
Die Forderung von Screenshots könnte ein wenig irreführend sein. Stephen Hay sucht an dieser Stelle nach keinem Werkzeug, mit dem Sie in der Manier von Snagit ein Bildschirmfoto machen und es in Ihre Dokumentation integrieren. Letzten Endes sollen die Screenshots eine Voransicht liefern, wie einzelne Teile und Objekte der Website später aussehen sollen. Da Stephen Hay an dieser Stelle einen sehr technischen Ansatz verfolgt, setzt er auf einen Prototypen oder sogar einen Klick-Dummy, bei dem bereits funktionierendes HTML herauskommt. Für die Umsetzung empfiehlt der Entwickler den Einsatz von Javascript-Bibliotheken wie PhantomJS oder CasperJS.
Natürlich können Sie an dieser Stelle jede andere Implementierung einsetzen, mit der Sie Ihre Anforderungen umsetzen können. Ziel dieses Schrittes soll nicht eine bereits fertige Website sein, sondern ein lebender Prototyp, mit dem Sie das Aussehen und erste Effekte ein wenig lebendiger darstellen können.
Update-Fähigkeit
Damit das Ganze einfach aktualisierbar ist, schlägt Stephen Hay ein weiteres Werkzeug als Klammer zum Update Ihrer bisherigen Ergebnisse vor. Ein mögliches Programm in diesem Umfeld ist Jinja, eine Template Engine für Python. Damit können Sie innerhalb einer Sandbox die Ergebnisse Ihrer bisherigen Arbeit darstellen und bekommen direkt jede Aktualisierung angezeigt. Damit ist es auf einfache Weise möglich, Definitionen des Styleguides anzupassen und ohne große zusätzliche Arbeit das Ergebnis direkt zu sehen.
So haben Sie eine leistungsfähige Sammlung an Werkzeugen zusammen, um auf eine andere Art und Weise einen Styleguide zu generieren und bereits einen ersten Eindruck zu vermitteln, wie die Elemente einer Website oder sogar eine komplette Seite aussehen sollen. Ein letztes Werkzeug, das in diesem Zusammenhang noch gute Dienste leis-ten könnte, ist Pygments. Damit können Sie Programmcode oder CSS-Definitionen innerhalb Ihres Styleguides automatisch formatieren.
Es gibt verschiedene vordefinierte Darstellungen, mit denen Sie Ihren Code abbilden können. Damit müssen Sie sich innerhalb des Styleguides keine Gedanken mehr machen, wie die Definitionen dargestellt und hervorgehoben werden, sondern können die Arbeit einem weiteren Werkzeug überlassen.
Die Arbeitsschritte im Überblick
Stephen Hay hat die Vorgehensweise in einem Beispiel dargestellt, das unter Github zur Verfügung steht. Darin werden die verschiedenen Komponenten und deren Interaktion noch einmal gezeigt. Das Ergebnis wird als HTML-Datei in einem eigenen Verzeichnis abgespeichert. Mit diesem Ansatz liefern Sie somit eine direkte Vorschau der Anforderungen in einem Browser und nicht als statische Version in einer Photoshop- Datei.
Wichtig für die Entwicklung ist es jedoch, nie das Ziel aus den Augen zu verlieren. Auch dieser Ansatz will lediglich einen Styleguide entwerfen und nicht direkt die fertige Website mit dem endgültigen Programmcode. Achten Sie bei einem solchen Ansatz auf eine saubere Definition des CSS-Codes, da dieser im Styleguide landet und als Basis für spätere Entwicklungen herangezogen wird.
Fazit
Ein Online-Styleguide ist ein Dokument, das in regelmäßigen Abständen aktualisiert werden sollte. Nur so können Sie neue Entwicklungen für kommende Websites oder Aktualisierungen berücksichtigen und bereits getätigte Anpassungen wieder zurückfließen lassen. Wie bei allen Dokumentationen gehört Disziplin dazu, um den Styleguide regelmäßig und vollständig aktuell zu halten. Geschieht dies nicht, ist das Dokument wertlos und die Grundarbeit verloren. Deshalb haben wir auch den sehr technisch anmutenden Ansatz von Stephen Hay erläutert.
Damit haben Sie zwar zu Beginn ein wenig mehr Aufwand; wenn Sie im Nachgang aber Anpassungen durchführen, sind diese in der Regel schnell in den Programmcode integriert und Sie können sich automatisch einen neuen Styleguide generieren lassen, der die Ergebnisse darstellt. Umfangreiche Arbeiten mit einem Grafikprogramm sind keine notwendig. Nichtsdestotrotz müssen zu Beginn auch bei diesem Ansatz alle Elemente und die Rahmenumstände definiert werden. Nur so behalten externe Dienstleister den Überblick und Sie bekommen eine Website mit einem konsistenten Aussehen.
