Understanding Gmail and CSS: Part 20
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.
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.
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.
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.
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.
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.
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 →</a> </td> </tr> </table> </td> </tr> </table>
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.
Know of any other tips for dealing with Gmail? Let us know!