Our Lead Designer Luke Nokes presents some email design tips, looking at layout, imagery and typography. 

I created a document for SaleCycle looking at email design best practices, specifically around cart abandonment emails, though many of these tips apply to email more generally.

The guidelines of best practices in email are vast and varied, but we’ve compiled as much information about the key areas as possible.

I looked at some the top design practices for emails last year, but here are some broader tips, looking at email layout, imagery, typography, and more.


Email Layout


Template Size

When designing emails, it’s recommended to keep the width of any email design between 600 and 650px. This ensures perfect rendering across all email clients, as wider designs can cause problems in email clients with a narrow rendering window.

It’s worth mentioning that there are advanced coding methods which allow you to have an entirely fluid email which adapts to all widths, though unless you’re a pro then it may be best to save yourself the headache.


Responsive Coding

Coding emails responsively is no longer optional. There are various methods for this, the most modern of which are Responsive and Hybrid/Spongy.

Due to the frequently complex nature of Abandonment Emails, which often contain 3-4 column layouts, we recommend using a Responsive method.

Coding responsively ensures that your email will render perfectly across all email clients, desktop or mobile.


Think Mobile

With mobile opens now at over 60% in email globally, designing with a ‘Mobile First’ mindset is a recommended approach.

This means designing with mobile as the primary focus before adapting it for desktop, rather than the more common opposite approach.

Mobile email clients are far more advanced than most of their desktop counterparts, which allows for more advanced coding techniques and innovations.


Make The Most Of CTAs

Three golden rules for your ‘Calls To Action’ are:

· Place them as high up in your email as possible.
· Make them clear and large.
· Repeat them throughout.

CTAs direct the user instantly back to your site, they are a clear signal of intent – if they click this they’re interested – and it is for this reason imperative that they are as obvious as possible to your recipients.

If you’ve taken the effort required to perfect your content, enticed your user to act on your message and don’t give them an easy route to do that, your time may have been wasted.


Image-to-Text Ratio

It’s important for deliverability that you keep your Image-to-Text Ratio low in your emails. It’s commonly recommended that this is a 60:40 split. However, the the lower, the better so we always keep it less than 50:50.

The first reason this is important is Spam Filters, as they can block image-heavy emails. This is because spammers frequently attempt to hide content within imagery so that the filters can’t spot it.

The second is default image display, which is when email clients by default will hide images until the user clicks to show them. This means that image-heavy emails can seem blank or broken when opened, and are therefore easily ignored.

However, text will always show, so at least the user will know something is there and may be more inclined to show images and view the rest of the content.

Lastly, and this is something that has been touched on a lot previously in this document – image loading. Images are far heavier to load than text, which means slower rendering times, more data to download and more time for your users to potentially lose interest.


Imagery


Retina Imagery

With High DPI displays now common around the world, it’s important that the imagery used in emails is suitable for this. These displays render imagery at twice the normal size, which means that standard images can become blurry when they are automatically scaled up.

Here’s a handy guide from Litmus if you’d like to find out more.


Image Formats

We recommend sticking to one of three format types for email; JPG, PNG and GIF. SVG is another option, and it is a great new format.

However, SVG is still in an experimental stage with email and requires complex techniques to effectively fall back on non-supporting clients, so it’s perhaps one to consider for the future.

Each format has it’s own pros and cons, which the guys over at SitePoint have brilliantly detailed.


File Size

It’s important to keep your file sizes as small as possible, which means compressing them during export and using the correct format for your image.

It’s important for a couple of reasons, the first of which is that Gmail clips messages weighing over 102kb, leaving a pretty nasty looking message at the bottom of the email asking you to click to view more – not nice.

Secondly, remember that your users need to download your email so not only will it take longer to render with large images, but it could also be expensive for people using a mobile data plan.

If you’re struggling with this there are many good compression tools available across the web to help:


Animated GIFs

Animated GIFs are a great way to increase engagement in emails. They can add delight to the experience of viewing your message far more than a static image but it’s important that they are used in the correct way.

The first consideration is file size. GIFs can be heavy and your campaign may suffer if your image is not at a reasonable size for delivering to an inbox.

It’s again important to think mobile too – is somebody using their mobile data plan to download your 15mb animated GIF going to be happy? Absolutely not. As a rule of thumb try to aim for less than 500kb per image.

Another consideration is the support for GIFs across email clients. Some versions of Outlook (2007, 2010 and 2013) as well as Windows Phone 7 don’t support them, instead only rendering the first frame of the image, so it’s important that the initial frame contains all of the vital information you want to include.

Additional Resources:


Typography

Typography is an extremely important part of any email when you consider the other points we’ve made regarding Image-to-Text Ratio, rendering across many email clients and image blocking.

Aside from making your email aesthetically pleasing, which is (of course) of high importance, typography in email includes a far more technical requirement to adhere to the restrictions and limitations it has.


Web Safe Fonts

One key restriction of email is it’s limited options for Web Fonts. Unlike with Web Design, where you are free to choose from a massive variety of fonts, there are only a small handful of fonts which will render consistently across all email clients.

This is because email relies on default fonts which are pre-installed on different devices and operating systems.

Here are the available Web Safe Fonts which can be used in email:


Web Fonts

Thankfully email clients have improved in recent years, with some allowing for more advanced coding techniques which has meant that the use of Web Fonts is now possible (Hallelujah!).

The only restriction for this is that if you decide to use a Web Font, an appropriate Web Safe Font must also be selected as a fallback, so that the email still renders well on those which are non-supporting.

Here is a list of the email clients which support Web Fonts:

  • iOS Mail 
  • Apple Mail 
  • Android (default mail client) 
  • Outlook 2000 
  • Outlook.com

The use of Web Fonts is therefore encouraged, though it should be seen as a method of progressive enhancement for your emails. Be sure to select an appropriate fallback and test thoroughly.

Additional Resources:


Render Testing

Testing email rendering can be one of the most challenging and often perplexing types of development – our devs have been known for outbursts of rage thanks to Outlook!

The reason for this is the sheer number of email clients available across multiple devices and operating systems around the world, each with their own quirks (in some cases stupidity), as well as the fact that a large majority of these are still using coding methods which date back to the 90s.

Thankfully, there are some tools available to assist with these such as Litmus and Email on Acid which allow you to test across a huge variety of clients all within a single platform.

These tools also offer automated tests to check links, subject lines, preheader text, performance and deliverability amongst many other things.

While these tools are great, nothing beats some manual testing, so it’s recommended to live test using some of your own email accounts. If you create emails frequently, it will be worth investing time in creating test accounts across many providers.

Putsmail is another great tool created by Litmus which allows you to dispatch a test email to an account, extremely helpful if you can’t do this directly via the ESP you are using.


Spam Avoidance

There’s no denying that avoiding spam traps and ensuring deliverability is a tricky task – some may even argue it’s impossible to completely avoid them.

There are many factors within the design and at campaign level which can contribute and identifying a specific problem is often very difficult.

Ultimately, using best practices throughout your email and campaign creation to get as close to optimal deliverability as possible is the best (and least stressful) approach.


Alt Tags

The use of imagery in your email is important in avoiding spam traps. Firstly, and a simple one to implement, is using ‘Alt Tags’ on each of your images.

Alt Tags are used as a description for your image, and while they have other uses in terms of spam avoidance, are helpful for spam filters to understand what the intention of your image is (so to highlight if you’re being a pesky spammer or not).

Spammers are generally pretty lazy with their use of alt tags too and so regularly don’t include them, which is another way traps make an assumption about emails.


Image-to-Text Ratio

Image-to-Text Ratio is important, again because spam traps can’t see your content if it is hidden within an image.

This makes them lean towards the assumption that there could be offending content within them.

As with Alt Tags, lazy spammers often create their emails entirely as imagery, which is another negative assumption spam traps may make about your email if the ratio is not good.


Text

Okay, so you may have a good Image-to-Text Ratio, but the job is not finished there. It’s also important to be wary of the content of your copy to ensure you are not hitting any trigger words spam traps may have.

Sometimes innocuous words may be a culprit for a reason you haven’t thought of, so it’s best to check resources like this from Automational to see if you’re likely to encounter any problems.

Generally though, it’s just about using some common sense – how often have you seen a message with ‘SAVE LOADS OF £££££’S RIGHT NOW!$^!%’ In your junk mail? Exactly. It just needs a bit of thought.

As well as the actual wording of your copy, it’s important to consider formatting. Avoid excessive use of exclamation points and capital letters, as well as any font sizing of colours which could appear to be ‘salesy’ or pushy, as all of this can lead spam traps to believe you are harassing recipients.

Also, if you value design and not annoying your recipients, these things will probably look pretty bad too, which is another reason to avoid them.


Don’t Shorten URLs

A golden rule for you here: never – really please – never ever shorten your URLs. This is high on the block criteria for spam traps and is even on some ISP block lists automatically (such as bit.ly or ow.ly).

This is because spammers or phishing scams will try to hide their dangerous links in shortened versions, so that their victims only become aware of their threat once they’ve clicked.

Even if you follow every other tip in this guide, if you shorten your links your campaign performance will undoubtedly suffer, so please take our advice on this one.

Recommended resources on email design: