Quelltext der Seite Leitfaden zum Einsatz des neuen Design-Systems für Online-Angebote der Berliner Verwaltung

[[Category:Design-System]]

== Ein neues Design-System für die Berliner Verwaltung ==
Neben der Digitalisierung von Verwaltungsdienstleistungen und anderen Services für die Bürger:innen nimmt die Regel-, anlass- und themenbezogene Kommunikation in den Online-Channels der Berliner Verwaltung zu. Ob Kampagnen zur Personalgewinnung, ein neues Bauvorhaben unter Beteiligung der Stadtgesellschaft oder aktuelle Informationen rund um das Pandemiegeschehen: Für nahezu jede kommunikative Anforderung wird mittlerweile ein Content-Hub in Form eines Webauftritts benötigt, ein Dach, unter dem alle inhaltlichen Fäden für den Kommunikationsanlass zusammenlaufen und aus dem Inhalte für andere Channels generiert werden können.

In vielen Fällen eignet sich der jeweilige Behördenauftritt nicht für die Umsetzung eines solchen Vorhabens, wenn dieser beispielsweise ausschließlich mehr oder weniger statische Informationen über die Aufgaben und Leistungen der Behörde enthält. Mit dem landesweiten Content Management System (CMS) Imperia ist es grundsätzlich möglich, weitere eigenständige Auftritte der Verwaltung unter Berlin.de zu veröffentlichen. Mittlerweile pflegt die Berliner Verwaltung mehrere Hundert Imperia-Auftritte unter Berlin.de.

Nicht alle Vorhaben lassen sich mit Imperia realisieren. Dies können beispielsweise eigenständige Fach-Anwendungen als webbasierte Online-Anwendungen sein oder bestimmte Contents sowie Frontend-Funktionalitäten, deren Realisierung prioritäre Anforderungen an das Vorhaben darstellen. In solchen Fällen müssen die Vorhaben im Rahmen bestimmter Vorgaben der Landesredaktion (als verantwortliche Koordinierungs- und Steuerungseinheit für Berlin.de) realisiert werden, um dennoch eine einheitliche (Marken-)Kommunikation der Berliner Verwaltung zu gewährleisten.

Mit dem Rebrush für die Landesseiten von Berlin.de wird deren bisherige Layout-Logik verändert: An die Stelle eines statischen “Landeslayouts” für die gesamte Berliner Verwaltung rückt ein komplexes Design-System, das die oben beschriebenen Anforderungen – Zunahme der Online-Kommunikation mit unterschiedlichen Zielstellungen, spezifische funktionale Anforderungen an das Frontend – kennt und darauf reagieren kann. Das neue Design-System hat ein einheitliches Grundlayout, das je nach Kommunikationsziel unterschiedliche gestalterische Ausprägungen besitzt, sogenannte „Verticals“. So erhalten beispielsweise die Bezirksämter mit ihrem wesentlich höheren Anteil an Kommunikation für die Bürger:innen vor Ort ein anderes Layout als die Senatsverwaltungen. Damit bietet das neue Design-System im Gegensatz zum alten “Landeslayout” verschiedene Spezialisierungen auf jeweils unterschiedliche primäre Kommunikations- und Interaktionsaufträge gegenüber den Nutzer*innen. Weitere Vertical-Layouts bzw. Layout-Varianten, die das Design-System erweitern, sind denkbar. Maßgeblich und leitend für die Entwicklung des Design-Systems unter Berücksichtigung des neuen Markendesigns für das Land Berlin sind ein „mobile first“-Ansatz, also die Priorisierung von Layout für die mittlerweile dominanten Endgeräte, mit denen auf die Landesseiten von Berlin.de zugegriffen wird, digitale Barrierefreiheit und Nutzerzentrierung. 

Dieser Leitfaden soll es den Behörden erleichtern, bestehende oder neue Online-Angebote innerhalb des neuen Design-Systems zu veröffentlichen.

== Umstellung von bestehenden Online-Angeboten ==
Das neue Design-System ist verbindlich für alle Online-Angebote der Berliner Verwaltung, bestehende Angebote sind entsprechend an das Design-System anzupassen. Für Auftritte, die mit Imperia realisiert wurden, erfolgt die Umstellung verzeichnisweise. Die Landesredaktion koordiniert gemeinsam mit BerlinOnline und den Behörden die Umstellung ihrer Imperia-Auftritte. Bei externen Angeboten, die nicht mit Imperia realisiert wurden, ist vor der Anpassung eine Abstimmung mit der Landesredaktion und BerlinOnline erforderlich.

=== Imperia-Auftritte ===
==== Einzusetzende Verticals / Layout-Varianten ====
'''Behördenauftritte''' der Senats- und Bezirksverwaltungen sowie nachgeordneter Einrichtungen und Ämter erhalten das für die Behörden vorgesehene Layout (Hauptverwaltung: Organisation / Bezirke: Identity). Pro Hauptverzeichnis (berlin.de/angebotsname/) kann es nur eine Layout-Variante geben. Unterschiedliche Layout-Varianten im gleichen Hauptverzeichnis sind nicht möglich. Ggf. muss die Content-Strategie für den Behördenauftritt im Hinblick auf Nutzerzentrierung geprüft und aktualisiert werden. 

Mit den Vorbereitungen zur Umstellung kann ab dem Zeitpunkt begonnen werden, an dem das Layout zur Verfügung steht. Bitte beachten Sie hierzu die monatlichen Release-Newsletter der Landesredaktion.
* Hauptverwaltung (Senatsverwaltungen, nachgeordnete Einrichtungen bspw. LABO, Polizei, Gerichte – Vertical Organisation): ab Mitte Juli
* Bezirksverwaltung (Vertical Identity): voraussichtlich ab Ende August

'''Themen-, Anlass-, Kampagnen- und projektbasierte sowie zeitlich begrenzte Auftritte''' werden durch die Landesredaktion in das Design-System eingeordnet. Pro Hauptverzeichnis (berlin.de/angebotsname/) kann es nur eine Layout-Variante geben. Unterschiedliche Layout-Varianten im gleichen Hauptverzeichnis sind nicht möglich. Die für die betroffenen Auftritte jeweils verantwortlichen Behörden werden durch die Landesredaktion über das weitere Vorgehen informiert. 

Mit den Vorbereitungen zur Umstellung kann ab dem Zeitpunkt begonnen werden, an dem das zugehörige Layout zur Verfügung steht. Bitte beachten Sie hierzu die monatlichen Release-Newsletter der Landesredaktion. 
* seit Mitte Juni: Vertical Marketing (Fokus auf Emotionalität und Interaktion)
* ab Mitte Juli: Vertical Marke/Organisation (Fokus auf Landesmarke, für alle Auftritte, denen kein spezielleres Vertical zugeordnet werden kann)
* voraussichtlich ab Mitte August: 
** Vertical Identity (Lokaler Bezug und Identität stehen im Fokus)
** Vertical Bürgerservice (Verwaltungsdienstleistungen)
** Vertical Assetservice (Daten- und/oder Dateien-fokussierte Angebote)
* Anschließend: Vertical Press (Presseinformation) / Business (Fokus auf Wirtschaft)

==== Vorschau auf das neue Layout ====
Mit dem Imperia-Release am 14.07.2021 kann der eigene Imperia-Live-Content neben der gewohnten Ansicht auf den Berlin.de-Seiten in einer zweiten Live-Umgebung angesehen werden, die bereits das neue Layout zeigt – stg.berlin.de. Dabei handelt es sich um einen Stage-Release, der es den Redaktionen ermöglichen soll, den eigenen Content im neuen Layout zu prüfen und anzupassen. Formulare und die Simple-Search werden in diesem Zustand noch nicht vollständig richtig aussehen, ebenso kann es zu Problemen mit interaktiven Elementen kommen (Javascript). Dieser Zustand ist im Stage-System normal und wird vor dem Livegang behoben. Im Fokus steht die Passung zwischen den eigenen Inhalten und Bildern mit dem neuen Layout.

==== Zugang zur zweiten Live-Umgebung ====
Das neue Layout kann unter der Domain stg.berlin.de/angebotsname/ vor der Live-Umstellung angesehen werden. Die Aktivierung des Layouts unter stg.berlin.de/angebotsname/ erfolgt, sobald es mit dem Release verfügbar ist. Bitte beachten Sie hierzu die monatlichen Release-Newsletter der Landesredaktion. 

Um die Seiten unter stg.berlin.de/angebotsname/ aufrufen zu können, muss ein Passwort eingegeben werden. Dies ist eine Sicherheit, damit keine Suchmaschinen die Seiten indexieren oder sonstige Nutzer die Seiten einfach aufrufen können. Die Zugangsdaten zu stg.berlin.de/angebotsname/ befinden sich in der E-Mail von der Landesredaktion zu diesem Thema.

Die Aktivierung des Layouts in der zweiten Live-Umgebung wird durch BerlinOnline durchgeführt. Dazu ist eine Bearbeitung der Metanavigation der Auftritte durch BerlinOnline nötig. Die Umstellung erfolgt zeitnah nach dem Release, wird aber einige Tage in Anspruch nehmen. Die Bearbeitung der Metanavigation durch den Support (Nutzer: BerlinOnline Lippoldt Nicole (nlippoldt)) erfolgt an den Tagen nach dem jeweiligen Release, ggf. bis in die folgende Woche hinein. Die Metanavigation muss zur Aktivierung des Layouts unter stg.berlin.de/angebotsname/ freigeschaltet werden. Ist dies nicht möglich, wird es dazu an die betreffenden Behörden eine Information durch die Landesredaktion geben.

==== Prüfen des Auftritts in der Layout-Vorschau ====
Sobald das dem Auftritt zugeordnete Vertical auf stg.berlin.de zur Verfügung steht, kann mit der Prüfung der Seiten begonnen werden. Dazu muss im Browser der eigene Auftritt unter stg.berlin.de/angebotsname/ aufgerufen werden. 

Grundsätzlich sollten alle Seiten vollständig auf Darstellungsfehler geprüft werden. Das neue Layout besitzt eine andere Seitenaufteilung, entsprechend haben verschiedene Elemente auf der Seite andere Größen als im alten Landeslayout. Bitte beachten Sie beim Testen von Formularen, dass die dort eingetragenen Inhalte an die E-Mailadressen geschickt werden, die auch unter www.berlin.de angeschrieben werden bzw. die Datenbanken befüllt werden, die auch beim Versand unter www.berlin.de genutzt werden. Einfacher gesagt: Sie befinden sich auf einer zweiten Live-Umgebung, Aktionen die Sie hier ausführen sind “echte” Aktionen und haben die gleichen Folgen wie im Live-System. Im folgenden Abschnitt wird erklärt, worauf Sie achten sollten und wie Anpassungen vorgenommen werden können.

==== Anpassen des Contents in Imperia ====

Dieser Abschnitt befindet sich auf einer [https://support.berlin.de/wiki/Anpassen_des_Contents_in_Imperia separaten Seite]].

==== Umstellung des Imperia-Auftritts auf das neue Layout ====
Im Rhythmus der monatlichen Imperia-Updates werden Auftritte nach Hinweis der Behörden auf das neue Layout umgestellt. Es ist nicht möglich, Auftritte temporär in einem anderen Layout als dem alten Landeslayout zu zeigen, wenn diesen noch kein Vertical zugeordnet wurde oder bisher kein entsprechendes Vertical über stg.berlin.de bereitsteht. Die Landesredaktion informiert die Internetverantwortlichen der Behörden (CvDs) fortlaufend über Timelines und Updates im Design-System. 

Um auf das neue Layout umgestellt zu werden, teilen die CvDs der Landesredaktion und BerlinOnline laufend formlos per E-Mail mit, welche Auftritte bereit für die Umstellung sind. Eine Qualitätsprüfung oder Freigabe der genannten Auftritte durch die Landesredaktion oder BerlinOnline erfolgt nicht. Das neue Layout für die betreffenden Auftritte wird dann mit dem nächsten Release auf Berlin.de angezeigt. 

=== Externe Angebote ===
==== Durchschleifungen ====
Durchschleifungen erhalten das gleiche Layout wie ihre “Rahmenauftritte” unter Berlin.de (siehe Abschnitt [[#Imperia-Auftritte|Imperia-Auftritte]]. Markup und CSS-Klassen des jeweiligen Verticals für die zugehörigen Seiten- und Contenttypen können vollständig oder abhängig der technischen Realisierbarkeit aus dem [[#Online-Styleguide|Online-Styleguide]] übernommen werden. Mindestanforderung stellen hierbei das Layout-Grid und das Look & Feel des Verticals dar. Existieren Anforderungen der Anwendung an das Design-System, die im Styleguide nicht bedient werden können, kann es durch BerlinOnline oder externe Dienstleister erweitert werden. Hierzu ist eine vorherige Abstimmung mit der Landesredaktion und BerlinOnline zum Umfang und zum konkreten Vorgehen erforderlich. 

Grundsätzlich sollten alle Durchschleifungen bereits im Rahmen der Umstellung der “Rahmenauftritte” daraufhin geprüft werden, ob eine Contentmigration nach Imperia oder eine Umstellung als Subdomain-Angebot möglich ist. Durchschleifungen werden nach Bewertung von BerlinOnline aufgrund erheblicher Betriebs- und Sicherheitsrisiken für die Liveserver von Berlin.de zukünftig nicht mehr unterstützt. 

Hinweis: iFrames sind keine Durchschleifungen.

==== Subdomains (www.)angebotsname.berlin.de ====
Eine Übersicht aller vorhandenen Subdomains der Berliner Verwaltung unter Berlin.de sind über die jeweiligen Internetverantwortlichen der Behörden (CvDs) an die Landesredaktion zu übermitteln. Das dafür zu nutzende Dokument wird von der Landesredaktion bereitgestellt. Im Anschluss erfolgt durch die Landesredaktion die [[#Einordnung des Vorhabens durch die Landesredaktion|Einordnung der betroffenen Angebote in das bestehende Design-System]]. Die für die betroffenen Auftritte jeweils verantwortlichen Behörden werden durch die Landesredaktion über die CvDs über das weitere Vorgehen informiert. 

Grundsätzlich sollten alle Subdomain-Angebote unter Berlin.de daraufhin geprüft werden, ob ihr Betrieb weiterhin nötig ist bzw. der Content in bestehende oder neue Imperia-Auftritte migriert werden kann.

==== Angebote außerhalb des Berlin.de-Namensraumes ====
Eine Übersicht aller vorhandenen Angebote der Berliner Verwaltung außerhalb des Berlin.de-Namensraumes (bspw. Angebote auf TopLevel-Domains wie .com, .berlin, .org oder .net) sind über die jeweiligen Internetverantwortlichen der Behörden (CvDs) an die Landesredaktion zu übermitteln. Das dafür zu nutzende Dokument wird von der Landesredaktion bereitgestellt. Im Anschluss erfolgt durch die Landesredaktion die [[#Einordnung des Vorhabens durch die Landesredaktion|Einordnung der betroffenen Angebote in das bestehende Design-System]]. Die für die betroffenen Auftritte jeweils verantwortlichen Behörden werden durch die Landesredaktion über die CvDs über das weitere Vorgehen informiert.

Grundsätzlich sollten alle Angebote außerhalb des Berlin.de-Namensraumes daraufhin geprüft werden, ob ihr Betrieb weiterhin nötig ist. Falls zutreffend, ist das Angebot zwingend unter Berlin.de im neuen Design-System zu veröffentlichen. Dies kann mit Imperia geschehen oder auf einer anderen technischen Basis, die dann per Subdomain in den Namensraum von Berlin.de integriert wird.

----

== Einsatz des Design-Systems bei neuen Online-Angeboten ==

Die Berliner Verwaltung ist nach dem Berliner E-Government-Gesetz verpflichtet, ihre webbasierten Angebote im Stadtinformationssystem unter Berlin.de zu veröffentlichen. Alle Angebote sind dabei innerhalb des verbindlichen Design-Systems und [https://support.berlin.de/wiki/Downloads#Zentrale_Vorgaben_der_Landesredaktion zentraler Vorgaben der Landesredaktion], bspw. hinsichtlich Barrierefreiheit und Datenschutz zu realisieren. Das Design-System ist grundsätzlich flexibel und modular erweiterbar. Alle neuen Online-Angebote der Berliner Verwaltung sind eng mit der Landesredaktion in der Senatskanzlei als zentrale Koordinierungs- und Steuerungseinheit für Berlin.de abzustimmen und durch diese freizugeben. 

=== Einordnung des Vorhabens durch die Landesredaktion ===
Für eine möglichst ressourcensparende und konforme Umsetzung des Vorhaben sollte die Landesredaktion bereits am Projektanfang (vor Auftragsvergabe bzw. in der Planung) einbezogen werden. Anhand eines Grobkonzeptes, eines Anforderungskataloges, Leistungsverzeichnisses oder Lastenheftes und gemeinsamer Abstimmung mit den verantwortlichen Behörden zur technischen Umsetzung wird das Projekt von der Landesredaktion in das Design-System eingeordnet. In diesem Rahmen können auch neue Anforderungen an das Design-System und mögliche Erweiterungen durch externe Dienstleister oder BerlinOnline erörtert werden. Weitere Informationen dazu finden Sie im Abschnitt [[#Online-Styleguide|Online-Styleguide]].

=== Umsetzung mit Imperia ===
Ist das Online-Angebot mit dem landeseigenen CMS realisierbar, wird von BerlinOnline ein Verzeichnis unterhalb von Berlin.de erstellt: berlin.de/angebotsname, das zugleich als Zieladresse dient. In diesem Verzeichnis ist das zuvor bestimmte Vertical “aktiv”, alle darin erstellten Inhalte erhalten im Frontend automatisch das entsprechende Layout. 
Die Inhalte können von der Behörde oder dem Dienstleister erstellt und später redaktionell gepflegt werden. Neue User im CMS sowie Bearbeitungs- und Veröffentlichungsrechte für die Redakteur*innen können durch die Internetverantwortlichen der Behörden eingerichtet werden. Bei einer Realisierung mit Imperia sind zudem folgende Services enthalten, die in der Regel für die Behörden kostenfrei sind: 
* Hosting, Betrieb und Support
* Regelmäßige Updates für Front- und Backend
* Hoher Grad an Barrierefreiheit Front- und Backend, Umsetzung der landesweiten Vorgaben zur Barrierefreiheit inkl. 
* Template für die Barrierefreiheitserklärung
* Datenschutz und Datensicherheit nach DSGVO, inkl. Template für die Datenschutzerklärung
* Newsletter, Formulare, Karten
* Automatisierte Zählung und Abruf der Zugriffe via mapp Intelligence

Nach Fertigstellung des Angebots im Backend erfolgt eine Abnahme durch die Landesredaktion gemäß der [https://support.berlin.de/wiki/Downloads#Zentrale_Vorgaben_der_Landesredaktion zentralen Vorgaben für neue Online-Angebote]. Im Anschluss wird das Angebot durch BerlinOnline veröffentlicht und ist unter der zuvor angelegten Zieladresse auf Berlin.de erreichbar. 

Weitere Informationen zu Imperia finden Sie im [https://support.berlin.de Support-Wiki].

=== Externe Umsetzung ===
Bei einer Umsetzung des Vorhabens außerhalb von Imperia werden Markup und CSS-Klassen des zugeordneten Verticals für die zugehörigen Seiten- und Contenttypen vollständig oder abhängig von der technischen Realisierbarkeit aus dem Online-Styleguide übernommen. Mindestanforderung stellen hierbei das Layout-Grid, die Portalnavigation und das Look & Feel des jeweiligen Verticals dar. 

=== Online-Styleguide ===
Eine Übersicht über alle Layoutelemente sämtlicher Verticals (Layoutvarianten) des Design-Systems, bietet ein Living-Styleguide, der unter [https://styleguide.berlin.de styleguide.berlin.de] erreichbar ist. Dieser Styleguide ersetzt die bisherigen Imperia-Masterlayouts vollständig.

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 Layoutregeln 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 Layoutregeln 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 Design-System unterhalten.

Der Living-Styleguide ist derzeit in der Initiierungsphase und darum mit dem bekannten Vorschaukennwort geschützt. In dieser Phase kann es noch häufig zu Änderungen im Styleguide kommen und seine Verfügbarkeit ist nicht zu jedem Zeitpunkt gewährleistet, kann Ihnen und Ihren Agenturen aber dennoch zur Orientierung dienen. Von der endgültigen Veröffentlichung des Styleguides erfahren Sie aus dem Newsletter der Landesredaktion.

== Kontakt ==
Sie haben Fragen zum Einsatz des neuen Design-Systems für Ihre Online-Angebote? Bitte wenden Sie sich zunächst über Ihre Internetverantwortlichen an uns. 
* Webauftritte: Nadine Lantzsch, [mailto:nadine.lantzsch@senatskanzlei.berlin.de nadine.lantzsch@senatskanzlei.berlin.de]
* Anwendungen und Apps: Sascha Krajan, [mailto:sascha.krajan@senatskanzlei.berlin.de sascha.krajan@senatskanzlei.berlin.de]
* Support BerlinOnline: [mailto:support@berlin.de support@berlin.de]