Navigation und Service

Kernmodule

Bühne

Rebrush Bühne mobile Seite

Die Standardvariante der Bühne beinhaltet folgende Elemente:

  1. Bild
  2. Einleitungstext
  3. Subheadline
  4. Headline
  5. Drop-Down-Menü

Die Bühne wird in Akkordeon-Form prominent dargestellt. Somit werden die weiteren Artikel der Bühne direkt sichtbar, ähnlich wie bei der Desktop Seite. Auch die Einleitungstexte werden dargestellt.
Die erste Nachricht ist initial geöffnet. Tippt der Besucher auf einen anderen Artikel („+“), so öffnet sich die entsprechende Nachricht mit jeweiligem Bild und Einleitungstext. Die bisher geöffnete Nachricht schließt sich automatisch. Dementsprechend ist immer nur eine Nachricht geöffnet.

Rebrush Bühne mobile Seite

Die Akzente für wichtige Meldungen werden wie in der Desktopversion positioniert. Die Meldung unter dem Navigationsbereich nimmt mit der Zeichenanzahl des Hinweises an Höhe zu, wenn diese nicht mehr in einer Zeile dargestellt werden können.
Der Hinweis bei den Bühneninhalten wird unter der Überschrift angezeigt und wächst ggf. auch mit der Zeichenanzahl in der Höhe.

Schwerpunkte

Schwerpunkte
Die Schwerpunkte werden auf der mobilen Webseite untereinander dargestellt und nehmen die ganze Breite des Bildschirmes ein. Somit kann gewährleistet werden, dass auch Wörter mit großer Zeichenanzahl im Ganzen angezeigt werden können.
Tippt der Besucher auf einen der Schwerpunkte, so öffnet sich eine neue Seite.

Rubrik

Rubrik
Wie auf der aktuellen mobilen Webseite entfallen die Texte und Bilder bei der Darstellung der Artikel. Somit wird dieser Platz auf den kleinen Bildschirmen eingespart. Es wird auf der mobilen Webseite empfohlen, die Artikel ohne Bilder darzustellen (der Redakteur hat dennoch die Möglichkeit, die Bilder einzublenden).

Themenbox

ThemenboxThemenbox

Die Themenbox nimmt auf der mobilen Seite die gesamte Breite des Bildschirmes ein. Längere Links brechen am Ende der Zeile um.

Hinweis: Die Farbwahl der Themenbox ist in der App der Bundesregierung vom Redakteur wählbar. Momentan handelt es sich um 3-4 Möglichkeiten. Die farbliche Hervorhebung der Überschrift wird entsprechend der App auch in der mobilen Webseite umgesetzt.

Kontext- / Banner-Bereich
KONTEXT- / BANNER-BEREICH

Der gesamte Banner- Bereich kann in gleicher Form auch auf der mobilen Webseite dargestellt werden. Eine Reduktion oder Zusammenfassung von Themen in einem Slider ist nicht zu empfehlen, da die Inhalte über einfaches Scrolling über die Seite eher entdeckt werden.

Der Banner-Bereich ordnet sich zwischen dem Artikel und dem Seitenabschluss an.

Hinweis: Die Redaktion sollte den Bereich auf der mobilen Webseite reduzieren.

Zwei Bannerbereiche sind optional nach der Bühne möglich.

1) Folgende Banner sind nach der Bühne optional platzierbar: Bildergalerie, Livestream-Hinweis, klassischer Banner.

2) Folgende Banner sind optional nach dem Channel Hub platzierbar: Bildergalerie (wischbar), klassischer Banner.

Teaser

Teaser sind ein wesentlicher Bestandteil der Navigation einer Website. Sie bieten die Möglichkeit eines direkten Zugangs zu einer beliebigen Ebene innerhalb der Navigation. Im Gegensatz zu einem normalen Link oder Menüpunkt werden Teaser mit einem Kurztext und optional mit einem Bildmotiv versehen. So können wichtige Themen vorgestellt und in den Vordergrund gebracht werden.

Alle Teaser haben eine Breite von 290 px.

Bild-Text-Teaser, alle Maßangaben in Pixel Bild-Text-Teaser, alle Maßangaben in Pixel

  • In Bild-Text-Teasern wird ein aussagekräftiges Bild als Keyvisual für den Artikel verwendet, auf den verlinkt wird.
  • Die Breite des Bildes beträgt 120 px.
  • Der Abstand zwischen Bild und linkem Seitenrand beträgt 15 px.
  • Der Abstand zwischen Bild und Teasertext beträgt 15 px.

Text-Teaser, alle Maßangaben in Pixel Text-Teaser, alle Maßangaben in Pixel

  • Die Teaser werden vertikal untereinander angeordnet. Die Verlinkung erfolgt über die komplette Teaserfläche. Die Textlinkfarbe ist Grau, bei Touch wird der Link blau.
  • Der Abstand zwischen Text und linkem Seitenrand beträgt 15 px.

Bildformate

Ausgehend von der Mindestseitenbreite von 320 px, sind für die Startseitenbühne und die Teaserbilder feste Größen definiert. Für Bilder auf Artikelseiten sind lediglich die Breiten definiert. Die Bildformate werden proportional fließend skaliert.

 

Art
Prototyp
Bemerkung
Bühne Startseite
320 px x 170 px
Feste Maße
Teaserbild
120 px x 80 px
Feste Maße
Bild Artikelseite
Breite: 290 px
Variable Höhe
Karussell groß
290 px x 163 px
Feste Maße
Karussell klein
170 px x 85 px
Feste Maße
Video
Breite: 290 px
Variable Höhe

Buttons und Links

Die Abbildung zeigt den Button für weitere Meldungen

Buttons werden als Navigations- oder Funktionselemente eingesetzt. Sie sind einfach und klar gestaltet.

  • Die Beschriftung erfolgt in Versalschreibweise.

  • Die Schriftfarbe ist Weiß.

  • Die Hintergrundfarbe des Buttons ist Blau und verändert sich bei Touch in Dunkelgrau.

  • Der Button kann auch mit einem schraffierten Balken in der gleichen Höhe kombiniert werden. Balken und Button können zusammen über die Breite von 290 px der Darstellungsfläche verlaufen. Der Button wird dabei immer rechts vom Balken platziert.

Die Abbildung zeigt den Button für Pfeile und Zahlen

  • Pfeilbuttons und nummerierte Buttons werden zum Durchblättern von Seiten sowie als Paginierung verwendet.

  • Buttons, die mit drei Punkten beschriftet sind, werden auf Teasern eingesetzt und führen in der Regel auf einen weiterführenden Artikel.

  • Die Hintergrundfarbe des Pfeilbuttons ist Blau, die der übrigen Hellgrau. In beiden Fällen verändert sich bei Touch die Buttonfarbe in Dunkelgrau.

    Die Abbildung zeigt den Button fürText und Links

  • Textlinks im Contentbereich werden in der Regel mit einem Pfeilsymbol rechts stehend neben dem Text gekennzeichnet.

  • Die Linkfarbe ist Blau, bei Touch wird der Link grau.

Formulare

Die Abbildung zeigt Beispiel-Formulare

  1. Trennlinien
    zur optischen Trennung inhaltlicher Bereiche.
    Gepunktete Linie, Linienstärke: 1 px.

  2. Eingabefelder
    werden mit abgerundeten Ecken eingesetzt.
    Während des Eingabevorgangs wird das jeweilige Feld optisch hervorgehoben: blauer Rand 1 px.

  3. Radiobuttons
    werden bei Touch in Grau markiert.

  4. Checkboxen
    werden bei Touch mit einem grauen Haken markiert.

  5. Eingabefeld für das CAPTCHA
    CAPTCHA ist das Kurzwort für „Completely Automated Public Turing test to tell Computers and Humans Apart.“ CAPTCHAs werden verwendet, um zu prüfen, ob Eingaben in Internetformulare über Menschen oder Maschinen (Roboter) erfolgt sind, weil Roboter hier oft missbräuchlich eingesetzt werden.
    Um die Barrierefreiheit zu gewährleisten, wird der Einsatz von CAPTCHAS mit Audio empfohlen.

  6. Button
    löst das Versenden der Daten aus. Die Farbe des Buttons ist Blau.