Email Design Guidelines

“Email has an ability many channels don’t: creating valuable, personal touches—at scale.” – David Newman

Effective and engaging email design can directly pitch the brand to a consumer. 

Dimensions

Mailer width: 900px
Content width: 600px

Guidelines

Call To Action (CTA)

Bring CTAs early on in your emails. The majority of your subscribers only see the very top portion of their email messages thus making snap judgments about whether the content is worthy of their time. Early CTAs ensure that they make an informed decision. Your CTA should be visible at first glance and preferably on the left. Numerous eye-tracking studies have discerned that the average Web user’s reading habits skew more towards scanning (more on this shortly) rather than word-for-word reading. This means that stuff on the left gets more attention than the stuff on the right.

Big CTAs

Your CTAs should stand out. They should be powerful and should look clickable. Everything about your CTAs should make people want to click on them – to do something, see something, make something happen. Large CTAs not only required for visibility but also the responsiveness of your email design. Considering that mobile email consumption surpasses that of desktop use – you need to make sure those buttons are big enough for touchscreen use.

Repeat CTAs

Your email subscribers need a hassle-free experience. So, don’t make them scroll all the way to the top of your email just to take the action you’ve spent the last 600 pixels trying to persuade them to. Repeating your CTA at the end of your email can be super-effective at getting that elusive click.

Clean Design

Always do a cleaning pass on your email. After designing the first version, remove anything that keeps them lingering. Take off overly complex layouts, long copy paragraphs, and superfluous design elements.  

Left Right Rule

Try to keep the images on the left and the text on the right. Studies have shown that readers’ eyes are attracted more strongly to striking imagery over text – even if the text is important. With this in mind, put the image on the left, so it’s the first thing your readers see – once they’ve satisfied their visual curiosity, they can continue reading your oh-so-important headline.

Image optimization

Make sure you optimize your images for output – but don’t downgrade them so much that the compression introduces artifacts. Ideally, the image size should be under 100kb. 

Image selection

The brain processes images 60,000 times faster than it does text. So, using awesome images is great. However, to be more impactful, images with people in them.  Human figures are more relatable. 

Generic fonts

Web-embeddable fonts create problems in displaying, so stick with the default generic fonts

Eg- Arial, Verdana, Georgia. Ideally, the minimum font size should be 22pt for the body text.

Mailer length

The attention span of a reader going through a mail is very limited and a lengthy mailer can throw a reader off. Crisp and compact content and imagery can sustain the attention and get the message through. The ideal height of the mail should be 1200px to 1900px. 

Types of Layouts

Inverted Triangle

An effective way for structuring email elements (headers, imagery, buttons, etc) is placing them such that they work together to draw people in, deliver the key messages of your campaign and get them to click-through, like an inverted triangle. 

Waterfall 

Another layout style is the Waterfall layout wherein the elements guide the reader’s eye from left to right and slowly moving downwards like a pinball game. This helps in holding the attention of the reader and move it on the right side while moving down to keep the engagement while getting to the end of the mailer.

Waterfall Email Layout

Examples of some great email designs