The document provides guidelines for designing email communications for Hanen, including using a consistent masthead and footer across emails, specifying typography and colors, optimizing emails for different screen sizes with media queries, using table-based layouts for cross-client compatibility, handling images and buttons, and providing examples. Technical specifications cover media queries, CSS, tables, type handling, and imagery sizing to ensure emails display properly across clients. Standards are outlined for navigation, branding, content structure and responsive design.

1. SECTION 04
Email Communications

2. 01/ Design
Masthead
The masthead will provide a consistent look across all The navigation above the masthead will show the
email communications. The logo will be left-aligned on links www.hanen.org, shop online, and contact us
desktop and tablet emails and centered on mobile or and be consistent through all (or most)
small devices. communications.
Colour
Light Grey Mid Grey Hanen Blue Light Orange Black
#F2F2F2 #DDDDDD #3E6DA1 #FBBE81 #020202
Body/Background Borders/Misc Text Masthead Buttons Typography
Footer
/thehanencentre
The footer area will be a simple design. Facebook and The footer, along with the masthead, will be
Twitter icons followed by Hanen’s handle with Adress consistent throughout all (or most) of Hanen’s
and Charity info underneath followed by unsubscribe email communications.
options.

3. 02/ Typography
Lucida Sans Helvetica / Arial
Aa Aa Aa
Roboto Thin/Light
Body copy Headings Special headings
Paragraph Text Sub Headings 21 - 36px
14 - 15px 15 - 38px 1.5 line height
1.5 line height 1.0 line height
H1/ Grumpy wizards make toxic brew
for the evil Queen and Jack.
H2/ Grumpy wizards make toxic brew for the evil
Queen and Jack.
H3/ Grumpy wizards make toxic brew for the evil Queen and Jack.
H4/ Grumpy wizards make toxic brew for the evil Queen and Jack.
P/ Grumpy wizards make toxic brew for the evil Queen and Jack.
Suspendisse scelerisque lobortis tempor. Proin rutrum tristique placerat. Etiam ipsum metus, volutpat
quis pharetra at, posuere sit amet quam. Donec sit amet dolor eget arcu dictum tristique. Proin nisi
lorem, malesuada at venenatis at, ultrices condimentum lectus. Maecenas euismod malesuada nisi, ut
ullamcorper urna ultrices et. Vivamus at est diam, ut volutpat dolor.
Typography will be large enough for any user to read colours may be introduced for special campaigns.
it comfortably and from a distance (i.e. leaning back Some headings will be shrunk on smaller devices
in a computer chair). Grey and black will be the default (i.e. iPhone) to accomodate the small screen real
colour palette for email communications but other estate.

4. 03/ Language
Subject Lines

5. 04/ Technical
Media Queries
@media screen and (min-device-width: 240px), screen and (max-device-width:
680px) {
// mobile styles here
}
Media queries will be used to optimize emails for vary- iOS, android 2.3+, blackberry 6+, windows phone
ing viewport sizes. Media queries target devices based 7+, kindle and a number of other tablet devices.
on width, height or pixel density and are supported by
CSS ID’s
table#email-body {
table[id=”email-body”] {
Using the second method within the media query to select id’s fixes the issue of Yahoo Mail giving precedence to
media query styles
Table Layout
<table id=”main” cellpadding=”0” cellspacing=”0” width=”700” border=”0”>
// email content here
</table>
Table based layouts will be used to ensure consistency adjusted via css classnames and media queries
across all major email clients. Emails will be hard-coded to a flexible width for smaller devices like smart-
to 700 pixels in width for desktops and tablets and phones.
Type Handling
<div class=”h1” style=”font:normal 38px/140% Arial, Helvetica, sans-serif;”>
// heading text here
</div>
Div’s with inline styles and classnames will be used typography. Gmail (and other email clients) will
instead of proper heading and paragraph tags to ensure override proper tags with their own styles.
email clients like gmail properly render email

6. 05/ Imagery & Buttons
Banners
700px desktop
100% mobile
Title in bottom right corner large text
Image banners will span the full width of the email and exported 1.5 times larger than the intended size
scale down automatically for small devices. The height and then scaled down to ensure retina devices look
of the image may vary in size. Images will use a @1.5x clear and not fuzzy.
workaround for retina devices. All key visuals will be
Example Imagery
Email imagery blah blah ...
Buttons
Example of a standard button that will be consistent across email communications.
Special buttons may be used for specific or special campaigns.

7. 06/ Example