Your SlideShare is downloading. ×
Email Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Email Design


Published on

A best practice guide on designing html emails

A best practice guide on designing html emails

Published in: Design, Technology, Business

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing Emails A Best Practice Guide The right tools for the job
  • 2. Do’s and Don’ts of Email Design Do Don’t • • • • • • • • • • 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 • • • • • • 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 Creative analysis
  • 3. 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
  • 4. Web Safe Colours Body copy and text links need to be a web safe colour Creative analysis
  • 5. A Clear and Succinct Message Stop! People won’t read much further and know they could be in for a chance to win 1 of 7 grill out kits. Reference: Creative analysis
  • 6. Screen and Mobile Devices Creative analysis
  • 7. Textured Background No textured, gradient or image backgrounds behind body copy or text links Creative analysis
  • 8. 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
  • 9. 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
  • 10. 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: Creative analysis
  • 11. Email Two- Column Layouts Reference Creative analysis
  • 12. 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
  • 13. 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 Pinterest Creative analysis
  • 14. Reference Links • • • • • • • Creative analysis