Digitale Medien

Hier finden Sie medienspezifische Regeln und Vorgaben für Webanwendungen, Social Media, Email-Signaturen und Apps.

Musterbeispiel Website.

Webanwendungen

Das visuelle Erscheinungsbild der Bundesregierung beruht auf einem einheitlichen Gestaltungsprinzip, welches in allen Webanwendungen für einen hohen Wiedererkennungswert sorgt.

2 Ansichten Smartphone-Screen mit Musterbeispiel Social Media.

Social Media

Der Social-Media-Auftritt ist ein probates Kommunikationsmittel für den schnellen Austausch im Internet.

2 Ansichten Desktop mit Musterbeispiel Emailabsender.

E-Mail

Das homogene Layout des meistgenutzten Kommunikationsmediums sorgt für die bestmögliche Rezeption und eine eindeutige Übermittlung des Absenders. 

2 Ansichten Smartphone-Screen mit Musterbeispiel App.

Apps

Eine konsistente und nutzerzentrierte Gestaltung hebt die Nutzerfreundlichkeit und damit die Akzeptanz aller Software-Applikationen der Bundesregierung.

2 Ansichten der Kennzeichnung digitaler Produkte: Webanwendung und mobile Webanwendung

Kennzeichnung digitaler Produkte

Um die Wiedererkennbarkeit bei digitalen Produkten und Portalen zu gewährleisten, liegen zwei unterschiedliche Darstellungsformen zur Kennzeichnung vor: die Option "Wortmarke" und die Option "Register", welche stets in Verbindung mit der Bildwortmarke verwendet werden.

Open-Graph-Tags

Mit Hilfe von Open-Graph-(Meta-)Tags ist es möglich zu steuern, wie die Vorschau auf eine geteilte Website in verschiedenen Social-Media-Anwendungen dargestellt wird. Durch die aktive, redaktionelle Befüllung dieser Meta-Angaben soll ein inhaltlich wie auch visuell möglichst ansprechendes Ergebnis bereitgestellt werden, welches den Adressaten einlädt, dem geteilten Link zu folgen.

4 Beispielansichten

Beispielanwendungen von Open-Graph-Tags beim Teilen der URL https://bundesregierung.de mittels v. l. n. r.: Facebook, Twitter, Telegram Messenger, SMS (Android).

Technische Implementierung und Bereitstellung

Die Open-Graph-Tags sollten im HTML-Code jeder Webseite hinterlegt sein. Sie folgen den Spezifikationen des Open-Graph-Protocol und sind einzusehen unter https://ogp.me/ . Sofern keine Open-Graph-Meta-Tags im Quellcode der zu teilenden Seite hinterlegt sein sollten, werden die Inhalte der Vorschau von der jeweiligen Social-Media-Anwendung frei zusammengestellt. Häufig führt dies zu unpassenden Ergebnissen. Es sollten daher mindestens folgende Tags technisch implementiert werden:


4 farbige Punkte mit Nummerierungen markieren die untereinanderangeordneten Platzierungsbereiche: og:type, og:image, og:title und og:description

Open-Graph-Tags und deren Einsatz im Layout; hier am Beispiel Facebook.

  1. og:type
  2. og:image
  3. og:title
  4. og:description


og:type

  • in den meisten Fällen vom Typ "website"
  • steuert u. a. das Layout der Vorschauansicht
  • redaktionelle Bearbeitung/Anbindung an CMS-UI nicht zwingend notwendig


og:image

  • Vorschaubild, welches den Inhalt der geteilten Seite möglichst attraktiv symbolisiert
  • Sollte der Inhalt der geteilten Seite keine Bilder beinhalten, kann hier ein allgemeiner Platzhalter eingesetzt werden. Empfehlenswert ist hierfür das Social-Media-Profilbild.
  • Das Bild sollte exakt 1200 x 630 Pixel (Seitenverhältnis 1,9 : 1) oder 1200 x 1200 Pixel (quadratisch) aufweisen und im jpg-Format bereitgestellt werden.
  • redaktionelle Bearbeitung/Anbindung an CMS-UI sinnvoll

og:title

  • Titel, der den geteilten Inhalt bestmöglich beschreibt
  • häufig der Page-Title (siehe HTML-Title-Tag)
  • separate, redaktionelle Bearbeitung, daher meist nicht nötig

og:description

  • Kurzbeschreibung der geteilten Inhalte in maximal zwei Sätzen
  • häufig einhergehend mit der HTML-Meta-Description

og:url

  • URL der geteilten Seite
  • keine redaktionelle Bearbeitung/Anbindung an CMS-UI nötig