5 Tips to Build “Code Perfect” Emails

Email is a fan favorite marketing channel to drive website traffic, boost engagement, deliver proactive customer service, increase sales, and support just about any business objective.

Customers prefer email’s non-obtrusive brand touch and businesses love the frequent audience outreach, while remaining low cost. In fact, a 2019 Litmus study found email’s return on invest increased over last year to $42:1 ($42 dollars returned for every $1 invested).

Email marketers will be the first to tell you, though, coding high-quality, error-free emails that render effectively across the variety of mobile devices, tablets, desktops; email clients; and email service providers is complex.

Though tried and true email rules are elusive and heavily dependent on the mood swings of ESPs and audience choice, today we’re sharing our lead technical marketer and guest blogger Chris Grouge’s five favorite tips for coding “code perfect” emails.

(PSST: Chris is one of the product developers behind our responsive email build tool Code Perfect, and knows a thing or two about fixing troublesome code, while ensuring email quality.)

1. Simplify Your Code (Don’t Stack Tables)

It’s a no brainer that the simpler your code is, the easier it is to identify issues. Yet, when we’re trying to code responsive layouts and account for the various anomalies expected by popular ESPs or devices, HTML code gets cluttered fast.

A good rule-of-thumb to simplify your code is to stack rows or <tr> tags within a table, instead of stacking tables. Stacking tables increases the likelihood of random line breaks (especially in clients like Outlook) that are time-intensive to fix.

See how replacing stacked tables with stacked rows simplifies our code:

2. Use In-line Styling

Block level elements like <p> and <h1> can also cause rework and friction, because some email clients will strip these elements out, or they’ll inherit unexpected properties that impact your design.

Instead of relying on block level elements, enclose all email copy in <td> or <th> cells and use inline styles to style your text.

Bonus tip: <td> and <th> are effective for both desktop and mobile rendering, but we’ve found <th> cells are more responsive than <td> cells. Some Gmail clients won’t stack <td> cells, but they’ll stack <th> cells.

3. Find Your Coding Environment Safe Space

We’re talking sandy beach, cold cocktail… (we wish!). Really, finding your perfect development environment will make your coding experience better and easier. 

Development environments or HTML editors, like Dreamweaver, VSCode, Litmus Builder, SublimeText, etc., each have unique features and intricacies. If you’re not set in one already, shop around and decide which suits your needs and preferences, and then use customizations to make it your own.

I personally use Dreamweaver and customized my work station to have all the tools I need on the right hand side. In Dreamweaver, I can quickly save snippets of code, reducing the amount of time I spend coding each email.

However, I have teammates who prefer VSCode, because it’s a much lighter tool and allows for many pre-made plugins. Just find the tool with the interface and feature set you prefer!

4. Embrace Web Fonts

Don’t be afraid of using Google Fonts to enhance your email design and stay on-brand. While Google Fonts won’t render in 100% of email clients, there are plenty of font-stack options compatible with clients, like Outlook, that won’t display the Google font.

Spend time researching or working with your Creative team to determine the best Google font and an appropriate fall back font for your brand. Consider how different email clients will render both versions of your text.

For example, the Google font Oswald can be tricky, because it’s a condensed font. There aren’t many options for a condensed fall back font or a font with similar character sizes. See how on the left side, Oswald is rendering properly and the call-to-actions are aligned, but on the right side, the fall back font wraps the text to an additional line, causing misaligned content.

5. Avoid <div> tags and complex CSS styles

Since more and more email recipients are reading on mobile devices, we need to be careful coding our emails. We don’t want to give anyone a broken email experience.

To be safe, avoid using <div> tags, because they aren’t universally supported across email clients. Replace them with <table> tags to avoid tedious workarounds.

Similarly, avoid complex CSS styles, like floats, positions, and clears. These advanced styles aren’t supported in many email clients today.

Code Perfect Emails in Minutes

Follow these email coding tips to reduce time spent troubleshooting and reworking tricky email builds. Reach out if you have any questions!

Ready to throw in the towel? Get a free demo of Code Perfect, our responsive email build tool enabling marketers to build code perfect, on-brand emails in minutes – no HTML required.