The Best Way to Code Background Colors for HTML Email

Justine Jordan — Wed, 01 Feb 2012 01:36:03 +0000

Ever get so frustrated with coding HTML email that you start seeing red? In the past couple weeks we’ve heard from a handful of red-eyed users reporting Gmail tests that are seeing black by showing up in inboxes with a black background (when that wasn’t your intended result!)

After digging into some testing, I realized that this issue isn’t limited to Gmail—in fact it affects a number of different clients depending on how you apply background colors in your code. As with anything HTML email related, this can be super frustrating since standard web code won’t always work the way you anticipate when sent to an email client.

Read on to get the scoop and find the one fail safe way to code background colors for consistent results across the board.

How to code a background color? Let me count the ways…

Usually, background colors are applied to a few common HTML elements:

and . Depending on your experience and coding style, you might use one of six (yes, six) different ways to apply background colors to elements in your email:

Using the HTML bgcolor attribute with a 3-digit hexadecimal color code
Using the HTML bgcolor attribute with a 6-digit hexadecimal color code
Using the HTML bgcolor attribute with an RGB color value
Using the background-color CSS property with a 3-digit hexadecimal color code
Using the background-color CSS property with a 6-digit hexadecimal color code
Using the background-color CSS property with an RGB color value

Since we’re talking about HTML email here, I’m going to skip over any discussion of the pros, cons or merits to each method. Suffice to say there are a lot of variables here!

Three digit HEX codes in email

I discovered right away that using 3-digit, or shorthand, HEX colors are not a great idea. When 3-digit HEX codes are used in

and

tags, black (or sometimes blue!) backgrounds result, with no regard to the color specified:

RGB values in email

RGB values didn’t fare much better, resulting in a few lovely shades of green (despite specifying values for white and gray):

In some cases, RGB values used with the HTML bgcolor attribute didn’t show up at all.

The best way to code a background color

After all the tests were completed, the verdict was in. The most reliable way of coding background colors is to use the HTML bgcolor attribute with a 6-digit HEX code:

Of course, there are dozens of factors involved. Depending on the specific breakdown of the mail clients your audience is using, CSS background-color with a 6-digit HEX code is very reliable as well. The HTML bgcolor attribute simply has the best support across the board. While some methods work consistently in certain elements, I’d personally prefer to stick to one background color strategy rather than trying to keep specific background color quirks straight. For simplicity, old school HTML and 6-digit HEX codes are where it’s at.

Testing methodology

I ran the tests used as the basis for this article using Firefox 10, Chrome 16 and Internet Explorer 9 (both PC and Mac where appropriate). I manually checked Gmail (both old and new UI versions), Hotmail, AOL and Yahoo, and used Litmus’ Email Previews to check rendering on desktop and mobile email clients.

Tools for understanding your audience and testing display quirks

You can run your own tests to check rendering and display in 30+ email clients in just a few minutes with Email Previews from Litmus. Before testing, be sure you know which clients your subscribers use most often by running Email Analytics on your next campaign.

New Gmail UI & IE8 for Webmail Testing

Justine Jordan — Tue, 17 Jan 2012 17:51:12 +0000

As always, there’s cool stuff happening here at Litmus. Recently, we made a few updates that reflect changes around the interwebs.

New Gmail UI

Gmail announced a significant overhaul to their User Interface late last year, and have recently upgraded all accounts to the new look. We’ve also followed suit, enabling the new look in all our Gmail screenshots.

New Gmail UI

Old Gmail UI

At the Official Gmail Blog, there is a wealth of insight into Gmail’s new look, including some behind-the-scenes info designing and testing the new UI. It’s worth a read if you’re into responsive design, UX and development.

IE8 for All Webmail Tests

One of the best parts about using Litmus for email testing is that we include screenshots of how your email looks in both Internet Explorer and Firefox. That’s because there can be differences in rendering for webmail clients like Gmail, Hotmail, Yahoo! and AOL, depending on the browser your subscribers are using to check their mail. We’ve recently updated all IE webmail tests to run on Internet Explorer 8.

We hope you enjoy these changes and find them useful!

Are Tablets Taking Over?

Justine Jordan — Tue, 10 Jan 2012 20:54:14 +0000

When Apple launched the iPad in 2010, it was a huge success. Without many comparable competitors, the iPad enjoyed a large slice of market share for many months. Recently, the tablet market has widened a bit with the release of Amazon’s new Kindle Fire: analysts are seeing a drop in Apple’s share of the tablet market.

In a study from September last year, ComScore found that 75% of tablet owners accessed email on their device that month and 35% read email almost every day. Blackberry also announced support for email on its PlayBook tablet just today. The email app will incorporate feeds from social media sties such as Twitter and LinkedIn, creating a “social hub.” As more low-cost tablets enter the market, I’m eager to see how email behavior is shaped by tablet ownership and apps that further blur the lines between messaging sources.

Click on the graphic below for an enlarged view:

More resources

Read more from the sources used for this infograph:

ComScore’s Digital Omnivores: How Tablets, Smartphones and Connected Devices are Changing U.S. Digital Media Consumption Habits

How people really use the iPad: A survey from Business Insider

Nielsen: Changing Demographics of Tablet and eReader Owners in the US

Introducing Justin

Justine Jordan — Thu, 05 Jan 2012 22:22:37 +0000

We’re excited to start 2012 and introduce you to Justin Fyles, the newest member of the Litmus team!

Meet Justin, Senior Developer

A New England native, Justin grew up in Portsmouth, New Hampshire before heading to Worcester Polytechnic Institute for college. After graduation, he spent 2.5 years working as a software engineer on internal marketing applications. Justin joins Brendan and Florin as the 3rd developer coding behind the scenes at Litmus, and he’ll be working on some exciting new features that will help you preview and troubleshoot campaigns like never before.

We can already tell that Justin’s going to fit right in. He loves music (even plays guitar), seeing live shows, and skiing—he claims he was on the slopes as soon as he could walk! And following Matt’s lead, he also has some unique pet peeves: an aversion toward breakfast foods and shampoo bottles with price tags on them.

Welcome, Justin!

Graymail Features Roll Out to Hotmail Users

Justine Jordan — Wed, 21 Dec 2011 21:40:25 +0000

After announcing their “graymail” initiative in October this year, Hotmail started implementing changes and new features in customers’ inboxes last week. Here’s a quick rundown of some of the things you can expect to see in your Hotmail account.

Persistent Flags

I received an email from Hotmail on 12/16 that contained an overview of the new flagging behaviors in my inbox. Rather than getting lost in the shuffle, flagged messages remain “on top” even as newer emails arrive in my Hotmail account. I find this feature pretty handy as I usually flag To Do items in my inbox:

Categorization

I noticed that some bulk emails were automatically categorized as “Newsletter” although they are not being moved from my inbox. I could choose to view all messages of a particular category, however:

In addition to the Newsletter category, there are also categories for Bills, Family, Groups, Important, Office docs, Photos, Shipping Updates, Shopping, Social updates and Travel. Facebook and Twitter notifications were automatically classified as Social updates but remained in my inbox unless I moved them on my own or ran a cleanup operation.

Schedule Cleanup

Schedule cleanup is perhaps the most innovative of all the features to roll out. This allows you to easily set up new rules on your account, and efficiently cleans up old messages from your inbox. After selecting a newsletter from my inbox and selecting Schedule cleanup from the Sweep menu, I had options to keep only the most recent message, delete old messages or move old messages to a new or existing folder:

Users should be aware that the use of Schedule cleanup also creates a new rule that runs the cleanup operation selected on an ongoing basis:

If you’d like to modify rules, you’ll need to delete the rule and add it again through the Sweep menu. Rules can be deleted by choosing “Manage rules” from the Sweep menu, or by selecting one of the messages from that sender and choosing Schedule cleanup again, where you’ll have the option to stop cleaning up that sender’s messages.

The Impact

From what I can tell, persistent flags are the only feature that has been automatically enabled by Hotmail. Sweep and Schedule cleanup require action on behalf of the user before messages are moved. While some types of communications are assigned suggested categories, they remain in the inbox as usual. Hotmail also mentions the launch of One-Click Unsubscribe in their blog post, although none of the newsletters or bulk emails in my Hotmail account had this option under the Sweep menu. This may explain why only flagging was covered in the email sent out by the Hotmail team.

Schedule cleanup has the most potential to be game-changing for marketers, as consumers can automate the removal of older messages from their inbox. At a minimum, the latest (most recent) message from a sender will remain in the user’s inbox. It’s also important to note that Hotmail is not automatically filtering messages. Rather, users must initiate cleanup actions. In contrast to some other email filtering tools, cleanup actions and their associated rules are not diverting new messages from the inbox. Schedule cleanup appears to give users a unique way to keep older messages organized and their inbox under control.

Only time will tell how users will adopt these new features and create rules to automate cleanup actions!

Graymail Discussion

Since Hotmail is one of the largest free webmail providers in the world, you can expect that a new feature rollout might generate some discussion. Anxiety from marketers on the potential impact these changes might mean for their email programs is chief among the concerns.

An update from Hotmail on some of the new graymail-fighting features: Ten new reasons to love Hotmail
A marketer plans to segment Hotmail users to see how response rates change, a Forrester analyst weighs in, and an ESP gives some advice in this article from Direct Marketing News: New Hotmail inbox tools make it easier for users to hide marketing newsletters
Deliverability experts at Word to the Wise say marketers must “Adapt or Die” to consumer-driven changes at Hotmail: Email Marketing of the Future
Editor and journalist Ken Magill believes that marketers should send people messages they want: Hotmail Changes Cause a Ruckus … Or So I’m Told

Infographic

You may find our comprehensive infographic on graymail useful as you evaluate your marketing efforts or perhaps your own Hotmail account!

Facebook Messages Are Dead

Justine Jordan — Thu, 15 Dec 2011 21:39:42 +0000

At least when it comes to sending email.

Last November, Facebook introduced it’s new “Social Inbox” messaging system, which included the option to have messages sent to your Facebook account through your very own @facebook.com email address. Shortly after that announcement, we started tracking emails opened using Facebook messages with our Email Analytics technology.

So how many emails are being opened using Facebook’s messaging platform? Not very many. In fact, it’s so few that measuring it all seems a bit silly: usage peaked in November last year at 0.0000688% of total opens we tracked that month—perhaps from curious early adopters wanting to try it out. The chart below details the trend over the last year:

You might argue that they were never “alive” to begin with. The folks at Emailvision have seen similarly low usage rates (with less than 0.0015% of all emails using an @facebook.com email address) and assert that the poor user experience is much to blame. I concur. In our explorations last year, I didn’t see any compelling reasons to make a switch over to Facebook for my primary messaging needs. True Facebook messages (sent from one user to another without using an @facebook.com address) are a great way to send quick, casual communications to friends. However, they lack a comprehensive organizational system and have mixed support for HTML and CSS, leaving much room for improvement as a true way to send and receive email messages.

It also seems as though many Facebook users simply didn’t get the memo regarding the launch. In a recent article from Slate, readers and staff alike realized only recently that Facebook has been hiding away messages from non-friends into the “Other” folder.

Rest in peace, Facebook email messages.

A New Look for Email Client Selection

Justine Jordan — Tue, 13 Dec 2011 20:27:27 +0000

If you’ve run a new test using Email Previews recently, you might have noticed a few changes. Today we launched a new email test selection screen that includes more information and a better experience when selecting which components you’d like to be included in your test:

Here are some of the changes and improvements you’ll notice:

Platform details, operating systems and device names have been added for clarity
Color blindness filter and plain text versions now appear separately from desktop clients (under the “also include” section)
The selections you’ve chosen will be saved as your default clients for the next time you test (or when using a static email address to submit tests)
For applicable subscriptions and price plans, the option to include a detailed spam filter analysis can be selected in the “also include” section

These changes are live and available in all accounts. This is just Phase 1 of our plans to make email testing more intuitive and helpful on Litmus, and we hope you enjoy these improvements! Of course, we’re eager to hear your feedback as well.

Top Tweets and Takeaways from #MPEIS

Justine Jordan — Tue, 06 Dec 2011 22:38:55 +0000

For the last two days I’ve been eyeballs deep in great conversations regarding the latest and greatest in email marketing tools, trends and ideas at the Email Insider Summit.

This morning kicked off with a great presentation by Matt Caldwell, a true industry veteran with more than 10 years of experience designing specifically for email. Matt spoke about using appreciation, intrigue and amusement in email content and design to drive surprising performance in clicks, opens and revenue. Soon after I joined Alex Williams and Wacarra Yeomans to discuss what’s happening with mobile email these days. We wanted to go a bit beyond approaches for designing mobile-friendly email and take a look at some of the darker corners of optimizing the email experience for the mobile world.

It’s easy to get overwhelmed by all the content being presented! Since there were many folks tweeting bits and bites of the sessions, I collected some of the best takeways and tweets into a Storify stream (click to see dozens of takeaway tweets):

Watch presentation recordings

You can also watch recordings of both the panel discussion and Matt’s presentation over at Ustream:

Panel: Beyond the Device

Email Creative Makeovers

Tips in your inbox!

Get all the latest tips on mobile email and email creative from Litmus when you subscribe to our email updates!

Accessibility Challenges in Email Design

Justine Jordan — Mon, 28 Nov 2011 18:46:52 +0000

Email has a bad habit of being a rule-breaker, making it tough to translate best practices for the web into an email-friendly format. Resources intended to improve or enhance a user’s experience on the web don’t always work as anticipated when tables and inline CSS are almost certainly a requirement. Since usability and accessibility principles strive to make the web usable by everyone, including those with disabilities, it’s important that those principles apply to email as well.

Below we’ve outlined the most common types of disabilities amongst Americans along with eight email-friendly principles to ensure your messages are usable by all. You also might consider using Email Previews to understand how your email will display to users on different platforms. Email Previews include access to our color blindness filter, which allows you to simulate what a person with red-green color blindness might see when viewing your message.

Click on the graphic below for an enlarged view.

Webinar: Email + Mobile

Paul Farnell — Thu, 17 Nov 2011 20:29:51 +0000

Earlier this week hundreds of people joined Justine Jordan and Chris Studabaker for our Email + Mobile webinar. You know you have subscribers reading your emails on their mobile devices, now here’s what to do about it. Chris and Justine go into a ton of detail on suggested design approaches for mobile email. You won’t want to miss this one.

Below you can watch the full hour-long webinar recording. You can also view the slides on SlideShare.

If you’d prefer, you can download the webinar in Quicktime format.

Litmus

The Best Way to Code Background Colors for HTML Email

How to code a background color? Let me count the ways…

Three digit HEX codes in email

RGB values in email

The best way to code a background color

Testing methodology

Tools for understanding your audience and testing display quirks

New Gmail UI & IE8 for Webmail Testing

New Gmail UI

IE8 for All Webmail Tests

Are Tablets Taking Over?

More resources

Introducing Justin

Meet Justin, Senior Developer

Graymail Features Roll Out to Hotmail Users

Persistent Flags

Categorization

Schedule Cleanup

The Impact

Graymail Discussion

Infographic

Facebook Messages Are Dead

A New Look for Email Client Selection

Top Tweets and Takeaways from #MPEIS

Watch presentation recordings

More takeaway articles from the conference:

Tips in your inbox!

Accessibility Challenges in Email Design

Webinar: Email + Mobile