Workarounds for Common Challenges in Gmail

gmail.pngTaking slightly over 15% of the marketshare, the desktop version of Gmail is the second most used email client as of December 2015. Apple iPhone was the only platform that took more shares at a little over 32%. Gmail also happens to be one of the most restrictive email clients in terms of CSS support. When building HTML emails, if we aspire for a consistent experience across all platforms we must work within the restrictions that Gmail sets on us. Some of these restrictions can be worked around, others cannot. Below are some of the common issues that developers working with Gmail face and how they can be dealt with.

HEAD AND BODY STYLE AND LINK TAGS ARE STRIPPED OUT

Gmail removes styles and link tags associated with head and body tags. What does this mean for you?

Body background colors are removed. Typically in web design we want to set the primary background color in the body so that it spans the whole page without getting cut off. This is something most web developers and email designers take for granted. However, if your audience is reading your message on Gmail, all they will see is a white background.

Workaround: Build your email inside a table and assign a background color to that table.

External stylesheets are not supported. Developers most often use the link element to pull in styles from external CSS stylesheets.

Workaround: Style your html elements with inline CSS. While this process is more cumbersome, it is the only way you are going to apply any styles to your email. Gmail’s restrictions are one of the main reasons why inline CSS is considered standard practice in HTML emails. There are online tools that make this easier by in-lining CSS for you, such as Mailchimp’s excellent CSS Inliner tool.

Custom fonts are not supported. Disabled link tags mean that you cannot pull in custom fonts from external sites, such as Google Fonts. With style tags and @font-face disabled, you cannot upload or host the font yourself if you happen to have the files for it.

Workaround: Unfortunately, there isn’t a true workaround for custom fonts at this point in time. Play it safe and familiarize yourself with web-safe fonts and provide fallback fonts in case the user’s client doesn’t have the font installed.

font-face.jpg

Selectors are disabled. This comes with the territory of style tags getting stripped out. This means we cannot add hover or focus effects. Nor can we use selectors to target child or sibling elements. The universal selector (*) is disabled as well.

Workaround: Inlining-css eliminates much of the need for child and sibling selectors, and inliner tools will do much of the heavy lifting for you. There is no workaround for hover and focus effects, however, so plan your email around a static design.

COMMON CSS ATTRIBUTES ARE DISABLED

Background-size and Background Position. More and more email clients are supporting background images, but that support is limited. This is very much the case in Gmail. Background size and position are not supported. This means your background images will not stretch, and you cannot adjust where in the html element you want it to be oriented.

Workaround: Either use a background pattern that can tile, or better yet steer away from background images altogether, since support across email clients is very inconsistent. A common solution is to have most of your email be comprised of static images where the background is part of the image, and then use a solid background color where you would put your text and borders.

Opacity. There are a lot of neat tricks you can play with using opacity, such as putting your text in a translucent box so you can still see your background, or putting a translucent image over a white or black background to lighten or darken the image.

Workaround: In Gmail, opacity is not an option. In an image based-email, you can incorporate the background as part of the image. For a translucent text box effect, try matching the background color to what it would have been if you overlayed a transparent box over your image in photoshop.

opacity.png

Text-shadow and box shadow. Gmail does not support text-shadow or box shadow effects.

Workaround: Add any text with shadow as a static image, as well as any content that uses box shadow. Alternatively, slice the part of the image that has the shadow and position that part of the image around your content.

text-shadow.png

Border-color and border-image. Not being able to assign a color (or image) to your border almost defeats the point of even having a border. Border support is inconsistent across email clients as well.

Workaround: Divide your border into four parts. The top and bottom borders can be either static images or table cells with a solid background color. For the sides, use narrow table cells with a solid background color. This is an effective way to create a simple (if limited) border effect.

borders.png

Overflow. Setting overflow to scroll or hidden is often an effective way to keep large amounts of content from getting visually unwieldy. Gmail does not provide for this however.

Workaround: Plan your content so that it can is visually appealing if seen all at once. Try to keep your content concise, and direct the user to an external site for more information.

Z-index. Z-index is used to layer html elements on top of one another. This is not an option in Gmail, although most clients do support it.

Workaround: Add any content that needs to be layered as a static image.

List-style-image. List style images allow you to set custom bullet points for your unordered lists. With Gmail, you are stuck with the default bullet types.

Workaround: Add your custom bullet points as static images.

VIDEOS ARE DISABLED

Most email clients do not support video, with the main exception being Apple Mail. This is expected to change with time, but until then videos are not an option for email in general.

Workaround: Use an animated gif if a simple video or animation is desired. For longer videos, use a static screenshot that links to the video when clicked.

cat-animated.gif

RESPONSIVE DESIGN IS NOT SUPPORTED

This is especially an issue for the Gmail app on mobile, but present in the desktop version as well. This means that the design you plan for desktop also needs to work on mobile.

Workaround: While not a true workaround, you can plan your design to look appealing on all platforms. Set your design to be no wider than 800px, and use a font size that will be readable when zoomed out on smaller screens. Plan the same for any image-based text as well.

IN SUMMARY

While Gmail is one of the more restrictive email clients, most of its serious handicaps can be worked around with certain rules in mind:

  • Use static images where CSS styling isn’t supported.
  • Inline all of your CSS.
  • Keep your email designs simple and concise.
  • Plan your designs to be legible when zoomed out on small screens.
  • Tables are your friend. Use them to set backgrounds, positioning, and borders.
  • Use web-safe fonts, and provide fallbacks.
  • Use animated gifs in place of video if animation is needed.

For more information on building an easy, Gmail-safe HTML email, check out our guide here.