Startseite: Umstellung von 3-spaltig zu 1-spaltig

Hintergründe

Im Designsystem von Berlin.de gilt das Prinzip “mobile first”: Das Layout priorisiert mobile Nutzung und reagiert flexibel auf jedes Endgerät und jede Bildschirmgröße. Um die Startseite vollständig an das Designsystem anzupassen, wurde diese von einem 3-spaltigen in ein 1-spaltiges Layout überführt, das redaktionell mit wenigen Schritten aktiviert werden kann.

Wir planen, die Anzeige der 3-spaltigen Startseite auf den Liveseiten von Berlin.de zum Jahresende 2024 auszublenden. Es werden dann nur noch 1-spaltige Startseiten auf Berlin.de gezeigt. Die Inhalte der Bearbeitungsansicht bleiben unverändert, sodass die Startseiten auch nach der Änderung aktualisiert und so wieder angezeigt werden können.

Sie sollten daher bis Ende 2024 Ihre Berlin.de-Startseiten auf die Einspaltigkeit umstellen. Zum weiteren Verlauf informieren wir Sie an dieser Stelle und in unserem Release-Newsletter.

Beispiele für einspaltige Startseiten:

• Bezirksamt Treptow-Köpenick
• Senatsverwaltung für Bildung, Jugend und Familie
• Der Regierende Bürgermeister von Berlin – Senatskanzlei

Schritte zur Umstellung

Die Umstellung auf eine 1-spaltige Startseite ist zum größten Teil redaktionell möglich. Das Template bleibt identisch, daher sind alle Inhalte weiterhin vorhanden und bei der Umstellung können einige Inhalte weiter genutzt werden. Ohne eine redaktionelle Aktion sind aktuell weiterhin die 3-spaltigen Startseiten online sichtbar.

Wie im vorherigen Abschnitt dargestellt, gibt es teilweise Unterschiede in der Frontend-Darstellung und bei der Bearbeitung zwischen den einzelnen Verticals. Wenn unklar ist, in welchem Vertical der Auftritt angelegt ist, finden Sie die Information in der Bearbeitungsansicht jeder Seite Ihres Auftritts (inkl. Startseite) im Reiter Metadaten ganz am Ende: “Layout: ScreenVerticalname”.

Die Umstellung selbst erfolgt über den Reiter Flex-Module (1- und 3-spaltig).

Dazu fügen Sie ein 1-spaltiges Flex-Modul im oberen Bereich im Reiter “Flex-Module (1- und 3-spaltig)” ein, um das Layout der 1-spaltigen Startseite zu aktivieren. Mit diesem Schritt fallen bei allen Verticals die 3-spaltigen Module im Frontend weg. Bitte übernehmen Sie die Inhalte in entsprechende 1-spaltige Module.

Änderung im Februar 2025

Mit dem Februar-Release im kommenden Jahr wird der 3-spaltige Flex-Modul-Bereich aus der Bearbeitungsansicht entfernt. Bitte kopieren Sie alle Inhalte bis Februar in den 1-spaltigen Bereich, sollen diese erhalten bleiben.

Änderungen in der Bearbeitungsansicht

In der Bearbeitungsansicht für die Startseite haben sich die Bezeichnungen der Reiter geändert. Diese Änderungen sind in allen Verticals identisch. Die Reiter “Metadaten” und “Footer” sind gleich geblieben. Weitere Änderungen werden im Dezember 2024 bzw. im Februar 2025 aktiv. Diese Änderungen sind fett dargestellt.

• vorher: Bühne

  jetzt: Kachel-Opener (alt: Bühne)

  Der Reiter wird mit dem Dezember-Release aus den Verticals Marketing und Shop/Freizeit entfernt.

• vorher: Top-Box

  jetzt: Top-Box (veraltet)

  Der Reiter wird mit dem Dezember-Release aus dem Edit entfernt.

• vorher: Flex-Module

  jetzt: Flex-Module (1- und 3-spaltig)

  Im Februar 2025 wird der 3-spaltige Bereich aus dem Edit entfernt.

Reiter "Kachel-Opener"

Mit der Umstellung auf die 1-spaltige Startseite wird die Bühne abgeschaltet. In den meisten Verticals wird daraus automatisch ein
Kachel-Opener. Die Bühnen-Teaser-Module werden für die Darstellung benutzt.

Hintergrund zur Änderung von Bühne zu Kachel-Opener: Der Kachel-Opener zeugt im Gegensatz zur Bühne von klaren redaktionellen Entscheidungen und einem berechenbaren Verhalten der angebotenen Seite, wie sie von Nutzer*innen erwartet werden.

Besonderheiten im Vertical Identität

Im Vertical Identität werden die ersten 3 aktiven Bühnen-Teaser zusammen mit dem Opener-Bild als Erstes auf der Seite angezeigt.

Weitere Informationen dazu finden Sie auf der Seite Kachel-Opener im Abschnitt zum Vertical.

Besonderheit im Vertical Marketing und im Vertical Shop

Sowohl im Vertical Marketing als auch im Vertical Shop kann kein Kachel-Opener genutzt werden. Der Reiter wird mit dem Dezember-Release aus dem Edit dieser Startseiten entfernt werden.

Reiter "Top-Box (veraltet)"

Auf 1-spaltigen Startseiten werden die Inhalte im Frontend ausgeblendet. Die Top-Box wird mit dem Dezember-Release in allen Verticals abgeschaltet. Der Reiter war bis jetzt noch vorhanden, um die Inhalte ggf. in die Flex-Module zu übernehmen.

Reiter "Opener-Bild"

Im Reiter “Opener-Bild” kann ein großes Bild an erster Stelle auf der Seite gepflegt werden. Ein großes Bild kann nur in den folgenden Verticals genutzt werden:

• Identität
• Marketing
• Shop

Weitere Informationen finden Sie auf der Seite Einrichtung Startseite im Abschnitt zum Opener-Bild.

Flex-Module 1- und 3-spaltig ohne Module

Reiter "Flex-Module (1- und 3-spaltig)"

Im Reiter “Flex-Module (1- und 3-spaltig)” stehen mit der Einführung der 1-spaltigen Startseite zwei Bereiche zum Einfügen von neuen Flex-Modulen zur Verfügung. Der erste Bereich (grün markiert) wird mit den neuen 1-spaltigen Flex-Modulen befüllt. Im unteren Bereich (rot markiert) befinden sich die aktuell vorhandenen 3-spaltigen Flex-Module.

Bei den bereits vorhandenen Startseiten, die nur 3-spaltige Flex-Module enthalten, werden drei Buttons zum Einfügen von Flex-Modulen angezeigt. Der erste Button ist zum Einfügen der neuen 1-spaltigen Flex-Module. Der zweite und der dritte Button (vor und hinter den bereits vorhandenen 3-spaltigen Flex-Modulen) fügen die alten 3-spaltigen Flex-Module ein.

Wenn 1-spaltige Flex-Module eingefügt wurden und auch noch 3-spaltige Flex-Module vorhanden sind, werden insgesamt vier Buttons angeboten. Die ersten beiden (vor und hinter den neu eingefügten 1-spaltigen Flex-Modulen) fügen weitere 1-spaltige Flex-Module ein. Der dritte und vierte Button (vor und hinter den bereits vorhandenen 3-spaltigen Flex-Modulen) fügen die alten 3-spaltigen Flex-Module ein.

Flex-Module 1- und 3-spaltig mit Modulen

Flex-Module für die einspaltige Startseite finden Sie auf der Übersichtsseite zum Template Startseite.

Änderungen im Frontend nach Verticals

• Verticals Organisation, Wirtschaft und Bürgerservice (Ausnahme: Serviceportal)

  In diesen Verticals werden die ersten vier Bühnen-Teaser-Module als Kachel-Opener angezeigt. Weitere Informationen finden Sie auf der Seite zum Kachel-Opener

  Wie oben beschrieben, werden die 3-spaltigen Flex-Module und die Inhalte der Top-Box nicht mehr angezeigt.

• Vertical Identität

  Wenn eine Startseite im Vertical Identität auf das 1-spaltige Layout umgestellt wird, wird ein Opener-Bild zusammen mit den ersten 3 aktiven Bühnen-Teaser-Modulen angezeigt.

  Bitte beachten Sie vor der Umstellung die folgenden Seiten:

  • Abschnitt Opener-Bild auf der Seite Einrichtung Startseite
  • Abschnitt zum Vertical Identität auf der Seite Kachel-Opener

  Wie oben beschrieben, werden die 3-spaltigen Flex-Module und die Inhalte der Top-Box nicht mehr angezeigt.

• Verticals Marketing und Shop

  Bei der Umstellung in diesen Verticals wird ein Opener-Bild am Anfang der Seite angezeigt. Die Inhalte der Bühnen-Teaser sind nicht mehr im Frontend sichtbar.

  Bitte beachten Sie vor der Umstellung die Hinweise auf der Seite Einrichtung Startseite im Abschnitt Opener-Bild.

  Wie oben beschrieben, werden die 3-spaltigen Flex-Module und die Inhalte der Top-Box nicht mehr angezeigt.

Die Verticals Info und Asset-Service sind aktuell nicht auf Imperia-Seiten im Einsatz und deshalb nicht gelistet.

Häufige Fragen und Antworten zur Umstellung

Woran erkenne ich eine alte, 3-spaltige Startseite?

Falls Sie sich nicht sicher sind, ob die Startseite in einem Ihrer Auftritte bereits 1-spaltig ist oder noch das alte, 3-spaltige Layout nutzt, können Sie entweder die Seite zur Bearbeitung aufrufen und im Reiter Flex-Module nachschauen, ob Flex-Module im 1-spaltigen Bereich gepflegt sind. Alternativ erkennen Sie alte Startseiten auf Berlin.de im Livezustand an:

• Eine Bühne wird direkt unterhalb der Seitenüberschrift gezeigt
• Bilder in Teaser-Multi- und Text-Bild-Modulen haben ein Seitenverhältnis von 2:1
• Unterschiedliche Module werden auf breiten Bildschirmen in Dreier-Blöcken nebeneinander in einer Zeile gezeigt

Beispiele dafür sehen Sie in der nachfolgenden Bildergalerie.

• 

  Eine Bühne erkennen Sie am Pager oberhalb der Bühnen-Teaser und der hellgrauen Fläche im Text-Bereich

• 

  Beispiele für Teaser-Bilder der alten Startseite. Sie haben ein schmales 2:1 Seitenverhältnis statt des 4:3-Standards

• 

  Unterschiedliche Module werden auf großen Bildschirmen in Dreiergruppen nebeneinander gezeigt.

• 

  Ein weiteres Beispiel für die Modulverteilung alter Startseiten auf breiten Bildschirmen und schmale Bilder von Text-Bild-Modulen

Ein Kachel-Opener statt einer Bühne ist kein eindeutiger Hinweis auf eine 1-spaltige Startseite. Bitte schauen Sie auch auf die Inhalte unterhalb des Kachel-Openers.

Was passiert, falls die Startseite vor dem Release nicht auf 1-spaltig umgestellt wurde?

Falls Sie Ihre Startseite(n) bis zum Dezember-Release noch nicht auf die 1-Spaltigkeit umgestellt haben, werden dann einige Seitenbereiche ausgeblendet und ggf. anders angezeigt. Nachfolgend listen wir auf, wie Startseiten je nach Layout-Variante reagieren:

• Identität (z.B. Bezirksämter):
  • Inhalte der Reiter Top-Box und Flex-Module werden ausgeblendet
  • War zuvor eine Bühne gepflegt, werden nun die ersten drei Bühnen-Teaser als Kachel-Opener ohne Bilder gezeigt
  • Waren zuvor weniger als drei Bühnen-Teaser und/oder diese unvollständig gepflegt, kommt es zu Darstellungsfehlern im Kachel-Opener (Element unvollständig, graue Flächen)
• Organisation (z.B. Senatsverwaltungen und ihre nachgeordnete Behörden):
  • Inhalte der Reiter Top-Box und Flex-Module werden ausgeblendet
  • War zuvor eine Bühne gepflegt, werden nun die ersten vier Bühnen-Teaser als Kachel-Opener gezeigt, nur der erste Bühnenteaser zeigt ein Bild
  • Waren zuvor weniger als vier Bühnen-Teaser und/oder diese unvollständig gepflegt, kommt es zu Darstellungsfehlern im Kachel-Opener (Element unvollständig, graue Flächen)
• Shop/Freizeit (z.B. VHS, Musikschulen):
  • Inhalte der Reiter Top-Box und Flex-Module werden ausgeblendet
  • War zuvor eine Bühne (nur Bild oder mehrere Bühnen-Teaser) gepflegt, wird nun lediglich die Seitenüberschrift (H1) der Startseite gezeigt.
• Wirtschaft (z.B. Einheitlicher Ansprechpartner):
  • Inhalte der Reiter Top-Box und Flex-Module werden ausgeblendet
  • War zuvor eine Bühne gepflegt, werden nun die ersten vier Bühnen-Teaser als Kachel-Opener gezeigt, nur der erste Bühnenteaser zeigt ein Bild
  • Waren zuvor weniger als vier Bühnen-Teaser und/oder diese unvollständig gepflegt, kommt es zu Darstellungsfehlern im Kachel-Opener (Element unvollständig, graue Flächen)
• Marketing/Asset-Service: keine Änderungen, da nur 1-spaltige Startseiten möglich
• Info/Bürgerservice: Diese Verticals sind mit Ausnahme der Berliner Standesämter und des Serviceportals bisher nicht auf Imperia-Seiten im Einsatz. Die Startseite des Serviceportals hat zudem eine eigene Programmierung.

Gibt es weitere Änderungen für die 1-spaltigen Startseiten?

Im Zuge des Ausblendends 3-spaltiger Startseiten werden weitere Änderungen aktiv.

• Verticals Freizeit und Identität: In diesen beiden Layoutvarianten muss ein großes Opener-Bild gepflegt werden. Wenn Sie noch kein Opener-Bild gepflegt haben, erhalten Sie in der Vorschau der Seite den Hinweis: “Bitte Opener-Bild hinzufügen” Das Bild wählen Sie aus. Eingesetzt wird es durch den Support von BerlinOnline. Weitere Informationen zum Bild und zum Einbau finden Sie im Formular Opener-Bild
• Verticals Identität, Organisation und Wirtschaft: In diesen Layoutvarianten muss ein Kachel-Opener im gleichnamigen Reiter gepflegt werden. In Organisation und Wirtschaft werden die ersten vier aktiven Bühnenteaser angezeigt, in Identität drei. Aktiv sind Bühnenteaser, wenn zum Zeitpunkt der Veröffentlichung keine Startzeit in der Zukunft bzw. Stopzeit in der Vergangenheit am Modul festgelegt ist. Damit das Modul bzw. im Ergebnis der Kachel-Opener korrekt genutzt wird, werden mit dem Release im Dezember folgende Änderungen am Modul Bühnenteaser aktiv:
  • Gliederungsstufe entfällt: Die Titel/Überschriften der Bühnenteaser-Module erhalten automatisch eine H2. In der Anzeige von Live-Inhalten werden redaktionell gesetzte Gliederungsstufen H3 und H4 in H2 geändert.
  • Titel und Link werden Pflichtfeld: Die Startseite kann nicht gespeichert oder veröffentlicht werden, falls kein Titel und/oder Link im Modul eingetragen ist.
• Verticals Marketing und Shop: Der Reiter Kachel-Opener wird aus der Bearbeitungsansicht entfernt.
• Der Reiter Top-Box wird aus der Bearbeitungsansicht entfernt.
• Februar 2025: Der 3-spaltige Flex-Modul-Bereich wird aus dem Edit entfernt.