Embed Size (px)
Citation preview
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 1
Contents
Responsive layout principles
Brand logo and logo clearspace
Color pane and DB corner element
Navigation elements
Layout and structure
Typography
Our customers use the most diverse digital information channels and accessthe same content in parallel on different output devices. The size andproportions of the displays used varies widely, necessitating both a flexiblelayout- and information structure and adaptable design.
To ensure a uniform user experience across all applications, responsivelayout principles have been defined for treating the characteristics of ourbrand’s visual identity.
Please note: As illustrations on this page you will find animated images that canbe launched and then paused with a click. This functionality is ensured only whenusing the latest browser versions.
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 2
Responsive layout principles
Web applications designedaccording to the responsive layoutprinciple adapt to the size ofthe desktop-, tablet- or smartphonebrowser.
The area in the browserdisplaying the web applicationis called the viewport.
If the browser window is wider thanthe content area, the web applicationis centered in the browser windowand the browser background can bedesigned as a full screen background.
On narrow viewport sizes such astablets and smartphones, the logoclearspace, image and color pane areadapted to the width of the viewport.
The page content is adapted to theviewport through scaling andrearrangement. The content’scategorization and hierarchy remainthe same, despite the changes to thepage’s arrangement.
High resolution images should bemade available for displays with highpixel densities.
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 3
Brand logo and logo clearspace
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 4
Color pane and DB corner element
Please note: The DB corner element is used together with color/image paneand the headline only in a marketing communications context.It has no navigation functionalities and is omitted if it cannot be sensiblyintegrated into the page design.
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 5
Navigation elements
Important: Navigation elements such as icons and menulists must be depicted sufficiently large, as control usingone’s finger is less precise than with a cursor.
The clickable area should therefore be somewhatlarger than the pictured element to additionally optimizetouch accuracy.
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 6
Layout and structure
Electronic Media > Responsive Design
Deutsche Bahn AG · Corporate Design · Electronic Media · Revision: 25.10.2016 Page 7
Typography
We recommend deriving font sizes as percentagesof the browser’s standard font size.
This way, the devices existing settings and individualuser preferences are accounted for in depiction of copyand good readability ensured.
The following font sizes are recommendedfor responsive websites:
Body copy: 100% / 1rem (root enumeration)Minimum size for copy: 80% / 0.8remCopy line spacing: 150% / 1.5rem
Contact
Questions about this page? [1]
published: 25.10.2016
Verweisliste
[1] Questions about this page?: [email protected]
