How to HTML: Your Guide to Designing and Coding Emails That Deliver

Customer.io on Apr 16, 2021

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:

Part 1: Principles of high-performing HTML emails
Part 2: Put the principles into practice

Part 1: Principles of high-performing HTML emails

Establish internal email standards

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:

Design and development goes faster for your team because you’re not reinventing the wheel every time
If you use contractors or agencies, they’ll give you better deliverables that require fewer revisions
When stakeholders float high-effort, low-reward content requests, your email guide can help keep everyone focused on the primary objectives of the campaign

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.

Include what matters most—and leave the rest out

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

Design for the clients your customers actually use

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

Build for deliverability and accessibility

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:

Keep your file size under 100KB. If you’re struggling to hit that limit, look for unnecessary styles or spaces you can remove
Balance your text-to-image ratio. A 60/40 split between text and images should keep you in the clear for most clients
Avoid JavaScript—not only is it not supported in most clients, many filters flag it as an indicator of spam or phishing

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).

Never use only (or mostly) images. In addition to the deliverability issues mentioned above, plenty of email clients default to blocking images until the individual allows them—and images are useless for screen readers
Don’t rely on images alone for key content. Again, the info in images will be lost to image blocking and screen readers; make sure important messages appear in text as well as images
Use alt text. Improve accessibility with alt text for every image. Write it to sound coherent for a screen reader, and style it to represent your brand. (Email on Acid has a useful guide to styling alt text)
Don’t lead with an image. If the first element in your email is an image, you run the risk of your email appearing blank in the preview window if the client auto-blocks images. This is where your pre-header text comes in!
Assume images will be blocked. Of course you want to design a visually appealing email—but make sure your email gets your message across effectively even if the images aren’t there

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

Design for mobile first

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.

Set your default width to 400px. This size will work well for most desktop clients, and easily scales for mobile as well
Use single-column layout. If you use a multiple-column design, you’ll have to create a second mobile version, where table stacking could be an issue
Set the target area for links and buttons at 44px by 44px or larger—your customers can’t click a button if it’s too small to touch!
For body copy, use a font size of 16px or more to make text readable and avoid the potential for awkward auto-zooming on iOS. And for any other text (like footers) set the font size to at least 13px (the smallest size that will display on an iPhone)—otherwise the email client will increase the size, which alters your design

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

Tread carefully with CSS

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:

Avoid using shorthand or three-digit hex color codes
Use !important to override email client styles
Use media queries to control font and image sizes on mobile
Test your emails thoroughly for issues in different clients

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.

Test, test, test (and then test some more)

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.

Part 2: Put the principles into practice

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.

Tables

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.

Set widths in each cell individually. This helps manage the chaos of differing widths across various elements
Use a container table to set your background color, because some clients don’t support backgrounds on the <body> tag
Nest your tables. This will keep your spacing more consistent; using margins and padding will give you varying results across clients (and some don’t support it)
Get rid of any whitespace between the closing tag of one cell and the opening tag of the next—leaving it in can cause strange gaps and spacing
Replicate CSS floats with the align attribute. You can also use colspan/rowspan, but count carefully
Watch out for empty table cells, as some email clients will handle them in unexpected ways (Email on Acid has more details on empty TDs).

Images

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.

Make sure to use absolute addresses—local is fine for testing, but you’ll need to store those images on the web when you send

Here’s the difference: an absolute address looks like 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 https://... parts!
Tom Buchok, CEO of MailCharts

Don’t use image maps. Slicing images and distributing them across a table should work in theory, but in practice it’s a nightmare to get the slices to line up correctly. Save yourself time and money and ditch those image maps!
Outlook will mangle background images set using the background attribute and CSS backgrounds. Here’s a trick from Email on Acid on using VML as a workaround
Use extra-large (but optimized) images for a crisp look on devices with retina displays. Retina displays have more physical pixels than their CSS dimensions indicate

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

Employ tools to optimize your images for you. Some of our favorites are:

One note for Gmail: it’s helpful to wrap your ‘img’ elements in an anchor element (e.g., <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.
Tom Buchok, CEO of MailCharts

Want more juicy details on making images awesome in HTML emails? Dig in here.

Fonts and special characters

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:

Universally supported:

Arial
Courier
Georgia
Helvetica
Times New Roman
Trebuchet MS
Verdana

Widely supported:

Arial Black
Book Antiqua
Charcoal
Comic Sans
Courier New
Geneva
Impact
Lucida Console
Lucida Sans Unicode
Lucida Grand
Monaco
Palatino Linotype
Palatino
Tahoma
Times

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:

Use HTML characters for common symbols like ampersands, bullets, em dashes, quotation marks, and apostrophes
Include a content-type tag in the section of the HTML code (usually in the header) to define the character set; UTF-8 is the most commonly used
To save you time, see if your ESP has a tool to automate this (you can use the url_encode liquid filter in Customer.io)
Keep in mind that different email clients will handle special characters differently, so test before sending—and if you want to save time, ask yourself whether all those special characters are really necessary to begin with

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

Issues with special content

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.

One thing that’s absolutely not supported in email is Javascript; stick with HTML instead.

These have limited support in email, so proceed with caution:

Videos: You’ll have better results with a thumbnail (with a visible play button) that links to your content
CSS Animations: Go with a GIF instead (though some clients will just display the first frame)
Forms: Just link to the form; your audience will get a more consistent experience (and better engagement)
Countdown timers: If your ESP provides a tool, go forth and test it out (reach out to services@customer.io if you’d like to try ours!)
HTML5 video: Very few clients support it, but it’s doable with a fallback image. (Email on Acid has useful details)
AMP for email: It only works for Gmail, but if that’s what most of your audience uses, it might be worth the effort. (Check out Instapage for examples)

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.

How you build is as important as what you build

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.

Back to Customer.io Blog