Understanding Gmail and CSS: Part 1

[ 7 By

Google’s free Gmail service is one of the most popular email services in the world. Marketers and designers frequently find their campaigns breaking in this popular email client, and struggle with how to make their campaigns render consistently. While 80% of Gmail users opt to access their accounts via mobile and desktop email clients, the remaining 20% open emails in the webmail interface, which offers less than stellar support for CSS (Cascading Style Sheets).

In this two-part series, we take a look at everything you need to know about Gmail and CSS:

  1. An overview of CSS support in Gmail and options for styling emails with CSS
  2. A deeper dive into the many CSS quirks associated with Gmail

Styling Email

CSS, or Cascading Style Sheets, are used to add styles and formatting to HTML pages—yes, and emails, too! There are three ways to include styles within an email: using external stylesheets, embedded styles, or inline styles.

External Stylesheets

Web designers will be familiar with external stylesheets, which use a link to load a stylesheet from a server. They’re particularly useful for multi-page sites, where headlines, body copy, link colors, and other formatting options can be controlled by changing a single file rather than individual styles on each page:

<link rel="stylesheet" href="/path/to/style.css" />

Since most webmail clients block links to external stylesheets and Javascript, it is rare to see this method employed in an email.

Embedded Styles

Embedded styles are a bit similar to external styles in that broad categories of formatting options for the entire page (or email) are controlled in a single place. CSS rules that are embedded are declared in a <style> block in an HTML document, normally in the <head> section:

<html>
 <head>
 <meta charset=utf-8>
 <style type="text/css">
 .ReadMsgBody {width: 100%;}
 .ExternalClass {width: 100%;}
 </style>
 </head>
</html>

Embedded styles are useful when you frequently re-use the same style in an email: for example, they can help you avoid declaring the same font color for links over and over. However, embedded styles are not always supported in email—leading to rendering inconsistencies between email clients.

That said, using embedded styles in email has become more popular—and a more accepted practice—due to the rise of mobile and associated popularity of responsive design techniques.

Inline Styles

Inline styles are applied directly to HTML elements in each line of HTML (hence the clever name, in line), like so:

<span style="font-size: 22px; font-family: Arial, sans-serif; color: #222222;" >Hello!</span>

Inline styles are generally the safest way to ensure rendering compatibility across various email clients, programs and devices, but can be time-consuming to write and a bit challenging to manage.

When should I use each type of CSS?

Most email designers use a mix of inline and embedded styles when building email campaigns, as they can serve different purposes. The main structure and styling of your email should be kept inline, as that is the most reliable way to get your email rendering across clients. Embedded styles are normally used when utilizing a CSS “reset” or for CSS rules used in responsive emails.

Understanding the structure of an HTML document, how CSS is used by email designers, and how Gmail handles both is the key to understanding rendering issues in Gmail.

Gmail’s Rocky Relationship with CSS

As a webmail client, Gmail has to take some precautions when displaying an email. Like most webmail clients, Gmail uses a preprocessor to strip any code from an email that could be a security threat or interfere with the rendering of the client interface itself.

Commonly stripped elements include JavaScript, object and embed tags, and Flash. Gmail goes one step further and strips out both the head and body tags, as well as any style tags in an email.

Once an email is run through the preprocessor, it is passed to the app and rendered by the browser. While different browsers can have their own rendering quirks, most issues that designers run into stem from styles that were stripped by Google’s preprocessing.

Solid Styling for Gmail

The quickest way to insure your email campaign renders properly in Gmail is to place your most important styles inline.

A lot of designers, especially those coming from a web-heavy background, prefer to develop emails with CSS in the head of the email. The development process can definitely be quicker using this method, but care should be taken to move styles inline before deploying an email.

“Inlining” styles moves the CSS and associated formatting instructions from the style block in the <head> of your email into the body of the HTML. An inlining tool will look at the styles, classes and ids declared for each element, find those elements in the body, and move the styles accordingly:

td[class="copy"] { 
 font-size: 18px;
 font-family: Arial, sans-serif;
 color: #222222;
}

The end result is something like this:

<td style="font-size: 18px; font-family: Arial, sans-serif; color: #222222;" >Bonjour!</td>

There are a variety of tools for inlining CSS. Both MailChimp and Campaign Monitor offer free online CSS inliners. Premailer is another option. If your emails are generated in the back end of an application, solutions exist for most server side languages and frameworks. Popular options include inliners for PHP, Ruby, Node.js, and C#.

What about responsive styles?

Inlining CSS is great for the general look and feel of an email. But what about handling responsive emails that rely on CSS media queries?

The answer is to keep those styles within the head of your email. Yes, Gmail will strip them out when it runs your email through a preprocessor, but that’s OK. Ideally, all of the structure and styling in an email is inline. Anything in a media query is an enhancement on top of that styling. Even if it is stripped in webmail clients—it doesn’t matter. The styles in the media query aren’t intended to be viewed in a webmail interface—they’re intended for a smartphone or tablet.

In most cases, mobile clients that rely on those media queries and responsive styles will still see and render them properly, but if they are missing in webmail clients, your email will hold up and look great since you took the time to inline your most important styles.

Read part two of our look at Gmail and CSS to get a grip on some of the CSS quirks that you’ll likely encounter when designing for the Gmail web client.

Always Test Campaigns

Gmail can be a tricky client for designers. Understanding how Gmail processes your HTML before and after it hits the inbox is the key to building robust campaigns that display properly. While it’s usually the least of your worries, Gmail is still a popular client that needs to be addressed.

Fortunately, Litmus makes testing in Gmail a breeze. Not a Litmus user? Sign up for a free 7-day trial.

Know of any other tips for dealing with Gmail? Let us know!

Additional Resources

  • Squiggles

    The one think I noticed with gmail is that you cannot use the “hidden” style. I was trying to make content be displayed on a certain part of the page on desktop, then it move below an image on mobile but gmail showed the content in both places. Any way to make this work?

    • Jason Rodriguez

      Unfortunately, along with the “display” property, Gmail lacks support for the “visibility” property, so using visibility:hidden; won’t work.

      Your best bet for hiding content in Gmail would be to declare that content’s width and height zero, then use media queries to expand to the proper dimensions in clients that support it.

      • http://www.elliot-ross.co.uk/ Elliot Ross

        display : none !important works in Gmail, the trouble is, there’s no way to overwrite that !important when it comes to the mobile device/media query.. so close.

      • Joe Garite II

        i’ve been working with a few emails and can’t get this trick to work anymore. can anyone else confirm that it’s no longer working? if so, is there a new workaround?

        • Jason Rodriguez

          Joe, there are a number of discussions about Gmail in the Litmus Community you should check out. If you’re having specific issues, it’s the perfect place to get help.

          https://litmus.com/community/

    • http://www.jonathantyreman.com jonathantyreman

      I will use ‘width: 0;max-height: 0;overflow: hidden;float:left;display: none;’ inline on the element to hide that element on desktop, but then apply a class which is in the mobile media query which states ‘display:block !important; width : auto !important; max-height: inherit !important; overflow : visible !important; float : none !important;’

  • RJ

    Gmail accepts css in the style tag in the head of your document. It just doesn’t accept attribute, class, or id selectors. It also doesn’t accept media queries. However, It does accept element selectors though. The styles are then converted to gmail’s own inline styles.

    try this:
    html
    head

    h1 {
    color: red;
    }

    /head
    body
    BOOOM
    /body
    /html

    you will notice your h1 is red, but your style tag will be missing.