How to improve the user experience of email newsletters

andrew thumbnail

We've been improving the way we design and build automated emails and newsletters for internal communication at Cyber-Duck. Throughout this process, we reviewed and tested several practices and strategies, from optimising images to using CSS styling. I would like to share what worked for us.

Article by , Posted 19 months ago

At Cyber-Duck we use internal email lists to share news, inspiration and articles with our teams, helping everyone keep up-to-date with what’s going on in our industry. While this worked well, we felt a lot of the information shared would be beneficial for everyone across the company to reference. To solve this (and keep our inboxes a little less cluttered!) we started Duck Digest, a weekly internal email newsletter. This keeps everyone informed on what we’ve all been sharing that week, along with hot topics and discussion points.

Even on an internal level, we’re still aiming for that common email campaign goal – raising engagement. This is important, when 43% of UK consumers read less than half of any marketing-style emails. We’ve found the best way to do this is through increasing the attractiveness of your emails, by optimising images and using CSS3 styling, and examining analytics data to constantly improve. From my experience leading our internal Duck Digest newsletter, here are some key tips and techniques for these three factors, to inspire you for your own projects.

Images

Images are a great way to add appeal to emails, and thereby increase user engagement with your brand. But, there are a few caveats you must keep in mind for effective technical implementation.

Unfortunately, images can't be attached or sent as part of the email. They need to be hosted on a separate server and linked to within the email HTML. Thankfully, most popular email marketing service providers (like Mailchimp and Campaign Monitor) normally handle image hosting on your behalf when building and sending an email template.

Email clients can present further problems. These are the computer applications used to access and manage email, such as Outlook or Apple’s Mail. By default, the large majority of email clients won't display any images that are part of email templates, due to privacy or security concerns. Instead, the user must click a button in their email client, giving permission to download. Campaign Monitor has a handy list showing which clients do this by default.

Because of this, I would recommend that email templates should be designed and built with the assumption that images will not be displayed:

    1. Ensure headings and paragraphs are rendered as HTML text, and are not part of the images. The last thing you want is a blank email because the images didn't display!
    2. Use images to add context – the email should still convey its intended message without them.

There are some nice examples where coloured table cells have been used as a fallback when images cannot be displayed. McDonalds have successfully taken this approach in the past, styling alt-text and background colours to create burger-themed pixel art. While this is fun and still provides context for the email, compared to a blank space, it can be time consuming to build.

McDonalds Emails

McDonalds uses coloured table cells, boosting the experience for users with email clients that don't display images.

CSS Styling

CSS styling and properties can be used to enhance the look and feel of the template without having to rely on images; it supports a variety of layouts, colour and fonts. They are supported in the majority of email clients, and some even support CSS3 properties. Mailchimp has a definitive list of the supported properties available in each client.

Link styling is a great example of this. We use background-colour and padding to style our links as buttons in certain cases. Clients that support CSS3 properties will even render rounded corners if a border-radius is defined. As a fallback, if no CSS rendering is available, the link will always be presented as a hyperlink.

There are a few benefits for using link styling instead of hyperlinking through an image:

  1. Visibility – if images are turned off or not downloaded, the button will always be visible to users.
  2. Increased flexibility – the button text, colour or size can be quickly updated in the code, instead of having to edit an image each time. This is particularly useful when building a responsive email template, as the size of a button can change depending on the viewport or devices.

Email link styling

An example from our Duck Digest, showing how CSS3 can be used to style links without relying on images.

Only the Outlook for Windows email client creates a few downsides for the technique. It only has partial support for link padding. This can affect the size of your button, decreasing the hit zone and visibility. Fortunately, Outlook for Mac does not have this issue.

Another technique is available for improving the readability of copy in the email: font styling. Defining font-size and line-height can ensure paragraph text is legible across devices. The values of these can be increased through media queries, which will provide a better experience on mobile devices.

Unfortunately, there is very little support for web fonts at the moment. The safest option is to stick with default system fonts that will work across all platforms. Mailchimp has a great breakdown on what can and can't be done with this.

Analytics

Email analytic options are usually available through each email marketing service provider. Setting goals for your marketing campaigns and comparing with analytics data is a great way to improve your email campaigns. It can give an insight into the way your emails are viewed; for example, revealing what email clients your audience are using, and on which devices.

If there are a large percentage of receivers using mobile devices, perhaps look at creating a responsive template to improve the experience for that audience. Small tweaks like larger buttons, increased font sizes and narrower layouts can help make a difference when viewing emails on these devices.

Analytics can also tell you how links and call to actions are performing, allowing you to make adjustments to increase their conversion rates and visibility. You may even find that sending emails at particular times will be more successful, such as timing corporate emails to be sent while people have spare time on the commute.

By reviewing the email clients your audience use, better decisions can be made on the use of images. If the majority of your audience use Outlook, it may be best to limit their use and ensure the key messages are text based.

Duck Digest

Preview of our popular internal Duck Digest newsletter: featuring Laravel 5 and net neutrality.

Summary

Of course, it’s difficult to provide set rules to live by for all email marketing campaigns. Definitive guides would ideally be tailored for each industry, and companies’ unique audiences. We simply found that optimising images, using CSS styling and analysing campaign data increased the engagement and reception of our internal emails. Above all, testing is key – aim to make informed decisions based on your results, and find what works best for you.

If you need further information or would like Cyber-Duck to help you with your own email marketing campaigns, please get in touch.

Let's work together

Our interdisciplinary team can work as an extension of yours - we would love to hear your ideas.

Discuss a project