digital media, ux-ui design > html newsletters · digital media, ux-ui design > html...

Digital Media, UX-UI Design > HTML Newsletters

Deutsche Bahn AG · Corporate Design · Digital Media, UX-UI Design · Revision: 04.09.2017

Contents

At a glance:

Look & Feel

Constructing HTML newsletters

Technical requirements

CD guidelines:

Brand and Markings

Typography

Cover letter

Teasers

Imprint

Eye Catchers

DB Icons and DB Interaction Elements

An HTML newsletter is a circular sent via email in HTML format, whichpermits the use of images, graphics and colors in digital documents. Quickproduction, simple evaluation and personalization are what makes the HTMLnewsletter an important marketing instrument.

HTML newsletters must meet high standards in both technology and design, asthey compete with the daily influx of other emails in the customer’s inbox.

Newly designed templates for HTML newsletters must be coordinated withthe Corporate Design Team.If you have any questions regarding the content of this page, please mail us:

Email to Team Corporate Design, GNM 12 [1]

At a glance:Look & Feel

mailto:[email protected]



Constructing HTML newsletters

The header of an HTML newsletterincludes the key elements for senderrecognition. The brand logo (1) isplaced high up, in the header space.Two branding options are available.

An image and a color pane (2) can beused. When designing newsletters withcolor, ensure the correct senderidentification: DB Red representspassenger and rail freight transport,DB Blue the transport, air- and seacargo as well as contract logistics, andDB Gray the infrastructure and servicesdivisions as well as the Group.

A core element of an HTML newsletteris the call to action (3) in the form of astriking interface pane in the upperpart of the newsletter.This is where DB interaction elementsand DB icons (4) are used.

To help distinguish between topics,the content area can be subdivided intoindividual panes.

A footer (5) concludes the HTMLnewsletter. If used with color, it mustbe in the sender's identity color.

So that HTML newsletters can bedepicted well by all email software, thecontent area is designed with a width ofmax. 600 pixels. If the email window iswider, the newsletter is centered in thewindow. The background (6) of theemail window is designed in white orthe gray tones of the DB color palette.



Technical requirements

Depiction of an HTML newsletter depends on the email software/webmailprovider one uses. Under some circumstances, individual areas or elements couldbe shown incompletely or not at all. Content can also cause an HTML newsletterto be blocked by spam filters.The following technical requirements must therefore be observed for bothsecure delivery and optimal depiction in all email software:

The width of the HTML newsletter does not exceed 600 px.The data packet is no larger than 205 kb.The source code is no longer than 999 characters.The newsletter is implemented in HTML only.Be sure to include an ALT tag with each image you use to providea clear text alternative for the image, if needed.A pure text version of the entire newsletter should also beprovided as an alternative.

Production and mailing of HTML newsletters is carried out by externalservice providers. The production process and special technical frameworkparameters must be coordinated with these providers.

CD guidelines:

Brand and Markings

Option 1: Using the brand logo in the logo clearspace

The DB brand has a width of 36 px.The height of the key visual is variable.The color pane is always in the sender’s identity color.The logo clearspace can be placed above or beneath the key visual and has astandard height of 1 ½ DBx = 54 px and a minimum height of 1/3 DBx = 12 px.



Option 2: Using the Logo Box

The DB brand in the logo box has a width of 36 px.Spacing of the logo box to the image edge is ¾ DBx = 27 px.

Using markings

Optional markings are placed in the layout on the right in the DB corner element.Spacing to the left and right is ½ DBx = 18 px.Cap height is 1/3 DBx = 12 px.

More information

Logo Box Templates

Markings



Typography

Use our corporate font DB Type. Selected styles have been developed asweb fonts for use in electronic media. A system font is used as a replacementfont for body copy. This serves to depict copy content for users who do nothave DB Type. Standard building blocks such as the newsletter title, theheadline and DB interaction elements can be used as images.

Treatment of the headline (1) is a characteristic feature of our look and feel.The bold-fine contrast highlights individual words and emphasizes the coremessage. Ideally, the headline is set with our characteristic offset lines. Otherwiseit is left-aligned.

An optional subheadline (2) is clearly smaller than the headline and set in thesame color and in only one font style.

Fonts: DB Head Light andDB Head BlackLine spacing: 115-125%Font size: Min. 20 pxFont color: White or DB 03-13Within the headline only onefont size and color are used

Additional typographical building blocks, e.g. edition and publication date,are set in DB Sans Bold with good readability.

Font: DB Sand BoldFont size recommendation:Min. 14 px

For more information:

Web fonts



Text on Transparencies

The headline on the image motif canalso be placed on DB transparencies foroptimal readability.

Additional information:

Transparencies



Cover letter

The cover letter of an HTML newsletter conveys theimpression of a personal note. It is placed on a light pane(in white or a very light gray tone from the DB color palette)beneath the image area.

The salutation (1) is clearly larger than the body copy (2)and can be quickly recognized by the reader. The body copyextends, as in a letter, over the complete width of the pane.

Embedded interfaces are based on DB interaction elements(3). A handwritten signature (4) concludes the cover letter.

Another important element are links to social mediachannels. These symbols are to be taken from theDB icons (5).



Teasers

One or more teasers can be placed in the content area.Teasers are designed with a white base pane (1).The arrangement of panes, text- and function elementswithin teasers is variable.

For the design of ‘call to action’-buttons (2), is an extensiveselection of DB interaction elements in RGB mode andvector format as ‘UI-Kit’ available.

Teasers and interaction elements can be optically lifted offthe background by using a subtle drop shadow.

Among teasers that depict the products of partnercompanies (3), the color pane can be designed in a differentcolor, so as to clearly distinguish from the products of DB.



Imprint

The imprint is compulsory.It can either be placed in the footeror linked.

Eye Catchers

An eye-catcher directs attention toimportant parts of the ad message andcontains e.g. special offers orsupplementary information. Form andcolor can be selected freely. Use ofsubtle drop shadows and light edges ispossible.

Guidelines for using an eye-catcher:Font: DB Sans Regular/Bold orDB Sans Condensed Regular/BoldEye-catchers are not placed directlyon the logo box.



DB Icons and DB Interaction Elements

We use DB icons. They can be placedon panes in he colors of the DB colorpalette. Use of subtle drop shadowsbehind the color panes is possible. Forthe sake of quick recognizability, therespective corporate colors are used forsocial media icons.

Special case:DB standard icons for Twitter and Facebookin the respective corporate colors:Twitter Blue (85/172/238)Facebook Blue (59/89/152)

As a rule, DB interaction elements in HTML newslettersare designed in the sender’s identity color.Use of DB secondary colors is possible to make specific,thematic accents.

For more information:

DB Icons

DB Interaction Elements

Color

Newsletters

Contact

Questions about the contents of this page? [2]

published: 23.09.2015

Verweisliste

[1] Email to Team Corporate Design, GNM 12: [email protected]

[2] Questions about the contents of this page?: [email protected]

[email protected]

mailto:[email protected]

[email protected]

digital media, ux-ui design > html newsletters · digital media, ux-ui design > html...

Documents