Understanding Gmail and CSS: Part 2

[ 4 By

In part one of our series on Gmail and CSS, we took a look at how Gmail’s preprocessor strips the head section and style tags out of emails before rendering it in the browser. While this preprocessing is often the main problem with Gmail for designers, a number of other issues can occur when emails are displayed in Google’s webmail client.

This article will dive into some of the challenges that designers grapple with when their campaigns are viewed in Gmail.

Gmail and Images

Until recently, the first thing many designers noticed was that Gmail blocked images by default. Users could choose to always display images from a sender, but most users wouldn’t see any images without manually enabling them. To combat this, designers were encouraged to use ALT text to convey messages even when images were disabled.

Gmail Hates Images

A recent update to how Gmail caches and displays images has led to a complete policy flip. Now, images will be displayed by default and users will have the option to disable them for new messages.

disableimages

Designers are still encouraged to use ALT text, as some clients outside of Gmail still disable images, such as Outlook and some Android clients. Using ALT text is also a fantastic way to instill trust in your brand by providing information to users with images disabled or by hiding a fun easter egg for readers to find.

There is a lot you can do with ALT text. Check out our guide to styled ALT text to see how far you can take things.

Spacing Between Images

While blocked images may no longer be an issue, Gmail sometimes displays gaps underneath images in emails — leading to a broken layout.

yahoo_broken

These gaps can be especially apparent in designs where the layout consists of several images sliced apart and pieced back together in a table-based design. Fortunately, there’s an easy fix for this all-too-common problem.

CSS Quirks

Apart from issues with images, Gmail has a number of known CSS quirks related to properties that are not supported.

Box Model and CSS Positioning Support

While Gmail has robust support for the box-model, allowing designers to structure content using padding, margins, width, and height, it has little support for positioning elements with CSS. Floats and clears work as expected but positioning with the top, right, bottom, and left CSS properties do not. Most designers don’t rely on these properties much due to varying support across clients, but those that do should be aware of Gmail’s lack of support for them.

Using the Display Property

A popular technique among designers is using the CSS display property to show and hide content. Coupled with media queries, this is a great technique for optimizing emails for different devices. The ability to selectively show and hide device-specific content based on media query expressions is a powerful tool.

hiding-images

However, Gmail does not support the display property, leading to issues for many designers that may be using the property to hide content meant for a mobile audience on the desktop. Care should be taken to make sure your content works across devices and that you are selectively hiding content on mobile instead of desktop.

CSS3 Properties

Designers will be pleased to know that they can reliably achieve rounded corners using border-radius.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" style="padding: 25px 0 0 0;" class="padding2" colspan="2">
      <table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
        <tr>
          <td bgcolor="#d75742" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center">
            <a href="url" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Learn More &rarr;</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

rounded-corners

Unfortunately, other CSS3 properties like text-shadow and box-shadow are not supported.

Web Fonts in Gmail

Finally, despite have a wildly popular web fonts service, Gmail does not support the use of the @font-face property. Designers that use web fonts in emails should carefully consider their font-stack, as their backup fonts will be rendered in Gmail. Our recent webinar with Paul Airy will help you make informed typography choices.

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

  • Mike Ragan

    Great articles Jason, especially like the bit about hiding an easter egg in a mailing :)

    What I find most frustrating is the Gmail app’s refusal to recognise media queries. It’s becoming the most challenging mail client to code for, even more so than MS Outlook! At least MS Outlook has the decency to accept conditional statements to let us fashion some sort of work around for it. Gmail’s point-blank stubbornness to ignore media queries amongst all the other things in this “modern mobile age” is quite… umm… annoying.

    As ever, there are ways around it with hybrid coding and not relying solely upon media queries to trigger a layout change, but it adds an extra layer of complexity and fragility to the code which can be a cause of pain down the line… especially as Gmail is so unforgiving in the first place!

    • Mark Robbins

      I agree. Gmail is becoming a real pain (although I think Outlook still has the edge).

      What gets me is how good the support in Android is. It feels like a mixed message from Google. If CSS is so dangerous for Gmail users why do Android users get such great support?

      I know it’s not a direct comparison but on my phone the apps look identical it’s only the colour of the icon and rendering of the emails that changes.

      • http://www.litmus.com Justine, Litmus

        It’s definitely strange that two different email clients on the same device—both built by Google—render emails so differently. Maybe one day they’ll tell us…

  • Cameron Adams

    Actually, webfonts *are* supported in Gmail. I’m looking at one right now.