
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. You can create an impactful opening experience-like this email from Blurb. The bold orange background makes an impact by contrasting against the blue of the logo, elevating the brand identity. Source: Really Good Emails Separate out sections 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. 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. View this email in Litmus Elevate brand identity To help sections stand apart from each other, different background colors are used. 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. 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 HTML email background colorīackground colors can be coded in multiple ways and in multiple places. Here’s a quick chart of which background style code and color code method works for the top email clients.Įmail client support for background colorsĬSS properties ‘background’ and ‘background-color’ But each method is not equally supported among email clients. 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. There are four places in your HTML that you can add a background color: #CHANGE BACKGROUND MAC EXTENDED CODE#

The safest place to add the background color is on a table or a table cell. The tag is deleted in Yahoo and AOL, so any background color applied there won’t show up in those email clients.

#CHANGE BACKGROUND MAC EXTENDED HOW TO#Īnd placing a color on a wrapping after the body would work everywhere except Outlook clients since they don’t support tags in emails.
