![]() ![]() Here’s our background color test using the various methods in Outlook so you can see for yourself: See this test in Litmus → And the use of RGB and RGBA values resulted in the incorrect color, or the color being dropped completely. The bgcolor HTML attribute didn’t fare well in Outlook, with inconsistent support for 3-digit HEX codes. According to, using the background property for anything other than adding a color may result in your color not showing up. 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). ![]() Using the 3 digit hexadecimal color codeĪs far as how to put the background color on your table or table cell, you should use a CSS property.Using the 6 digit hexadecimal color code. ![]() Using the CSS shorthand property background.Using the CSS property background-color.Add color with a CSS property and HEX color codes or RGB valuesīackground colors can be coded in multiple ways: And use table cells for sections of your email so you have greater flexibility in coloring specific content blocks. To get the widest range of email client support, wrap your entire email in a 100% width tag and put your background color there. And placing a color on a wrapping after the body would work everywhere except Outlook clients since they don’t support tags in emails. The tag is deleted in Yahoo and AOL, so any background color applied there won’t show up in those email clients. The safest place to add the background color is on a table or a table cell. There are four places in your HTML that you can add a background color: 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. We all know email clients can be a bit persnickety. 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. How to code a solid HTML email background colorīackground colors can be coded in multiple ways and in multiple places. 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. Background gradients can make compositions appear more dynamic, and even encourage the subscriber to scroll. 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. View this email in Litmus Elevate brand identity To help sections stand apart from each other, different background colors are used. ![]() Promotional emails from coffee house giant Starbucks can be quite lengthy, with multiple promotions housed within a single email. If you’ve got a long email, color is a great way to visually separate different content blocks so it feels more digestible. 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. The bold orange background makes an impact by contrasting against the blue of the logo, elevating the brand identity. You can create an impactful opening experience-like this email from Blurb. 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. 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. Putting a background color strategy into place meets a few needs when it comes to elevating your email program.
0 Comments
Leave a Reply. |