Outlook 2010 – Responsive Email Template Using Conditionals and Media Queries
Responsive design is thought of generally as just a technique for websites. People don’t generally think about the role it plays in emails.
But they should.
Designing for email is a different beast. If you thought designing for websites was a pain, then you haven’t had to deal with the different email clients out there that exist.
Some things to know:
— Most mobile clients support media queries, but some do not
— Desktop clients usually filter out more HTML than mobile clients
— Outlook plays by its own rules (it uses the Microsoft Office Engine)
— You generally want to design email using as low-level of HTML as possible
You may need to use conditional tags in emails that have to deal with Outlook.
Here’s a basic, 1 column layout. It’s responsive in the sense that it uses media queries and swaps out / replaces an image depending on the size of the screen.
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
margin:0;
font-size:16px;
}
@media screen and (max-width: 515px) {
#theimage {
display:none !important;
}
#theimage2 {
display:block !important;
width:100% !important;
height:auto !important;
}
.wrapper {
width:100%;
}
p {
padding-left: 20px;
padding-right: 20px;
}
}
</style>
</head>
<body>
<center>
<table class="wrapper" width="512">
<tr>
<td align="left">
<span id="switcher">
<img id="theimage" src="http://example.com/big-image.png" width="512" height="177" alt="Alt Text">
<!--[if !gte mso 9]>-->
<img id="theimage2" src="http://example.com/small-image.png" alt="Alt Text" width="1" height="1" style="display:none;">
<!--<![endif]-->
</span>
<p>This is just a test email</p>
</td>
</tr>
</table>
</center>
</body>
</html>
The design is simple. If the width is 515px or smaller (around the size of the bigger image), then it is swapped for a more mobile-friendly image.
However, Outlook doesn’t support media queries. Nor does it support the inline CSS styling of “display:none” — so you get 2 images showing on the page instead of just 1. And so, as a fallback, you can set the width and height to 1, but NOT to 0, as that will be filtered as well.
More importantly though, you can tell Outlook to ignore the image completely using conditionals.
The following tells Outlook 2007+ to ignore everything within the conditional tags:
<!--[if !gte mso 9]>-->
It isn’t ideal, but it does the job and keeps mobile phones, as well as desktop email clients, happy.
I haven’t tested this template with too many different mobile devices and email clients. I ran a Litmus test, but the trial expired before I could check everything. The screenshots looked good though.
Known Support: iPhone, Samsung Galaxy Note 2 (Android), Outlook 2010
Just a tip, but another good secret: mso-hide:all
Apply it as needed for hiding.
