How to nail your email marketing design (including examples)
Seven design best practices to help boost click-through rates on your next email marketing campaign!
Marketing emails are one of the best ways to keep your customers updated with your newest sales and promotions. Especially during peak sales periods like Black Friday.
Unfortunately, many of the problems that arose as email evolved over the years are still around today. The main point of contention isn’t necessarily with email itself, but rather with the email marketing design that merchants are using.
Different rendering engines cause your emails to look differently in Outlook vs. Gmail vs. iOS Mail for example.
The good news is that we're here to help! Here are 7 email marketing design best practices to boost click-through rates on your next email.
Note: This post is part of our 12-week Black Friday preparation checklist. Check it out if you haven't already!
Email marketing design best practices
Keep it simple
Sometimes less is more. Keeping your layout simple helps make your email feel less like “junk mail” and can drastically improve click rates.
Every email you send should have one main action that you want your readers to complete, commonly referred to in the email world as a “call to action, ” or CTA for short.
You often see this design when trying to reset a password, or as a “Read More” link in a newsletter update, but it also works exceptionally well in eCommerce emails
Here's an email from Patagonia that uses whitespace beautifully, letting their product shine and CTA jump out at their customers.
Apple's iOS Mail is the most popular email app in the world according to Litmus Labs, so it makes sense to design your email to be mobile friendly. Don’t worry too much about how it’s going to look on desktop: Chances are, most of the emails in your inbox right now are designed using mobile first and you didn’t even notice.
Take Photobox for example. They started with their mobile design then adapted it for desktop, with both designs highlighting the offer and the CTA.
I recommend using a maximum width of 600 pixels. This will ensure that your email will fit comfortably on phones with smaller screens, and will scale well when viewed on larger phones and tablets.
Some email layouts go as wide as 800 pixels, but I’d only recommend going that large once you’ve truly mastered email marketing design and can make a responsive layout that can change dynamically to fit smaller screens.
Use tables rather than divs
The main reason we included this tip is for the Microsoft family of email clients, both desktop and mobile. In the past Microsoft used Internet Explorer as their rendering engine of choice, but have recently switched to using Word in their Outlook products.
It might feel wrong to be using a table element in 2018, but it's by and far the best way to ensure your email will display consistently between Outlook and any other email client on the market. With Microsoft’s desktop email client’s making up nearly 10% of the email client market, you’d be crazy to ignore it.
An example of a centred button using only tables.
Keep your CSS old school
Be careful which CSS properties you decide to use in your email.
Support for HTML5 and CSS3 in emails is spotty at best, with some email clients not even fully supporting basic features (E.g. Outlook and the display property). If you're not sure if you should use a HTML or CSS feature in your email, check here.
Inline your CSS
Inlining your CSS is the best way to ensure your styles stay intact after landing in someone's inbox. Not every email client supports the style element, and even less support the link element.
With that said, you might be inclined to write your HTML and inline your styles as you go, but I highly recommend against this. Once your email gets sufficiently complex, small style changes can and will become very time consuming.
You don’t want to be working on your email template with this in every td element.
The best solution is to keep your styles in the head and use a tool to inline them as a final step in your development pipeline. There are plenty of tools out there that you can use in your browser or on the command-line to do this for you automagically. I've only listed two here, but a quick Google search for "css inline tool" will show you many more.
Don't rely on images
Relying too heavily on images to communicate with your customers is a sure fire way to miss out on email interactions. Some email clients won't display images by default, and users will disable images in emails to save data on mobile devices.
That’s not to say that you shouldn’t be using images in your email. But try to keep the key pieces of information like prices, dates, and messages as text. In the places where you do use an image, provide useful alt text as a last resort when the images don’t load.
Take Artifact Uprising for example. Without the lone image, the email is still impactful and clearly communicates the intent.
Test, test, test!
Make sure you've thoroughly tested your email before you start sending it out. Viewing your email in a web browser simply isn't enough to ensure your email will display correctly once in the hands of your customers.
The best way to test your email is to send it to yourself, and if you can, open it in a number of different ways (on your phone, desktop, different browsers, etc.).
Services such as Litmus can help in this process. If you’ve never heard of them, I’d highly recommend you check them out!
Email marketing design best practices: What's worked for you?
Firefox, Chrome, and even Internet Explorer are a lot better at rendering HTML than the many email clients out there. The last thing you want is to spend hours planning your campaign, only to send out thousands of emails that can't be read!
When designing your email marketing campaigns, what's worked for you and your business? Let us know in the comments below!
And if you want to read more about eCommerce email marketing, take a look at this post on eCommerce email marketing: What to do with that email list (besides let it gather dust).
- How-to guides