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

Redaktioneller Hinweis

Mit dem Einfügen des ersten 1-spaltigen Flex-Moduls wird die 1-spaltige Startseite aktiviert.

Damit werden alle 3-spaltigen Flex-Module und die Top-Box ausgeblendet. Je nach Vertical wird die Bühne durch einen Kachel-Opener ersetzt oder anderen Darstellungen, die noch eine weitere Bearbeitung benötigen.

Ä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.

• vorher: Bühne

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

• vorher: Top-Box

  jetzt: Top-Box (veraltet)

• vorher: Flex-Module

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

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.

Reiter "Top-Box (veraltet)"

Die Top-Box wird zukünftig in allen Verticals abgeschaltet. Die Inhalte werden mit der Umstellung auf die 1-spaltige Startseite bereits nicht mehr im Frontend angezeigt. Der Reiter ist 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, Info, Assetservice und Bürger*innenservice

  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.

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.

Sie können Module, die bei beiden Varianten möglich sind (Auto-Teaser, Kalender Include, RSS-Liste, Text/Bild und Video/Audio), aus dem 3-spaltigen Bereich kopieren und dann im 1-spaltigen Bereich wieder einfügen. Das ist mit folgenden Schritten möglich:

1. Klicken Sie rechts auf die 3 Punkte (Weitere Optionen) beim alten Modul
2. Wählen Sie Kopieren (3. Option) oder Ausschneiden (2. Option) aus
3. Klicken Sie oben auf den allerersten Button “Flex-Modul hinzufügen”
4. Wählen Sie die Aktion “Aus der Zwischenablage einfügen” (immer an erster Stelle)

Ausschneiden oder Kopieren von Flex-Modulen

Das Flex-Modul wird anschließend im 1-spaltigen Bereich eingefügt. Damit funktioniert die Übernahme für diese Module am schnellsten. Für alle anderen Module, bspw. den Teaser, müssen die Texte händisch übernommen werden.