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:

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.

Beispiel für eine Startseite mit der Flex-Steuerung für 1- und 3-spaltige Flex-Module im Edit, es sind keine Module eingefügt

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.

Beispiel für eine Startseite mit der Flex-Steuerung für 1- und 3-spaltige Flex-Module im Edit, es sind in jedem Bereich Module eingefügt

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:

    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.

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.

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

Nach der Abschaltung erkennen Sie alte Startseiten an den in der nächsten Antwort aufgelisteten Anzeigen.

  • Bühne alt

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

  • Teaserbild_alt

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

  • Module alt

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

  • Module alt Variante 2

    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 mit alten Startseiten, die nicht umgestellt werden?

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.