When designing nice modern HTML emails keep in mind that the support for CSS in email clients is much more limited than in browsers. This is especially true in the Outlook for Windows. Even in the version 2016, it doesn’t support many common CSS styles.
I’ll show you a small example. This is an email from Amazon Developer. Let’s say we want to make the same header:
So we have a box with an image on the left, some text on the right, some border styling at the bottom. Also, notice the gradient on the top and the bottom border – that’s an optical illusion by the way. The border color is unchanged, the gradient is in the box’s background
This is an implementation in CSS that most probably will work well in your browser:
Open link. It should look pretty similar to the image.
Let’s dive into the source:
<div class="mail">
<div class="wrapper" style="border-bottom:4px solid #000111; width:640px; margin: 0 auto;">
<div class="amzn" style="height:75px; background-image:url('https://ruslanbes.com/devblog/rbes-content/uploads/2017/10/amzn_bg.jpg'); border-top:3px solid #474F57; border-bottom:3px solid #474F57;">
<div class="logo" style="width:150px; margin-left:20px; margin-top:20px; float:left;">
<img class="amzn_logo" style="width:150px;" src="https://ruslanbes.com/devblog/rbes-content/uploads/2017/10/amzn_logo.png" alt="Amazon developer">
</div>
<div class="contact" style="font-family:'Helvetica Neue',helvetica,Arial,sans-serif; font-size: 13px; color:white; float:right; margin-right:20px;margin-top:30px;">
<span class="contact_us" style="padding-right: 8px; margin-right: 8px; border-right: 1px solid white;">Contact Us</span><span class="support">Support</span>
</div>
</div>
</div>
</div>
wrapper div sets positioning and the black border on the bottom.
amzn div sets the inner rectangle. It also takes the background gradient and the borders.
Inside it, we have two divs with floating.
The right div is split into two spans. The vertical separator, | is implemented as a border between the spans. We could use the pipe character itself but then it’ll render depending on the system fonts. The border is agnostic to that.
Notice that all styles are inline. That’s the first thing to keep in mind – inline styles have less chance being corrupted by an email client
Let’s send this email to the Gmail account:
And same Email to Outlook:
Yep, that’s it. Outlook for Windows doesn’t support background-image.
But that’s not fair, let’s replace it with background-color. Maybe everything else is fine?
Nah, not really.
I won’t go into details of how to fix this email. But the basic approach should be to use <table> and <td> for blocks. Use cellspacing and cellpadding for positioning and use a pipe symbol. I don’t know a solution for background image.
To summarize:
- Background image is gone
- Logo is unscaled
- Floating is ignored
- Using borders for the pipe char didn’t work
- Margins and padding are completely wrong
- Bottom borders are wrong
Also, Outlook adds some of its own CSS classes, renames your classes or removes them completely. It seems it does it as an optimization step if it sees that the class doesn’t have any supported styles.
Interestingly if you try Outlook for Mac it will work much better.
Lessons learned
- When designing an email template, pay attention to how complex the email is. Keep in mind, you mostly have to use simple CSS. Colors are not a problem, positioning is a challenge.
- Check the resources about CSS compatibility in emails
- Testing in Outlook
The easiest way is to save an email as an HTML file and open in Microsoft Word, change something and save. Word seem to use the same engineAnother way – open the email in Chrome, copy to Gmail (this will copy the HTML) and send to your Outlook account- Update: Use Litmus. It allows testing in most popular email clients