Styleguide für das Designsystem von Berlin.de

Eine Übersicht über alle Layout-Elemente sämtlicher Verticals (Layoutvarianten) des Designsystems bietet ein Living-Styleguide, der unter styleguide.berlin.de erreichbar ist.

Der Styleguide ist zunächst nach Verticals aufgeteilt. Unterhalb dieser Ebene enthält er globale Layoutregeln und die Layoutelemente des jeweiligen Verticals, einzeln und in beispielhaften Seitenzusammenhängen. Die vereinzelte Darstellung der Layoutelemente ist jeweils mit Code-Beispielen in HTML und den entsprechenden CSS-Klassen versehen. Ansichten jeglicher Art, die im Raum von berlin.de betrieben werden sollen und von externen Agenturen erstellt werden, müssen in Übereinstimmung mit dem gezeigten Markup und den angebotenen Klassen erstellt werden, sofern nicht zwingende Gründe dagegen sprechen.

Abweichungen sind mit der Landesredaktion und BerlinOnline zu besprechen. Hintergrund ist, dass das Markup und die CSS-Klassen im gesamten Raum von Berlin.de möglichst einheitlich gehalten werden sollen. Die externen Agenturen haben zugleich den Vorteil, Teile der Seiten einfach übernehmen zu können. Auch bleiben die grundsätzlichen Layout-Regeln sowie die Anforderungen an Barrierefreiheit und Responsivität durch die Benutzung in weiten Teilen automatisch gewahrt.

Es handelt sich um einen Living-Styleguide. Das heißt, dass die Layout-Regeln als in stetiger Erweiterung befindlich begriffen werden. Zwar zeigt der Styleguide einen zum jeweiligen Zeitpunkt verbindlichen Stand, er bleibt dennoch offen für neue Anforderungen und auf diese reagierende neue Elemente, die in kurzen Release-Zyklen wieder einfließen können.

Sollten Sie also eine Anforderung haben, die eine von Ihnen beauftragte Agentur mit einem neuen Element abdecken will, ist der Styleguide offen dafür. Melden Sie sich hierzu bei der Landesredaktion und BerlinOnline, damit Regeln für eine passende Entwicklung auf der Arbeitsebene mit der Agentur geklärt werden können und das passend entwickelte Element anschließend in den Styleguide übernommen werden kann. Hierdurch befördern Sie zugleich die nachhaltige Entwicklung der eigenen Applikationen, weil diese im Ergebnis Beziehungen zum umfassenden Designsystem unterhalten.

Alle Seiten, die mit Imperia erstellt werden, erhalten automatisch ein Layout aus dem Designsystem von Berlin.de. Jedem Imperia-Verzeichnis wird von der Landesredaktion / Koordinierung Berlin.de ein passendes Vertical (Layoutvariante) zugewiesen. Auswahl, Einsatzgebiete und Darstellungsoptionen von Modulen und Elementen sind vorgegeben und können redaktionell nicht verändert werden. Änderungen werden ausschließlich durch BerlinOnline im Auftrag der Landesredaktion / Koordinierung Berlin.de realisiert.

Der Styleguide des Designsystems von Berlin.de muss offen für verschiedenste Technologien sein. Er ist deshalb kein Styleguide für das Frontend, das Imperia ausliefert bzw. Content, der mit Imperia erstellt und gepflegt wird. Für die Planung von neuen Imperia-Auftritten und die redaktionellen Möglichkeiten der Layoutvarianten nutzen Sie bitte dieses Support-Wiki. In den Bereichen Flex-Module und Templates finden Sie entsprechende Informationen.