Upload
ralph-johnson
View
963
Download
0
Embed Size (px)
DESCRIPTION
A best practice guide on designing html emails
Citation preview
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/