Email Design Best Practices

ePublications Developer
Published 10/27/16
Share This Post: 

Share This:

It is predicted that by the end of the year 2016 there will be 4.6 billion email accounts. That is a lot of potential email subscribers. To help you get started, I’m sharing four best practices for designing an email that will look great — and perform even better.

#1: K.I.S.S. (Keep It Simple Stupid)

Although a little harsh, this acronym is very accurate when comes to your email design. In my experience, you should use a grid-based design and try to avoid complicated elements that require CSS styles like “float” or “positioning.” Your design should also avoid background images (such as border shadows), as not all email clients support them, including Outlook 2007-2013 and If there is no choice but to use a background image with overlapping text, be prepared to have a solid-color background that will replace it. Also be aware that Flash and JavaScript are not supported, so if you need some type of movement then using an animated .gif is your best option.

#2: Get Width the Program

Just like there is an unwritten rule about taking your shoes off at the beach, there is also an unwritten rule that an email should be designed between 600-800 pixels wide. It’s still OK if you go smaller or larger than that, but staying inside these dimensions will help your email behave better within the preview pane of your email clients. Just remember: the wider the width of the body text, the harder it will be for the subscriber to read.

#3: I Shot the Serif

Fonts and typography can be a game changer in your email design. Always try to use web-safe fonts in your regular body copy. If you use a font that you have on your computer and no one else has it on theirs, then unfortunately this text will revert to a Times New Roman font – even if you set backup fonts in your code. If there is no way around using a font that is not web-safe, it can still work, but will have to be created as a solid image when coding. When it comes to font size, it is best to not go below 10pt as it gets hard to read. The most common size for regular body text is around 12pt.

#4: Mobile, Your New Best Friend

Designing your email to be responsive is extremely important these days. According to Campaign Monitor, email opens on mobile devices increased 30% from 2010 to 2015. Today, about 53% of emails are opened on mobile devices. Make sure the elements in your design are scalable (try not to have different sizes from desktop version to mobile version). Having the images on the left of the text can help collapse the element so the text will fall under the image when viewing on a mobile device. The more similar the desktop version is to the mobile version (i.e. scalable images and same size text between the 2 versions) the better it will collapse in the preview pane of an email client.

Sources and Resources:

Email Statistics Report, 2015-2019, The Radicati Group

The Ultimate Guide to CSS, Campaign Monitor

CSS Web Safe Fonts,

What are the best fonts for email newsletters and websites?, Groupmail

5 Email Marketing Best Practices for the New Year, Campaign Monitor