The right tools for the job

Designing EmailsA Best Practice Guide

Creative analysis

Do’s and Don’ts of Email Design

Don’t

• Have textured backgrounds, gradients or images behind copy

• Add tracking, vertically scaling, horizontal scaling, baseline shift, superscript, subscripts, anti-aliasing or kerning to copy.

• Have borders around emails as can be fiddly and time consuming to make work

• Font sizes don’t go under 9px for T&C’s as will appear strange or not at all

• Massive images – download times and data intensive on mobile devices

• Copy or links in red• Use videos or animations - link to them

Do• Only use web standard fonts• Use web safe colours for copy as in gmail

links will default to blue• Communicate a clear and succinct

message - recipients won’t read through reams of copy

• Have a good text to image ratio• Clear call to actions – kept to 2 - 3• Give copy space to breath by images as it

renders differently in email clients • Maximum width is 650px which will scale

down to about 320px for iPhone, 480px for Android and 360px for Blackberry

• Minimum font size of body copy is 13px• Leading can be used but renders

differently in email clients

Creative analysis

Web Standard Fonts

• Arial• Arial Black• Comic Sans • Courier New• Georgia• Helvetica• Impact• Lucida Console• Lucida Sana Unicode• Palatino Linotype• Tahoma• Times New Roman• Trebuchet MS• Verdana

Century Gothic changed to Arial

Creative analysis

Web Safe Colours

Body copy and text links need to be a web safe colour

Creative analysis

A Clear and Succinct Message

Reference: http://www.adestra.com/clients/email-campaign-of-the-month/april-2013-evans-cycles-rides-ahead-pack-50-uplift-sales/

Stop!People won’t read much further and know they could be in for a chance to win 1 of 7 grill out kits.

Creative analysis

Screen and Mobile Devices

Creative analysis

Textured Background

No textured, gradient or image backgrounds behind body copy or text links

Creative analysis

Body Copy

Don’t Add to Body Copy• Tracking• Vertically scaling• Horizontal scaling• Baseline shift• Superscript• Subscripts• Anti-aliasing• Kerning

Body renders differently across email clients as does leading.

Creative analysis

Borders and Frames

Body copy renders differently across email clients so copy designed in frames, boards and close to images will probably break the design.

This can add a lot of additional time on a job as the designer will need to extend the design of the frame for the developer.

Creative analysis

Video and Animation

We can dream of video and animation in emails and HTML 5 might make this possible but it is down to our email clients and web browser. You can still do a very effective campaign just linking to the video.

Reference: http://www.adestra.com/clients/email-campaign-of-the-month/august-2012/

Creative analysis

Email Two- Column Layouts

Reference http://www.campaignmonitor.com/guides/design/html_email/

Creative analysis

Broadcast Checklist

Make sure you go through a checklist before broadcasting as it reduces mistakes and shows that you’re meeting best practice.

An example board cast checklist will be included

Creative analysis

Designers Please be Kind

Be kind to your developers and reduce the time it takes for them to build a template.

We all like a challenge but with this one we are confined to the restrictions of HTML tables with inline styles and email clients.

You can still design beautiful emails- look on Pinteresthttp://pinterest.com/source/beautiful-email-newsletters.com/

Creative analysis

Reference Links

• http://www.email-standards.org/

• http://www.campaignmonitor.com/resources/• http://www.campaignmonitor.com/guides/

• http://pinterest.com/campaignmonitor/email-newsletter-designs/

• http://mailchimp.com/resources/

• http://www.adestra.com/resources/• http://www.adestra.com/blog/