It is not easy to get noticed between the hundreds of emails that crowd a recipient’s inbox. And it is equally important to avoid sending your emails to a user’s spam box. Therefore, it is essential to put considerate effort and thought into your email design.

The next sections contain some best practices for elaborating the concept design of your emails, as well as some pitfalls that can hurt performance. AND the ultimate wish of every marketeer is to increase click through and conversion rates.

Getting more rates

Email Conversion Rate is calculated by the number of subscribers that have clicked & purchased in your email marketing campaign. Email Click Through Rate is calculated by the number of subscribers that have clicked on at least one link in your email marketing campaign.

Increasing email rates is the same as being a mad scientist creating Frankenstein. It’s different for every company and it’s all about experimentation. Before you start, make sure you understand your readers; what content do they want to see, how and when are important questions. Analyse readers behavior with heat maps; should the button be on the right-top-bottom, left- centered, green, red, yellow. There are many buttons and levers you could push or pull in order to create the ultimate monster, email.

To increase the CTR of your email campaign:
– Try sending emails on different days and time too see what scores better.
– Personalized messages with Relevant content by segmentation on ‘interests’
– Different colors or layouts (themes) can influence CTR
– Short or long emails can make a difference
– Make your message easy share-able among friends
– Why not use just one button in your email and try different buttons
– Use triggered email campaigns
– Go crazy with testing + analyse the output and document your results

On a side note; Brand consistency is very important, don’t change your branding drastically in short periods. We’re talking about small differences that can have great impact.

Extra’s to Increase your Conversion Rate:
– Use custom landing pages with easy access to products and shopping cart
– Send a email when readers have abandoned their shopping cart
– Send a reminder to inactive readers
– Track website behavior and send more ‘relevant’ content

Create smart life cycles where you send triggered emails to specific readers at crucial points in their journey, rather then sending bulk generic emails.


Brand optimalisation

Send from your domain;
Use a recognizable/personalised From address Reply-to address;
Personalize the recipient’s name in the To field



Make a compelling subject-line and Pre-header
Using the personal touch in subject lines such as including the recipient’s name is a standard technique to increase open rates. You can, however, based on individual website page views or search terms, use other types of personalization.

There’s really no such thing as a one-size-fits-all length. In fact, the ideal length of your subject line depends on a variety of factors. It’s important to keep in mind that your subscribers use a variety of different browsers and email clients, this contributes to the complexity. Consider using data to pinpoint subscriber devices.

Also a good idea to look at which subject lines have garnered high open rates in your past emails, or do a A/B test. If the majority of the opens are happening on iPhones, you’ll want to use shorter email subject lines to get the most impact. Additionally, keep your offer or CTA at the beginning of your subject line where it’s most likely to be seen. You can also use pre-header text to add more context to your subject lines in the preview pane.

Avoid using spam filter flagging keywords & characters
Limit to 100 characters in length. Gmail shows about 140 characters for subject line and pre-header text combined. Iphone displays about 90 characters for the pre-header (in the traditional vertical view) regardless of the subject length. Don’t drop the “view online” link, just put it after the pre-header. And try A/B testing on the pre-header to see what works best for your recipients and your emails.



Preview your subjectline and pre-header tool:

Display your logo clearly and use your brand colors. If possible, reflect the design of your website.
A preview pane is essentially a box of 400×300 pixels found at the top of emails, containing the key message of the email. The preview pane should always contain a line of text that describes the content or purpose that motivates your recipient for further reading. It is recommended to try to keep the header less than 150 pixel in height, to avoid pushing your main message and call-to-action below the preview pane.



Digital marketers must distinguish between true one-to-one personalization and the targeting of anonymous aggregate personas. Personification provides a framework for balancing privacy and relevance.

Difference between personification vs personalisation
wiki/personalize to adapt something to the needs or tastes of an individual to represent something abstract as a person; to embody

wiki/personify To be an example of; to have all the attributes of. ~ Mozart could be said to personify musical genius.
To create a representation of (an abstract quality) in the form of a character. ~ The writer personified death in the form of the Grim Reaper.

Personification is the act of giving potential customers the right message, on the right platform, using the right channel, at the right time – when you DON’T have their personal information.

Consumers should have the power to correct any data about them that may lead to their inclusion in a persona segment — a capability that serves both the public and marketers — and should have assurances that inclusion in a persona segment can’t be traced back to them personally



Consider building your email with the “mobile first” responsive approach. For optimal legibility, your email width should be limited to +/- 600 pixels. Litmus suggests 320 to 550 pixels for mobile.

– Create call-to-action buttons that can be easily clicked or tapped. Your call-to-action need to be eye-catching, centered and clickable, with a minimum size of 44 x 44 pixels.

– While desktop newsletters are typically designed in two or three columns, a mobile optimised email should be designed in a single column template.

In general, sticking with standard system fonts is the easiest. This includes Helvetica, Arial and so on. However, we can use web fonts, such as Google Fonts. Make sure you have a fallback for clients that don’t support them.

Images in Email Some clients will show images by default. Some won’t. Keep this in mind when including images in your email content. This also affects tracking metrics, because images will typically be used to track opens. Remember to include good alt text for all of your images and a basic reset: style=border:0; outline:none; text-decoration:none; display:block;. You can get creative with alt text for clients that turn off images.

Animated GIFs are supported in most clients. Outlook versions 2007 to 2013 do not support animated GIFs, instead falling back to the first frame. Guide for Animated GIFs. Video is supported in iOS, Apple Mail and You can use media queries to show or hide a video based on the client. Guide for html5 video in email. Forms in email, try and avoid them. Link to an external form if you need one. Guide for forms in email.

Keep in mind that, for Outlook, you need to declare how wide an image should be with the width attribute.


Email Clients & Devices

Litmus keeps track of the market share of email clients, based on its own internal statistics. Keep in mind that this is probably not the same for your customer base, but it is a good indicator to go by.

Email clients use different engines to render HTML emails: – Apple Mail, Outlook for Mac, Android Mail and iOS Mail use WebKit. – Outlook 2000, 2002 and 2003 use Internet Explorer. – Outlook 2007, 2010 and 2013 use Microsoft Word (yes, Word!). – Web clients use their browser’s respective engine (for example, Safari uses WebKit and Chrome uses Blink).

Coding like it is 1999 Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites. Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email. Some clients (most notably Gmail until recently) will strip any CSS that isn’t inlined.

You can use divs if you want, but it’s safer to code like it’s 1999 and stick to tables. This means: – table instead of div, – #FFFFFF instead of #FFF, – padding instead of margin, – CSS2 instead of CSS3, – HTML4 instead of HTML5, – background-color instead of background, – HTML attributes instead of CSS, – inline CSS instead of style sheets or style blocks. These are best practices. You could certainly ignore the safe route and go above and beyond.

Several techniques are used in the email world to get around a lack of support for media queries. FLUID: The easiest solution is to stick to a single column and make your emails fluid. This means that as the viewport shrinks, your content area shrinks. RESPONSIVE AND ADAPTIVE: Using media queries and breakpoints, we can provide alternate styles for different-sized viewports. We can also hide or show elements. HYBRID AND SPONGY: This technique uses a bit of fluid, a bit of responsive and a couple of hacks for Outlook support. We also get to ensure that the columns stack without media queries.

Since September 14, 2016: Google announced support for embedded CSS and media queries in Gmail. This was a huge for the email development industry.

Conditional tags It’s no secret that Microsoft’s Outlook desktop email client is the bane of every email designer’s existence. With its terrible CSS support, getting an email to look as good in Outlook as it may in Yahoo or Gmail can be difficult at the best of times. We can apply specific CSS styles and show or hide elements and content for different versions of email clients (most useful for outlook).


Test your email!

I don’t think I’ve ever sent an email successfully the first time. There is always something to fix, always a typo, always a rendering issue in Outlook, always something I’ve forgotten to add.

You can test your email in a few ways: – Send an email to yourself and check it on a desktop client (Outlook), a web client (Gmail) and a mobile client (iOS Mail). – Automate tests using Litmus or Email on Acid. – Proofread the content, and check the layout renders. – A/B test various types of content, lengths of content and subject lines.



Old school marketing was capturing data first. New school marketing is creating value first. Respect, trust and transparency must be our main priorities when building customer experiences