How I do it

I have gathered and follow these design and development best practices on all projects ensuring maximum engagement every time.


Importance of emails

Email marketing is extraordinarily powerful for any business making it a great investment, but it’s also very hard to do well and make sure campaigns have maximum impact. It has the highest return on investment across channels, and companies have attributed nearly 23% of their total sales to email. Using email to its full advantage is all about providing your customers with the best possible experience; from email signup, to the email itself, to the landing page - and everything in-between - optimising for every step of the user experience is key to email marketing success.


The need for responsive design

53% of ‘email opens’ are on mobile devices. By rethinking both email design and content strategy, brands are turning to responsive design to improve accessibility and increase click rates. It is no longer enough to design solely for the desktop - if you do, you risk losing out on a huge audience.

With the huge increase of smartphone users in recent years it’s no wonder why. Responsive email design takes mobile aware techniques further by using CS3 media queries to adjust styles and content on mobile devices. This provides more control over layouts and ensures a highly polished experience for mobile users.


1 Content Strategy

If a customer opens an email, what are they going to see? What’s going to make them convert and what might make them hesitate?

Know the business goal before you send anything.
Every email newsletter should have a reason for being: a goal. The content of the email should reflect and support this.


2 Subject Line & Pre-header

Subject Line
It’s the job of the subject line to describe what’s inside. Use an informative, short and recognisable subject line. Always avoid using ALL CAPS or ‘spammy’ words.

Pre-header
It’s the job of the pre-header to sell what’s inside and reinforce the subject line. Use it to grab attention, raise interest and get people to actually look at (and act on) your message.


3 Email Layout

The ideal width is 500 - 600px wide for desktop and 320px for mobile. Single columns work better so readers can scan content. Columns are also easier to convert to responsive design.

If you have multiple products/categories to display, provide a navigation bar.


4 Visual Impact

Graphics and imagery should delineate the content sections. Images speak louder than words and are absorbed quicker; so getting these right is key.

Whenever an image is used, it’s important to provide fallback colour and alt-text for the image.

Make feature headers or product offers readily clickable.


5 Copy & Content

Use short sentences and paragraphs. If you have large paragraphs of copy, use hyperlinks or make part of it bold to help break up the copy.

Use design elements - like spacing and dividing lines - to distinguish the content sections from one another.

Use bullet points to quickly showcase benefits.

Use web-safe standard fonts - Arial, Times New Roman, Verdana, etc.

Ideal font size for body copy is 14px and titles should be a minimum 22px, which provides decent readability on mobile devices. Use full six digit # Hexadecimal value for colours.

Ideal font size for body copy is 14px and title is minimum 22px which provides a decent readability on mobile devices.

Use full six digit # Hexadecimal value for colours.


6 Footer

Include the organisation’s complete contact details.

Don’t hide the unsubscribe button.

Include links to a main section of your website or key services/product categories if possible.

Make it easy for your audience to share your email by including social media links and/or ‘Forward to a Friend’ options. Encourage the ‘viral effect’.

Add a line about ‘Why your recipients are receiving this email?’ to decrease chances of SPAM complaints..


7 Bulletproof Buttons

Bulletproof buttons allow you to build buttons with code instead of images. By only using HTML and CSS, the button will display in all email clients, even with images off, hence making them “bulletproof.”

The main CTA should have the largest and brightest button and be easy for a thumb to find with a minimum height of 44px.

Secondary CTAs are bold, blue text links.

Tertiary CTAs are simple black links. With a quick glance at the email, the content hierarchy is clear.


8 CAN-SPAM compliant

Spam filters assign points to “spam” words in the subject line and body of an email. If the points exceed a certain threshold, the email is considered spam. However, using any one (or two or three) of these words won’t automatically mean a trip to the junk folder. While content filtering plays a part in spam scores, your sender reputation and engagement metrics are much more important.

Anti-spam filters analyse images, so if you are using prices/percentages or spam trigger words, slice the image containing those elements horizontally in order to avoid their recognition.

Avoid using the same alt tag or sequence of words in all messages, anything that looks like a pattern can be filtered by anti-spam filters.

Make it easy and simple for users to find a way to unsubscribe from your email so that they don't hit the always easy-to-find “spam" button!

Spam filters like to see a plain text version of the email.


9 Plain Text

Define headers and CTAs: Try using caps lock or symbols to create hierarchy, differentiating headlines and CTAs from body text.

Include whitespace: Use line breaks between different content sections, headlines, and CTAs for increased legibility.

Use bulleted lists: While bullet points aren’t supported, you can use other characters, like -, *, or +, to assist with creating hierarchy.

When creating HTML emails, include a plain text version that is easy to read and structured for quick scanning.


10 Testing

Use A/B testing to compare the results of one version of an email against another version of an email.There are countless things to test; including headlines, pre-header text, From names, and images.

Litmus is an online tool to help test your emails. It tests and tracks your email campaigns, so you can always put your best design forward.

There are seemingly countless ways that email clients can break your designs. What looks great in one inbox could look completely mangled and broken in another. Preview your campaigns across mobile, desktop, and webmail clients before sending. You’ve convinced your subscribers to open your email - don’t ruin it with a broken design.


11 Landing page

Your subscriber’s experience doesn’t end with your email - it continues onto the landing page, or website. Similar to the email, keep the content streamlined and include a clear CTA.

If your email is mobile-friendly, your website should be too. You wouldn’t want your subscriber to get all the way to the landing page only to be turned off by an inaccessible experience.