Skip to main content
Modules
Responsive Design—for a uniform user experience across all media
 

Our customers use the most diverse digital information channels and access the same content in parallel on different output devices. The size and proportions of the displays used varies widely, necessitating both a flexible layout- and information structure and adaptable design.

To ensure a uniform user experience across all applications, responsive layout principles have been defined for treating the characteristics of our brand’s visual identity.

Please note: As illustrations on this page you will find animated images that can be launched and then paused with a click. This functionality is ensured only when using the latest browser versions. 
 
Responsive layout principles
 
A responsive layout adapts to its environment.
 

Web applications designed
according to the responsive layout principle adapt to the size of
the desktop-, tablet- or smartphone browser.

The area in the browser
displaying the web application
is called the viewport.

If the browser window is wider than
the content area, the web application
is centered in the browser window
and the browser background can be designed as a full screen background.

On narrow viewport sizes such as tablets and smartphones, the logo clearspace, image and color pane are adapted to the width of the viewport.

The page content is adapted to the viewport through scaling and rearrangement. The content’s categorization and hierarchy remain
the same, despite the changes to the
page’s arrangement.

High resolution images should be
made available for displays with high pixel densities.

 
Brand logo and logo clearspace
 

The logo clearspace is always kept, regardless
of the display’s width.

The size of the logo and the height of the logo clearspace remain unchanged up to the viewport sizes used by tablets.

For smaller viewports they are scaled proportionally. Additional elements in the logo clearspace respect the rules regarding minimum clearspace around the logo.
 

To ensure optimal use of the display on mobile devices,
when scrolling we recommend shifting the logo clearspace
up instead of fixing it in place.

 

When using the logo box, always align its position
to the edge of the content area.

If he content area fills the entire width of the viewport,
the logo box is placed aligned to the viewport’s edge.

 
Color pane and DB corner element
 

Color pane and the DB corner element are
essential parts of the layout.

In adapting the layout to smaller viewports, the height of
the color pane can be reduced and the DB corner element
can be omitted. Subpages can be designed without color
pane and the DB corner element.

You can find details on proportions of color pane and
DB corner element under Website Principles.

 
 
 

Please note: The DB corner element is used together with color/image pane
and the headline only in a marketing communications context.
It has no navigation functionalities and is omitted if it cannot be sensibly integrated into the page design.

 
Navigation elements
 

The form and content of the main navigation menu
are adapted to the viewport size for optimal usability
on all devices.

On small viewports a menu icon replaces the horizontally arranged menu points. A drop down list can be revealed and hidden through the menu icon.
 

For a space-saving visualization of functionality elements, use the DB icons.

On small viewports, omit the labeling of buttons. Icons are displayed relatively large for better touch control, yet should never rival the logo or higher-level content. 
 

Important: Navigation elements such as icons and menu lists must be depicted sufficiently large, as control using one’s finger is less precise than with a cursor.

The clickable area should therefore be somewhat
larger than the pictured element to additionally optimize touch accuracy.

Navigation elements—clickable area
 
Layout and structure
 

For narrow viewports, the content modules
of multi-column layouts are rearranged.

Especially for smartphones in portrait mode, content
modules are arranged mostly underneath one another
into just one column, to ensure good readability.

The hierarchy of the content remains unaffected.
Content elements are structured one after the other
according to their priority in the web application.

 
Typography
 

The general typographical image and hierarchy of
copy elements remain untouched on all viewport sizes.
Font sizes can be scaled and font styles adjusted.

On medium display sizes, e.g. tablets in portrait mode,
the headline is scaled to avoid unwanted breaks.

On very narrow display sizes, e.g. smartphones, our characteristic dynamically offset copy lines  are omitted
and the headline is placed aligned with the content
area elements.

The headline’s character must be kept, however.
Condensed styles can be used to ensure a sufficiently
large depiction of the headline.

 

We recommend deriving font sizes as percentages
of the browser’s standard font size.

This way, the devices existing settings and individual
user preferences are accounted for in depiction of copy
and good readability ensured. 

Responsive layout—typography
 

The following font sizes are recommended
for responsive websites:

  • Body copy: 100% / 1rem (root enumeration)

  • Minimum size for copy: 80% / 0.8rem

  • Copy line spacing: 150% / 1.5rem

 
 
Contact
Name

Questions about this page?

E-Mail

design@deutschebahn.com

published:
25.10.2016