Brilliant subject line, compelling message, stunning layout—all the elements you need for a successful email, right? Nope, not by a long shot. All that work is moot if your emails are a wreck when they hit your customers’ inboxes—or don’t land at all. That’s why a smart approach to design and coding is essential in making sure your HTML emails actually perform.
Of course, you can always use a drag-and-drop editor (we happen to think Customer.io’s editor is pretty nifty). But building your own emails in HTML gives you a level of control that allows you to execute your exact brand style and requirements. Plus, it opens up a lot of options for how you get your message across.
If you’re accustomed to designing or coding for web, keep in mind that email development is a whole different animal. Many web-design approaches just don’t work in email, and there are mammoth differences in how different email clients handle your code. It’s really a jungle out there when it comes to controlling how clients display your emails. This guide walks you through the principles and practices you need to create HTML emails that get delivered and perform well out in the wild.
Here’s what we’ll cover:
Variety and complexity: two things you encounter in abundance when designing HTML emails—and the two main variables that can slow down your workflow and make your life harder. So before you get your hands dirty in the execution, define email guidelines that will save you time and headaches later on. Consider fonts, logo size and placement, header size, image specs, CTAs—any elements you use on the regular.
An email-specific brand guide gives you a leg up in a few ways:
A handy way to organize your guidelines is around an “always/sometimes/never” framework: the approaches you will always adhere to, things you might consider if there’s strong ROI, and stuff that simply isn’t on the table because it doesn’t provide enough value compared to the effort. Check out this article from Litmus to get you started on creating a solid guide for your brand.
Your emails should include the elements that increase the impact of your message, and no more. Adding complexity with special fonts, media, and shiny gee-gaws will dramatically slow your time to market, plus heighten the risk of your email failing on one or more email clients.
An email client refers to the app or software someone reads their email on. Gmail, Outlook, and Yahoo Mail are common ones, and there are many versions of each. For instance, Gmail for web, Gmail for iOS, and Gmail for Android are all unique email clients provided by Gmail. Every email client has its own quirks in how it handles your code and ultimately displays your emails—quirks you have to account for when you code.
When you choose features to add to your email, ask yourself, “Does adding this element make my message clearer, more impactful, or better for the recipient?” More often than not, that cool GIF or sliced image will cost you time and money—without improving your open or conversion rates.
It’s easy for a brand to want to showcase all the amazing things that are happening in each email. We all have a lot to say to our fans and visitors! But it’s important to maintain high-level strategies and focus on purposefulness in every email. Let the email speak for itself and create the results your brand wants.
Personalization, engagement, and conversions are focal points for every email marketer. That means giving your audience a structure they can tap into and using code as the tool to reach that objective.Brooke Hart, Chief Strategist at Bespoke Inbox
Every email client will handle your message differently—essentially, each one will try to break your carefully designed email in unique ways. That means you need to design for multiple email clients, focusing on those that matter most for your market, and plan for the variations in how your email looks across clients.
Know your audience’s habits
Start by identifying how your audience views your emails. The top four email clients are Apple iPhone, Gmail, Apple Mail, and Outlook, so make sure you’re supporting those at a minimum.
Be sure to keep up with changes in email client market share—this list from Litmus is updated every month. And remember that overall usage trends may not reflect your unique audience (especially true for B2B organizations and certain industries), so consider a reporting tool to identify the most common email clients your customers are using—we’re big fans of the inbox reporting that Litmus offers.
Focus your efforts on the top email clients
Use your resources wisely by designing for your audience’s most-used email clients. Don’t bother optimizing for clients that only a small percentage of your audience uses—especially if that client is tough to build for. Focusing your efforts on the most important clients for your brand will help you create high-performing emails much faster.
Make allowances for Outlook (sigh)
Yes, Outlook can be a bear for email designers and developers, and with 10% market share, there’s a good chance you’ve got to work with it. If more than 3% of your audience is using Outlook, take time to test and solve for any issues it presents, like DPI scaling (here’s a good primer for that from Email on Acid).
Aim for your impact, not uniformity
Finally, know that you won’t be able to achieve a perfectly uniform email across every client. Instead of breaking the bank trying to get perfect consistency, determine the make-or-break aspects necessary for delivering your message and brand identity effectively—and design for those, allowing for a little variation. Your internal email standards will come in handy here!
The design we work with for every client always focuses on two goals. First, a brand identity that remains visible, not buried in details that may change across clients. Second, messaging first—in a way that is personalized and reaches a customer.
We’ve found that it’s always constructive to start with best practices across the board for email clients—then narrow the focus to what’s important and what’s not. When we keep this pointed approach, there is a streamlined look that can be refined over time. The best emails for a brand are developed and revisited after laying a firm foundation that is streamlined for all email clients.Brooke Hart, Chief Strategist at Bespoke Inbox
Stay out of the spam filter
You miss 100% of the shots you don’t take—and you can’t take aim at conversion when you’re stuck in a spam filter. A few tips to make sure your emails hit the inbox:
Don’t hide the unsubscribe
Hard-to-find unsubscribe link = annoyed customer. Annoyance = emails flagged as spam by customers. Spam flags = tanking delivery rates for your future emails. So make your unsubscribe link easy to find and big enough to read. It’s not just the law: it builds goodwill with your brand and purges uninterested people from your audience. After all, why bother building, testing, and sending emails for people who will never convert? Make opt-out easy so you’re more likely to hit the inboxes of high-value people in your audience.
Leverage preheader text
Once you’ve leapt past the spam filter, it’s time to up those open rates. You’ve already written a killer subject line—don’t follow it with a sad trombone wah-wah by forgetting to customize your preheader. Instead of letting the email client pull in the first bit of email body text (which might not have any valuable messaging), use the preheader to incentivize opens. Here’s how to do it quickly and easily in Customer.io.
Use images wisely (and plan for them to be blocked)
Images give your message instant impact and embody your brand—unless they’re designed in such a way that they get in the way of accessibility. You’ll lose audience share if that audience can’t see what you’re trying to deliver. Be smart with images in your design to improve the reader’s experience (and, ultimately, conversion).
Our focus is always to take the temperature for good email health. That means a deliverability rate of 90% or more, bounce rates under 2%, and an average of 0.5% complaints. A healthy list keeps a healthy IP and domain. The result is a continuous level of messaging that reaches your engaged users and keeps your list in good standing with email best practices. We simply never allow our emails to go below steady health level—and we monitor it for continuous user engagement.Brooke Hart, Chief Strategist at Bespoke Inbox
Tempted to just design for desktop? Think again—85% of people check email on smartphones (according to 99Firms). Take a look at your own data and you’ll likely see this reflected in the habits of your audience, which is why ensuring deliverability and performance on mobile devices is crucial for the success of your email campaigns.
When you build with mobile in mind from the get-go, you cut your work in half—if your email looks good on mobile, it will look good on desktop too. No need to build separate versions from scratch! Mobile-first design is a good way to design for both mobile and desktop at the same time so you wind up with emails that perform well on every device.
One more thing to keep in mind about mobile-first design: it’s the future. Even if your audience is heavily weighted toward people using desktops or laptops, the amount of email opened on mobile is constantly increasing. Designing for mobile first helps you reach the widest possible audience now and sets you up for better practices ongoing.
If you want even more control over how your email looks on different devices, consider responsive design. Learn more with this guide.
We’ve found that, while some emails may evolve into a different format, it’s essential to start with the base. It makes all the difference in hitting the nail on the head for responsiveness. Designing for mobile is foundational to user-friendliness. It’s not only important for mobile, but responsiveness is easier when the email expands to desktop, as opposed to shrinking something to a mobile phone. Once this works, then consider the upgrade to see if other design formats convert better. In most instances, we’ve found that standards are there for a reason and always work best.Brooke Hart, Chief Strategist at Bespoke Inbox
CSS for email =/= CSS for web
When you’re designing for web, the most efficient way to use CSS for styling is to use a <link> element to link to an external CSS file or a <style> element in the <head> section. But if you do this in email, many email clients will strip your CSS out (in a variety of different ways) and apply the email client’s styling instead—and your email will be a hot mess when it hits the inbox.
Bottom line: CSS alone for layout just doesn’t work for emails. You’ve got to get comfortable using tables (more on that below).
Use inline CSS
What you can use for email is inline CSS. Email clients don’t strip inline CSS, so some basics (like font size, folor, and font family) are pretty reliable. Other CSS rules (including element sizing, ordering, and display, among many more) remain tricky. Here’s the tl;dr on best practices:
Of course, writing inline CSS by hand is often a pain, so Customer.io editors do CSS inlining for you, along with other preflight actions, using Premailer. In fact, when you test your email, you may notice that it looks slightly different than it did in the editor. This is because Premailer automatically makes changes in your code to make the email deliverable on different clients.
Take a deeper dive into the effective use of CSS within HTML emails with this article.
It’s critical that you pre-send your email to make sure it’s deliverable and your message gets across on all the email clients that matter to you. You’ve spent the time to design a powerful email that will perform—it’s worth the extra bit of time to ensure it’s delivered the way you intend.
When we test, do more than preview messages. We expect to go through at least two rounds of QA. If it’s an automation, we leave it in dev testing for at least a week, and more than two individuals are always required to look at the results. It’s better to let the automations or the emails breathe and find their own perfection. Lifecycle within emails is like fine wine: the more you test, the better it gets. This is a palate-pleaser with conversion rates and responsiveness. The small details help deliver an email that creates the personal experience every user wants.Brooke Hart, Chief Strategist at Bespoke Inbox
This is different from other kinds of testing you might do, like A/B testing of subject lines or content. With pre-send testing, you’re looking for any issues with deliverability, display, and accessibility.
If you work with A/B testing, set a hypothesis that’s designed to increase conversion rates by at least 10%. In many of our tests, we’ve been able to increase by almost 50%. Stick with one hypothesis per test for best practices—and use that approach as a progressive way to get better results over time. Hypotheses for design, content, subject lines, and CTAs—even as a small detail—all make a difference in how users respond.Brooke Hart, Chief Strategist at Bespoke Inbox
There are two avenues for testing: do-it-yourself or using a service. DIY can be a great starting point—set up an account with each client you want to test for, send the email to yourself, and troubleshoot as needed. If you want to save yourself the manual labor (and get better analytics), a testing service like Litmus or Email on Acid makes it faster and easier to test your emails on many clients at once.
Test and troubleshoot any issues for the most important clients for your audience—and remember that your emails will never look exactly the same on all email clients. Instead, focus on getting a result that’s true to your brand and your goals.
Now that you’ve got the rules of the road, let’s dive into the nitty-gritty of designing and developing. Read on for deets on the key aspects of building an HTML email that hits your deliverability, open, and conversion KPIs.
Like it or not, the best way to keep your layout consistent is to use tables. If you try to use CSS for layout, every major email client will either strip it out entirely or break it—each client in its own special way. Tables work in all clients, so they’re the best path for layout consistency.
While you’ve got to plan for blocked images (as discussed in part one above), you also need to make sure your images work flawlessly when they are displayed.
Here’s the difference: an absolute address looks likeTom Buchok, CEO of MailCharts
https://www.example.com/path/to/image.png, where as a local file will often just refer to
path/to/image.png—you want the
Here’s neat trick: simply export your images at twice their width and height. So, rather than 200×200, save as 400×400—then, in your HTML and CSS, set the size back down to 200×200…whoa!Tom Buchok, CEO of MailCharts
One note for Gmail: it’s helpful to wrap your ‘img’ elements in an anchor element (e.g.,Tom Buchok, CEO of MailCharts
<a href="/%E2%80%A6"><img src="/%E2%80%A6" /></a>). Otherwise, Gmail will show a pesky download icon over your content. Plus, you’ll be offering more opportunity for the valued click-through.
Want more juicy details on making images awesome in HTML emails? Dig in here.
If you don’t choose an email-safe font, many email clients will strip and replace it with their own default styling—so your recipient gets a Times New Roman throwback! Here’s a quick reference guide on fonts you can count on for HTML emails:
You’ll also need to encode any special characters; otherwise, some email clients may render them incorrectly (often as a black square or diamond). This can even affect quotation marks and apostrophes! To make sure special characters are rendered consistently in most email clients:
content-typetag in the section of the HTML code (usually in the header) to define the character set; UTF-8 is the most commonly used
url_encodeliquid filter in Customer.io)
Many brands question the breaking point between their brand and best-practice fonts. While we always support custom fonts, it’s also important to acknowledge and understand that there will at least be one email provider that will throw the font out. This isn’t a chip to your brand. Use a fallback that is closest to your custom font and allow the rest of the email to speak for itself.Brooke Hart, Chief Strategist at Bespoke Inbox
Every element of an email can be treated differently by various email clients. But certain kinds of content are especially tricky. Some things might be worth the effort, while others are best avoided entirely. Here’s a breakdown of things that are high risk for deliverability and performance, require a heavy time investment to get right, or simply won’t work at all in email.
These have limited support in email, so proceed with caution:
If you want to experiment with special content, a best practice solution is to test with split A/B and see if it makes a difference. You also always want to continue to look at your end goal and objective. In many instances, users are looking at emails quickly to get information. The extra juggling and tricks aren’t worth the compromise if they don’t make a difference in engagement.Brooke Hart, Chief Strategist at Bespoke Inbox
Before going down the rabbit hole on a special type of content, ask whether the risk and time involved will add tangible benefits to your message. If not, head back to the tried-and-true. But if you could get some real value out of special content, here’s a guide on how to implement it effectively.
Conversion hinges on much more than getting the strategy and creative right—how you build an email determines whether your message will make it through to customers in the first place. HTML is your friend; use it wisely, and you can navigate the wilderness of email clients’ peccadillos, chart a sure path to every inbox, and ensure every open delivers an experience that gets the results you’re aiming for.