The best way to code HTML email background colors

Coding background colors sounds like a simple task right? The truth? Even this minor bit of styling has some pitfalls, and there are a few considerations that need to be made to get consistent rendering across email clients.

And it’s not just developers that need to appease the inbox gods. With Dark Mode gaining momentum, there are even more environments to be aware of, some of which will require email designers to take extra care when applying background colors in their designs.

In this blog post, you’ll learn:

Why use background colors in email?

Putting a background color strategy into place meets a few needs when it comes to elevating your email program. From a technical standpoint, implementing background colors doesn’t add any load time to your emails, and they’re still visible even when images are turned off. They can help separate content, call out messaging, or set an email apart from others in your subscriber’s inbox, potentially increasing engagement among your audience.

Stand out in the inbox

You can create an impactful opening experience—like this email from Blurb.

The hero area packs a punch. The bold orange background makes an impact by contrasting against the blue of the logo, elevating the brand identity. Once the reader scrolls past the hero area, secondary content sits on a white background, offering the ideal reading experience for larger bodies of copy.

blurb email example of background color
Source: Really Good Emails

Separate out sections

If you’ve got a long email, color is a great way to visually separate different content blocks so it feels more digestible.

Promotional emails from coffee house giant Starbucks can be quite lengthy, with multiple promotions housed within a single email. To help sections stand apart from each other, different background colors are used.

starbucks email example of background colors
View this email in Litmus

Elevate brand identity

Gradients are part of Marketing Agency 1973 Ltd’s brand identity, which is why you often find bold linear gradients in the background of their emails. Background gradients can make compositions appear more dynamic, and even encourage the subscriber to scroll.

1973 Ltd email example of gradient background
Source: Really Good Emails

So what’s the best way to bring these techniques into your email development? I asked my teammate and developer of Litmus emails, Carin Slater, to give us the lowdown on coding solid and gradient backgrounds.

How to code a solid background color in email

Background colors can be coded in multiple ways and in multiple places. But each method is not equally supported among email clients. Here’s a quick chart of which background style code and color code method works for the top email clients.

Email client support for background colors

Style code CSS properties
‘background’ and ‘background-color’
HTML attribute ‘bgcolor’
Color code 6 digit hex 3 digit hex RGB RGBA 6 digit hex 3 digit hex RGB RGBA
Apple Mail 14 ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Outlook 2016 (macOS 10.12.6) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Outlook 13, 16, 19 (Windows 10) ✓ Yes ✓ Yes ✓ Yes ✘ No ✓ Yes ✘ No ✘ No ✘ No
Outlook Office 365 (Windows 10) ✓ Yes ✓ Yes ✓ Yes ✘ No ✓ Yes ✘ No ✘ No ✘ No
Outlook Office 365 (Mac OS 10.15) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Windows 10 Mail ✓ Yes ✓ Yes ✓ Yes ✘ No ✓ Yes ✘ No ✘ No ✘ No
Gmail App (Android 10) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Gmail App (iOS 13.4.1) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Outlook (Android 7.0) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Outlook (iOS 12.0) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Samsung Mail (Android 7.0) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
iPad 11 Air (Gen 4 iOS 14.2) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
iPhone 12 (iOS 14.2) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
AOL Mail (Edge) ✓ Yes ✓ Yes ✓ Yes ✘ No ✓ Yes ✘ No ✘ No ✘ No
Comcast (Edge) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Gmail (Chrome) ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Office 365 ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Outlook.com ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✓ Yes ✘ No ✘ No
Web.de ✓ Yes ✓ Yes ✓ Yes ✘ No ✓ Yes ✘ No ✘ No ✘ No
Yahoo! Mail ✓ Yes ✓ Yes ✓ Yes ✘ No ✓ Yes ✘ No ✘ No ✘ No

 

We all know email clients can be a bit persnickety. So what’s the best way to code background colors so it works across all email clients? I’ll walk you through our recommendation and why.

1. Use tables and table cells

There are four places in your HTML that you can add a background color:

  • <body>
  • <div>
  • <table>
  • <td>

The safest place to add the background color is on a table or a table cell.

The <body> tag is deleted in Yahoo and AOL, so any background color applied there won’t show up in those email clients. And placing a color on a wrapping <div> after the body would work everywhere except Outlook clients since they don’t support <div> tags in emails.

To get the widest range of email client support, wrap your entire email in a 100% width <table> tag and put your background color there. And use table cells <td> for sections of your email so you have greater flexibility in coloring specific content blocks.

2. Add color with a CSS property and HEX color codes or RGB values

Background colors can be coded in multiple ways:

  • Using the bgcolor HTML attribute
  • Using the CSS property background-color
  • Using the CSS shorthand property background
  • Using the 6 digit hexadecimal color code
  • Using the 3 digit hexadecimal color code
  • Using RGB color values

As far as how to put the background color on your table or table cell, you should use a CSS property.

Testing the two CSS property methods—background-color and background—we found they both have the same, consistent results as long as you are only adding color (no images). According to caniemail.com, using the background property for anything other than adding a color may result in your color not showing up.

The bgcolor HTML attribute didn’t fare well in Outlook, with inconsistent support for 3-digit HEX codes. And the use of RGB and RGBA values resulted in the incorrect color, or the color being dropped completely.

Here’s our background color test using the various methods in Outlook so you can see for yourself:

Litmus test on how background colors render in HTML email in Outlook
See this test in Litmus →

In other email clients, the 3-digit HEX code rendered well, but the RGB and RGBA values resulted in incorrect colors when applied to the bgcolor HTML attribute.

Litmus test on how background colors render in HTML email in Apple Mail
See this test in Litmus →

After all our testing, we came to one conclusion: Stick with the CSS properties, and use 3 or 6-digit HEX codes or RGB values. Those worked across all email clients.

Introducing opacity with the alpha for the RGBA value wasn’t supported in Outlook, Web.de, or GMX.de, but had decent support otherwise.

So your final code should look something like this to color the whole background of a table:




Blog – Litmus

Source link

Scroll Up