Effiziente Webentwicklung mit Styleguides: Vorteile, Merkmale & Best Practices

Was ist ein Styleguide?

Ein Styleguide bietet Informationen über das Corporate Design des Unternehmens. Dieser bildet die Basis, damit ein einheitlicher Unternehmensauftritt über alle Medien hinweg sichergestellt werden kann.

Gleichzeitig beschleunigt ein Styleguide den Entwicklungsprozess erheblich, da nicht mehr bei jeder neuen Elementkombination eine Vorlage von einem Designer erstellt werden muss – vordefinierte Elemente können meist flexibel miteinander kombiniert werden.

Hierbei ist es wichtig, dass auch die Designer des Styleguides die Anforderungen und Möglichkeiten von Webanwendungen kennen.

Unterschiede Web vs. Print

Die Komplexität von Webanwendungen im Vergleich zu Printprodukten ist bemerkenswert unterschiedlich. Bei Printmedien, sei es Visitenkarten, Briefpapier oder Magazine, handelt es sich um feste, statische Formate. Ein Designer gestaltet beispielsweise eine A4-Seite, die dann gedruckt wird und in ihrer physischen Form unveränderbar bleibt. Im Gegensatz dazu ändert eine Zeitschrift ihre Größe beim Durchblättern nicht.

Websites hingegen bieten ein variableres Erlebnis. Sie werden von einer Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen, Auflösungen und Orientierungen aufgerufen. Besonders bei mobilen Geräten wie Smartphones und Tablets kann die Ansicht durch einfaches Drehen des Bildschirms schnell wechseln.

Technische Hindernisse tragen weiter zur Komplexität bei. Abhängig von Browser, Betriebssystem und Bildschirmtyp können unterschiedliche Herausforderungen entstehen. Wer erinnert sich nicht an die Herausforderungen, die der Internet Explorer für Webentwickler mit sich brachte? Auch heute gibt es Einschränkungen, zum Beispiel durch Apple. Während einige Browserfunktionen im Safari-Browser auf dem Mac verfügbar sind, fehlen sie auf iOS-Geräten wie dem iPhone oder iPad.

Ein weiteres zu beachtendes Element ist die Darstellung von Farben. Bei Printmedien geht es oft um die richtige Farbsättigung. Bei Websites müssen wir die variierende Display-Qualität von Endgeräten berücksichtigen. Ein Farbkontrast, der auf dem Premium-Monitor eines Designers brillant aussieht, kann auf einem Standard-Office-Monitor völlig anders wirken. Einige Monitore können beispielsweise bestimmte Weißtöne nicht getreu wiedergeben, was bedeutet, dass ein Design, das auf einem Gerät großartig aussieht, auf einem anderen verloren geht.

Kurz gesagt, während Printdesigns ihre eigenen Herausforderungen haben, erfordert die Webentwicklung ein tiefes Verständnis für eine breitere Palette von Variablen und potenziellen Hindernissen.

Digitales Design

Die Landschaft der Endgeräte für Webanwendungen ist äußerst vielfältig. Das responsive Design, welches die Website-Ausgabe automatisch an unterschiedliche Bildschirmgrößen anpasst, ist heute Standard.

Design-Profis mit einem Hintergrund im Printbereich stehen hier vor einer Umstellung: Statt pixelgenauer Vorgaben sind allgemeine Design-Prinzipien gefragt. Ein Styleguide für Webanwendungen definiert in erster Linie ein Regelwerk, aus dem dann konkrete Designs abgeleitet werden können. Dabei kann der Designer sowohl die Basisgestaltung als auch beispielhafte Ableitungen liefern. Solche Leitfäden sind oft unerlässlich für Entwickler und Redakteure, um den gewünschten Designkonsens beizubehalten.

Statisches Design

Zu Beginn des Smartphone-Zeitalters wurden häufig zwei Versionen einer Website bereitgestellt: Eine für den Desktop und eine für mobile Geräte. Ein Beispiel dafür ist Spiegel Online, welches eine mobile Variante über die Subdomain m.spiegel.de anbot. Obwohl diese Methode suboptimal war, wurde sie über viele Jahre verwendet. Angesichts der steigenden Anzahl an unterschiedlichen Endgeräten wurde nach flexibleren Lösungen gesucht.

Spiegel Online August 2019 Mobil/Desktop Version jeweils in Mobil/Desktop Ansicht. Klassisch: Der Link zur Mobil-Version mit eigener Subdomain.

Rasterbasiertes Design

Der Rasteransatz kommt aus dem Printdesign und erlaubt das einfache und strukturierte Layouting in Spalten und Reihen, ähnlich einer Tabelle. Tatsächlich wurden früher Websites vor allem mit Tabellen gebaut, was zu sehr starrem Verhalten führte. Eine dynamische Anpassung an Mobilgeräte erfolgt hier noch nicht.

Fluides Design

Dieser Ansatz passt die Maße der Elemente proportional zur Bildschirmgröße an. Das funktioniert so lange gut, solange die Bildschirme nicht zu breit oder zu schmal werden – gerade Smartphones haben aber extrem abweichende Breiten und Höhen durch ihren schmalen Aufbau und da sie sowohl horizontal, als auch vertikal genutzt werden können. Ein rein fluider Designansatz würde so zu extrem breiten oder schmalen Spalten oder Elementen führen.

Responsives Design

Hierbei handelt es sich um einen Sammelbegriff, der alle Techniken vereint, die das Nutzererlebnis auf jedem Endgerät optimal gewährleisten. Hier können Spalten für eine Rasteransicht genutzt werden, wenn der Bildschirm groß genug ist, ansonsten werden die Spalten fluid verkleinert und ab bestimmten Bildschirmgrößen in neue Zeilen umgebrochen (Breakpoints).

Wichtig ist hier das situative Zusammenspiel der verfügbaren Techniken und gleichzeitig auch die Bedienbarkeit für den Content Creator (Redakteur). Idealerweise gibt es ein funktionierendes Standardverhalten, das bei Grenzfällen oder Sonderwünschen flexibel für einzelne Elemente angepasst werden kann. Hierzu gibt es viele populäre Ansätze, wir stellen hier zwei vor.

Spaltenbasierte Frameworks

Das wahrscheinlich populärste spaltenbasierte Framework ist Bootstrap. Diese geben insbesondere das responsive Verhalten von Designelementen durch ein technisches Konzept vor. Die Entwicklung von Websites konnte hierdurch massiv beschleunigt werden. Der Ansatz war so erfolgreich, dass inzwischen zahlreiche Designer nach dem 12-Spalten-Raster von Bootstrap arbeiten.

Spaltenbasierte Frameworks wie Bootstrap haben jedoch mehrere Nachteile:

• Diese Frameworks sind häufig monolithisch, also nicht modular und erhöhen den Overhead einer Website, was zu einem schlechteren PageSpeed führt.
• Die Anzahl der möglichen Spalten ist meist limitiert, bei Bootstrap beispielsweise auf 12 Spalten. Das führt zu Limitierungen in der Anzahl der Elemente, die bei begrenztem Platz nebeneinander dargestellt werden können.
• Man tendiert technisch zu einer starken Verschachtelung der HTML-Elemente, was die Komplexität erhöht.
• Meist weichen Designer dann doch etwas vom Regelwerk des Frameworks ab – das führt zu enormen Aufwänden für eigentlich triviale Designelemente, da diese nicht mehr sinnvoll innerhalb des Frameworks umgesetzt werden können oder es teilweise zu starken Abweichungen gegenüber der Designvorlage führen würde.

Da der spaltenbasierte Ansatz immer noch auf der Rastervorstellung basiert, hat man zwar einen regelbasierten Ansatz, allerdings immer noch historisch abgeleitet aus dem Rasterkonzept des Print-Designs.

Blockbasierte Frameworks

Blockbasiertes Layouting folgt einem modularen, regelbasierten Ansatz. Statt globaler Regeln für ein festes Raster, gibt es globale Regeln für das Verhalten von Elementen, die hier Blöcke genannt werden. Jeder Block hat wiederum eigene globale Regeln, von denen nochmals individuell abgewichen werden kann. Das Verhalten von Elementen wird also vererbt und kann individuell überschrieben werden.

Blockbasierte Frameworks, wie der WordPress Block Editor (Gutenberg) haben einige Vorteile:

• Durch den modularen Ansatz ist der Overhead gering und der PageSpeed kann entsprechend hoch sein.
• Es gibt keine Limitierung in der Anzahl der Spalten.
• Verschachtelungen können auch hier sinnvoll sein, sind aber seltener und weniger ausgeprägt nötig.
• Jeder Block funktioniert grundsätzlich erst einmal nach den globalen Regeln stabil und zuverlässig – Abweichungen können für individuelle Blöcke oder Blockgruppen als Sonderregeln definiert werden.

Da nicht mehr alles in einem Raster abgebildet werden muss, können Elemente viel leichter ausbrechen – beispielsweise beliebig breiter sein, als die normale Textbreite und das nicht mehr nur innerhalb von vorgegebenen Spalten.

Ein Element erhält die Anweisung, wie breit es maximal werden darf – beispielsweise 1300 Pixel oder 100%. Ist der Bildschirm des Endgeräts breiter, wird das Element niemals größer als die definierte maximale Breite. Ist der Bildschirm kleiner, wird die Elementbreite entsprechend reduziert.

Ein Designer kann im blockbasierten Layout also eine Gruppe mit der maximalen Standardbreite festlegen. Diese verkleinern sich und brechen bei der Nutzung von Spalten je nach erreichtem Breakpoint responsive um. Die nächste Blockgruppe kann eine völlig andere maximale Breite haben. Diese überschreiben dann die global festgelegte maximale Standardbreite. Für Fließtexte könnte für den verbesserten Lesefluss beispielsweise eine maximale Breite von 800 Pixeln besser geeignet sein.

Die globalen Regeln und Sonderregeln legt idealerweise der Designer in Zusammenarbeit mit den Entwicklern fest – in einem Styleguide. So ist klar, welche Standardbreiten es gibt, bei welchen Breakpoints umgebrochen werden soll etc.

Empfehlung für responsive Designs

Statische, rein rasterbasierte oder fluide Designansätze erfüllen nicht die heutigen Qualitätsstandards im Webdesign. Gerade wenn ein Design für einzelne Elemente spezifisches Sonderverhalten vorsieht (Logikabweichungen), kommt ein spaltenbasiertes Framework an seine Grenzen.

In der Regel haben Auftraggeber, Designer und Entwickler ein gemeinsames Ziel: Die Designvorstellung soll möglichst exakt, aber flexibel auf einer Website umgesetzt werden. Dieser Spagat gelingt, indem man einerseits Kontrolle gewinnt und an anderer Stelle abgibt.

Pixelgenaues Layouting aller Elemente ist nicht das Ziel, da dies unendlich viele Sonderregeln benötigt – stattdessen soll ein logisch stimmiges und optisch ansprechendes dynamisches Verhalten der Elemente erzielt werden.

Der blockbasierte Ansatz versucht nicht ein für die ganze Website gültiges Raster festzulegen, sondern gibt ein Standardverhalten vor, aus dem idealerweise individuell für jeden Block jederzeit ausgebrochen werden kann. Dies erfordert aber gerade im Designprozess, dass globale Verhaltensregeln statt globale Raster definiert werden.