CRASH! Carefully designed emails tend to break into pieces when you send them out to different email clients, like Outlook or Gmail. That might not be your fault.

As you may have heard, different email clients render the CSS of emails differently. Guess what – there are a lot of email clients, and they all render in slightly differnet ways (there are more versions of Outlook than I can shake a stick at). 

The good news is handy cheat sheets are out on the webs to take the guess work out of designing emails. These resources detail which CSS properties work on which clients. Check out this handy table over at MailChimp (thanks, guys!). 

These can be a bit overwhelming and obtuse for lay users, so I’ve outlined what you need to know about common issues when designing highly effective emails for different email clients.

Backgrounds

Man, I wish I could use background images in my email designs! 

Background images can be really useful, especially in the limited space available in an email. For example, you can show a product image behind a large header that entices the reader to learn more about a new feature.

Images are supported by most email clients, but the myriad of Outlook versions has varying support for the background properties of CSS. Luckily, you can simply give the image area a background color behind the image. The color will render in case the image doesn’t. Make it a color that your header will still stand out on, and you’ve got yourself an email that’s prepared for every situation.

Box Model Stuff

The Box Model in CSS refers to the how the code treats 2-D spaces on the web. The Box Model uses several components and styling aspects, but divs are the most used to add stylistic effects.

Divs are the containers that house stuff such as text, images, or other divs. Divs have padding (spacing between the borders of the div and the content) and margins (spacing between the borders of the div and other divs). 

Theoretically, one can specify different attributes for the padding, borders, and margins. For emails, these properties get tricky.

Borders render just fine, but the border-radius tends to not be adjustable. Margins don’t render on Outlook.com, so prepare appropriately if your readers use Outlook online. Drop-shadows (called box-shadows in CSS) are widely unsupported. You’re better off leaving them out of your email designs.

Animated GIFS

Though not actually a CSS property or listed on the cheat sheet above, animated GIFS are a common source of confusion in email design. Exactly which email clients will play them, and what happens if they don’t play? 

Basically, expect them to play in the majority of email clients. The exceptions are some Outlook versions which will only display the first frame of the animation. Go ahead! Use GIFS in your email – just make sure the important stuff like text and CTAs show up on the first frame so all recipients will see it.

Get to Sending

Those are the most common issues that I’ve seen come up as a designer when making emails. If you want more details or are working with other properties that I didn’t mention, simply check a chart that details which CSS properties are supported by which email clients (such as the one mentioned above from MailChimp). Since there are a lot of things listed that you may never need, use (control + F) or (command + F) to search for the properties you want to know more about.

The long list of email clients and their individual rendering quirks will only continue to grow in the near future – standardization is not currently foreseeable. Be sure to check back with the latest lists of quirks, and you’ll steer clear of major email mishaps. And, as always, don’t forget to test your emails before sending!

For more wonderful tips to help you navigate the world of design and digital marketing, subscribe to our blog!