Infographic: Email Design Best Practices

by . April 5th, 2013

Email Marketing is yet not dead. With the increasing rivalry, marketers wish to capture the audience’s attention making the best out of email campaign. With this, it’s even tougher for the designers to meet the growing needs of impeccable email design. There is an interesting infographic I would like to share with designers and marketers eyeing on ‘Email Design Best Practices’ including, useful design best practices from around the Email world depicted in very engaging yet effective way.

Here are the best practices pertaining to the Envelop design, Pre-header and Header design, Email layout, Copy & Body Content, Footer design and Mobile Optimized Emails:
Sender Credentials: The Infographic is didactic. It shares best practices for the From Line, To field and Subject Line. From name should be identifiable. To Address should be personalized and the Subject Line should limit to 35 characters. Subscribers decide to read or delete an Email within 3 seconds.
Snippet Text should be well aligned with the subject line as few clients show preview text, pulled out from the first few lines of email content.
Johnson Box top is ideally 400×300 pixels, with the height of the header set at around 150 pixel.
Online Version: A stress has been put to link to an online version of your email should be provided.
Email Layout: Email width should be 500 to 650 pixels with a vertical layout preferred over horizontal. The infographic advises to use text and images both are used in right proportion with a Table of content if a lot is to cover in the email.
Easy Unsubscribing: According to the infographic, it is advisable to put the Unsubscribe button upfront and easily clickable. Social sharing links and/or ‘Forward to a Friend’ options are a must add.
Mobile Optimized Emails has to be restricted to single column template, using techniques like responsive and scalable coding standards as 42% of all email is now opened via mobile and 43% of mobile email users check email 4+ times per day.. Mobile emails should have tappable call to action of minimum size 44 x 44 pixels and Mobile Email width of 320 to 480 pixels.
Body and Content: The infographic reinforces the fact to use short sentences and paragraphs. Designers should distinguish content sections using design elements like spacing and dividing lines. It suggests using bold typeface and sub-headers to make certain words stand out with web-safe standard fonts keeping the Body Copy font size: 14 pixels & Title font size: minimum of 22 pixels.
Infographic also include guidelines, Do’s and Don’ts. To list down a few:

  • Things to Avoid: Flash or Ajax functionalities, background images layered with text etc.
  • Things to use: An alt text to an image provides sense to the viewers even with images off as in case an email does not display correctly, 69.7% will delete it immediately.

Below is the complete infographic discussing the key points mentioned above with examples. (Click on the image to view a bigger version of the infographic.)

Email Newsletter Design Best Practises Infographic


Infographic also follows a downloadable checklist for the email design best practices. Designers engaged in hardcore email designing can use this checklist and incorporate the listed best practices in their day to day work. This checklist is one pager and can be easily accessed here.


About the Author

Jenny Kay works as an Email Consultant with Email Monks. Monks are setting up an industry milestone through fastest email template conversion service that converts various designs like PSD to Email HTML and aims to help code the Email Newsletter HTML Templates and integrate with leading email clients like Mail Chimp, Constant Contact, iContact and Campaign Monitor.