Edinburgh Web Development

Responsive email & Outlook

4 steps to work with Microsoft Outlook

by Iain Wilson

24 July 2015

These days responsive web pages are the norm.  

It's pretty reasonable for people to think of extending responsive concepts to emails, so that it doesn't matter what device is used to view the email, it will be viewable without needing to scroll horizontally or pinch and zoom.

Email software has traditionally only provided a sub-set of HTML and CSS command support, so there has always been a need for special expertise when constructing emails for email marketing.  

In particular, Microsoft Outlook has always been, shall we say, challenging.  It is built with the Microsoft Word HTML rendering engine - anyone who has pasted content from Word into a webpage will have some idea of the quirks that it presents.

When it comes to responsive emails, Outlook is not going to make the prize list.  It just can't handle key things like fluid width images and CSS commands like max-width, display and media enquiries.  Responsive it is not.  But ignore it, and you will be ignoring around 20% of email users (maybe more/less depending on your client base).

So what's a web developer to do?

Here are 4 steps that will allow you to build emails that will work in Outlook and be responsive elsewhere.

1. Build for pseudo max-width

We can't use max-width containers because Outlook doesn't support max-width, but there is a way to build for max-width without using CSS.  Using tables we can emulate a max-width setting of 600px with a central table cell like this:  

<table border="0" cellspacing="0" width="100%">
        <td width="600">
             ......email code here....

Outlook (and any other email client) will shrink the email if it is viewed with a viewport less than 600px.  This is fine - UNLESS you're using images.

2. Images

If you're using images in your email, Outlook just won't resize them dynamically if the viewing window size is changed, no matter what your CSS or width attributes try to do.  

It will always show them at their fixed actual size.  

Yes, this totally sucks, but that is the way it currently works - no doubt at some point in the future, Microsoft will fix this but right now, you're stuck.

So you have to build your email on the assumption that the image dimensions will always be fixed size.

Also remember, you can't float images in Outlook - CSS float attributes are ignored.  Workaround is to use the align attribute instead.

3. Get the email working in Outlook

Bearing in mind the previous information, get your email working in Outlook first.  

To save you from sending hundreds of test emails, you can put some CSS into your email HTML to emulate the Outlook behaviour in your testing browser :-

img {
  width: auto !important;
  max-width: none !important;

Remember to take this out when you actually start sending emails!

4. Build in the responsive code

Once you've got the email working in Outlook testing mode, you can start putting in the responsive CSS/HTML that will work in other email clients. Max-widths, percentage widths for images, even media enquiries. 

Try it out on your browser (remember to remove the Outlook emulation CSS).  Once you've got it working there, try test emails through your email marketing system of choice to a selection of devices.

It's always going to be a matter of trial and error, but if you follow these steps you'll get there eventually!

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy