How to use CSS in HTML emails template?

Email is an essential piece of any marketing strategy.

It’s a quick and easy way to reach your audience. It’s also an effective way to build clever and compelling campaigns to communicate with your contacts at all stages during the buyer’s journey. So, it’s no wonder that more than half of marketers say they receive the most ROI from their emails.

However, email campaigns don’t come without their pain points.

Low open rates, poor conversions, and formatting issues can spell doom for even the best-planned email campaigns.

Fortunately, those first two problems may be solved with simply copy changes. But the formatting issues are a different issue if they are caused by your CSS code.

This article will explain how CSS is used, as well as break down some of the problems often associated with implementing CSS in HMTL emails and provide a few possible solutions.

What exactly are Cascading Style Sheets (CSS)?

CSS, or Cascading Style Sheets, essentially act as a design blueprint in your HTML code. It describes how HTML elements, such as the color, headers, tables, photos, etc., will line up and display on the page.

At its core, CSS was designed to make life easier for web developers. Instead of manually adding different commands for fonts, colors, or other design elements beyond a basic layout, all of these elements can be contained in one .CSS file. A designer would just need to update one file in order to make changes throughout an entire website.

Although a major time saver, especially on large and complex websites, CSS can be far less reliable with emails.

Why CSS in HTML emails can cause problems

When you build an email in most of the popular email tools on the market today, you’ll see your finished product as it was intended. It may include Flash elements, tables, or compelling graphics.

However, when that content is opened by readers using their various email providers, they may see something totally different.

The main reason behind these display issues in CSS emails isn’t the code. Rather, it’s the capabilities of the email provider, all of which can differ depending on the version of the email provider you are using.

So, for instance, specific code may call for an image-heavy template. While it might look great on your friend’s Gmail app, you could open the email in Outlook on your desktop and it would appear stripped down with no images.

 

How to be successful with CSS in HTML emails

Just because there can be issues with CSS in HTML emails doesn’t mean you should abandon efforts to use it. It all comes down to determining which codes are absolutely needed and how to style them so they can be rendered by email platforms.

Campaign Monitor has a fairly detailed and helpful list of the most popular CSS commands and which email providers do and do not support each piece of code.

Here are a few options to consider that can keep your email displays impressive without running into CSS issues:

1. Use inline CSS.

If you are set on using CSS, your best bet is to use inline code. This is the most effective and widely used method for including CSS in HTML emails. According to Litmus research, 86% of email designers inline their CSS.

The benefit of using inline CSS is that most email providers will support this style, which means you’re likely to get the best results without running into any formatting trouble. However, since your email developer will have to write extra code in each line for each additional design element beyond basic HTML, it can take extra time to create email templates.

Source: Litmus

There are email template builder tools that can help streamline this development, but that same Litmus research found that nearly 70% of marketers were inlining their CSS by hand, or without any inline builders.

2. Avoid embedded and external CSS in HTML emails.

There are two other CSS options that can be considered in your HTML emails, but these increase the risk of display problems.

• Embedded CSS: This style is becoming more popular with the rise of mobile and responsive emails. Embedded CSS codes are determined in one place of an email, generally in the <head> section as a <style>. Some email servers still strip the information out of this section, which can cause display problems.
• External CSS: This style is used heavily for website development and generally should not be used for emails. With external CSS, developers link to a stylesheet somewhere else on the server. However, these links are mostly blocked by email providers.

It’s best to avoid these two methods if possible.

3. Stay away from background images.

Although it looks nice, an email formatted with a background image does not display anything other than alt text  if it can’t be rendered by the email program.

The result is just a blank screen with broken image icons and a few words of text.

And what’s more, a growing number of email readers are even voluntarily turning off images in their emails to reduce load time and improve email speed. Google recently revealed that 43% of Gmail users actually don’t read emails with background images on.

So, if four out of every 10 people aren’t looking at your background image designs anyway, you can reduce the chances of your images failing to load due to CSS issues for the other six by simply leaving these images out of your emails altogether.

4. See which platforms your audience is using.

Although it’s definitely not a best practice, there are some marketers out there who may not have the time or resources to develop a CSS-friendly email template that works across the board. So, as a result, they might just try to optimize their email so it works for most of their audience.

Apple Mail remains the most popular email service. Roughly 40% of people use it to read their emails. That’s followed by Gmail at around 20%. But that doesn’t mean your contacts are using the same platforms.

For instance, if you are a B2B company that sells data center services, the majority of your customers may read their emails in Outlook on their work desktop. But if you’re a B2C company that sells clothing, you’re probably seeing more customers opening emails on mobile in Gmail.

If you know your audience, you can format your emails so they work in the most popular platforms, and sacrifice the quality that the minority of your audience will see.

It should be repeated that although this is an option, it’s definitely not recommended.

5. Don’t use CSS at all.

If you’re unsure or cautious about sending HTML emails with CSS, there is a simple solution: plain-text emails.

Most of the big email providers (including Gmail and Outlook) already allow users to see a plain-text version of your email if you are using CSS code that is not recognized. But you could take it one step further and just send all of your emails using basic HTML or plain text.

While they do not look flashy and definitely won’t win any design awards, this might be the best way to get your message across. Take a look at this example from Nintendo:

See less