Direkt zum Inhalt
Modules
Responsive Design
 
Unsere Kunden nutzen die unterschiedlichsten digitalen Informationskanäle und rufen die gleichen Inhalte parallel auf verschiedenen Ausgabegeräten ab. Die Größe und Proportion der verwendeten Displays ist dabei sehr unterschiedlich, was eine flexible Layout- und Informationsstruktur und ein adaptierbares Design erforderlich macht. 

Um eine einheitliche User-Experience über alle Anwendungen hinweg zu gewährleisten, sind Responsive Layout Prinzipien zum Umgang mit den visuellen Identitätsmerkmalen unserer Marke definiert.

Hinweis: Zur Veranschaulichung finden Sie auf dieser Seite animierte Abbildungen, die Sie per Klick starten und wieder anhalten können. Diese Funktionalität ist nur bei Verwendung aktueller Browser gewährleistet.

 
Responsive Layout Prinzipien:
 
Responsive Layout Prinzipien
 
Webanwendungen, die nach dem Responsive Layout Prinzip aufgebaut sind, passen sich der Größe des Desktop-, Tablets- oder Smartphone-Browsers an. 

Der Bereich im Browser, der die Webanwendung darstellt, wird als „Viewport“ bezeichnet.

Ist das Browserfenster breiter als der Inhaltsbereich, wird die Webanwendung im Browserfenster zentriert und der Browserhintergrund kann als Fullscreen Background gestaltet werden.

Bei schmalen Viewport-Größen, wie
zum Beispiel bei Tablets oder Smartphones, werden Logostreifen, Bild- und Farbfläche der Breite
des Viewports angepasst.

Der Seiteninhalt wird durch Skalierung und Neuanordnung an den Viewport angepasst. Die Hierarchie und die Zuordnung der Inhalte bleibt trotz Änderung der Seitenaufteilung erhalten.

Für Bildschirme mit hoher Pixeldichte sollten hoch aufgelöste Bilddaten angeboten werden.
 
Marke und Logostreifen
 

Unabhängig von der Bildschirmbreite bleibt der Logostreifen stets erhalten.

Die Größe des Logos, sowie die Höhe des Logostreifens bleiben bis einschließlich der bei Tablets verwendeten Viewport-Größen unverändert.

Bei kleineren Viewports werden sie proportional skaliert. Zusatzelemente im Logostreifen halten den Schutzraum zum Logo ein.

 
Um eine optimale Nutzung des Bildschirms bei Mobilgeräten zu gewährleisten, wird empfohlen den Logostreifen beim Scrollen nach oben zu verschieben und nicht zu fixieren.
 

Wird die Logobox verwendet, so richtet sich ihre Position immer bündig zum Rand des Inhaltsbereiches aus.

Füllt der Inhaltsbereich die gesamte Breite des Viewports aus, steht die Logobox bündig am Rand des Viewports.

 
Farbfläche und DB Winkel
 

Farbfläche und DB Winkel sind ein wesentlicher Bestandteil des Layouts.

Bei der Anpassung des Layouts an kleinere Viewports kann die Höhe der Farbfläche verringert werden, der DB Winkel kann entfallen. Auf Unterseiten kann ohne Farbfläche und DB Winkel gestaltet werden.

Details zu Proportionsverhältnissen von Farbfläche und DB Winkel finden Sie unter Website Prinzipien.

 
 
 

Hinweis: Der DB Winkel wird nur im marketingkommunikativen Kontext im Zusammenspiel mit Farb-/Bildfläche und Headline eingesetzt. 
Er ist frei von Navigations-Funktionalitäten und entfällt, sofern er nicht sinnvoll in die Seitengestaltung integriert werden kann.

 
Navigationselemente
 

Form und Inhalt der Hauptnavigation passen sich für
eine optimale Bedienbarkeit auf allen Geräten an die Viewport-Größe an.

Ein Menü-Icon ersetzt die horizontal angeordneten Menüpunkte bei kleinen Viewports. Eine Drop-down-Liste kann dann über das Menü-Icon ein- und ausgeblendet werden.
 

Für eine platzsparende Visualisierung von Funktionselementen, kommen die DB Icons zum Einsatz.

Bei kleinen Viewports entfällt die Beschriftung von Buttons. Die Icons werden zugunsten einer Touch-Bedienung verhältnismäßig groß dargestellt, dürfen aber keine Konkurrenz zum Logo oder zu übergeordneten Inhalten bilden.
 

Wichtig: Navigationselemente wie Icons und Menü-Listen müssen ausreichend groß abgebildet werden, da die Bedienung mit dem Finger auf mobilen Geräten weniger präzise ausfällt als mit einem Cursor. 


Der klickbare Bereich sollte dabei etwas größer sein als das abgebildete Element, um die Treffsicherheit zusätzlich zu erhöhen.
Responsive Design Klickflaeche
 
Layout und Struktur
 

Die Inhalts-Module mehrspaltiger Layouts werden bei schmalen Viewports neu angeordnet.

Insbesondere bei Smartphones im Portraitmodus werden Inhalts-Module zumeist in nur einer Spalte untereinander angeordnet, um gute Lesbarkeit zu gewährleisten.


Die Hierarchie der Inhalte bleibt dabei erhalten.
Inhaltselemente werden, entsprechend Ihrer Priorität in der Webanwendung, nacheinander strukturiert.

 
Typografie
 

Das generelle Schriftbild sowie die Hierarchie der Textebenen bleiben bei allen Viewport-Größen erhalten. Schriftgrößen können skaliert und Schriftschnitte angepasst werden.

Bei mittleren Ansichtsgrößen, wie zum Beispiel bei Tablets im Portraitmodus, wird die Headline skaliert, um ungewollte Umbrüche zu vermeiden.

Bei sehr schmalen Ansichtsgrößen, wie zum Beispiel bei Smartphones, entfällt der markentypische, dynamische Zeilenversatz und die Headline wird bündig mit den Elementen des Inhaltsbereiches platziert.

Der Headline-Charakter muss dabei erhalten bleiben.
Um eine ausreichend große Abbildung der Headline zu gewährleisten können Condensed-Schnitte zum Einsatz kommen.

 

Es empfiehlt sich, Schriftgrößen prozentual von der Standardschriftgröße des Browsers abzuleiten.

So werden bereits vorhandene Einstellungen eines Gerätes sowie individuelle Nutzereinstellungen bei der Ausgabe von Texten mit in Betracht gezogen und gute Lesbarkeit erzielt.

Responsive Design Typografie
 

Für responsive Websites werden folgende
Schriftgrößen empfohlen:

  • Fließtext: 100% bzw. 1rem (Root Enumeration)

  • Mindestgröße für Text: 80% bzw. 0.8rem

  • Zeilenabstand: 150% bzw. 1,5rem

 
 
Anprechpartner
Name

Fragen zum Inhalt dieser Seite?

E-Mail

marke@deutschebahn.com

veröffentlicht:
16.09.2016