Outlook.com and Office 365 have added a little something for images…

As eagle-eyed as we email designers are, with so many email readers to check when doing proof sends (50-plus email clients ticked in our Litmus account at last count!) it’s still easy to miss something…
 

You know how…

.. sometimes things stand out more in some emails than others? Well, we were just testing in Litmus one of the new set of Themed templates we created to accompany the launch of our spanking new Automation section – so far, so normal. As a departure from our usual customer-requested style of email layout, this particular design features a whole bunch of images quite close together, like so:
 
Email looks fine in most email readers
 
Everything was looking good (bar the usual annoying random lines in Outlook 2016 on Windowscome on Microsoft!). Consistent rendering was the norm, and images and text blocks stacked alternately on mobile devices as they were designed to. But then in the Outlook.com and Office 365 email previews, something seemed a bit off. That something turned out to be…
 
Images have gaps under them in Outlook.com and Office 365
 
… relatively small, but none-the-less noticeable, gaps – underneath all the images!
 

Maybe it’s a temporary glitch

You know that initial reaction where you start to doubt your tools, that maybe the email previewer itself was suffering issues at that moment. So we sent a proof email to our live Outlook.com and Office 365 webmail accounts, and on closer (Web) Inspection, what should I find in the code?
 
Outlook.com and Office 365 adds Buttons to images
 
A <button> seems to have been inserted immediately around each image tag, as well as a useful little <div style="display:inline-block;">. But why are they there? Litmus, we should never have doubted you!
 

Bug… or Feature?

As expected, the various email designer forums out there had a multitude of bewildered email designers like myself asking the same question. And like all good bugs it turned out to be due to Microsoft adding a brand new feature – the ability for an Outlook.com and Office 365 user to click on any images that don’t already have a link and view them individually in a kind of slideshow-style viewer. Which is nice.
 
The way they did this was to place that <button> around all non-linked images. This, paired with the <div style="display:inline-block"> around every image, prompted the Lords of CSS to add that space to them all.
 

Good thing email designers are a resourceful lot!

Various ways to counteract this effect were bandied about in the rest of the forum, but with a bit of testing we found that this solution on the Litmus Community Forum by Mark Griffioen of vml.com (no, not that VML) was by far the neatest as it targets both the <div style="display:inline-block"> and the <button>, but in Outlook.com and Office 365 only.
 

You simply need to add the following…

… vendor-specific CSS into the <head> of your email code – inside the <style> tag but outside of any media queries.
 

...
[office365] button, [office365] div {display: block !important}
...

 
This should remove all the gaps whilst preserving the functionality of the buttons, all without affecting the rendering of the email in any email client other than Outlook.com and Office 365. Job done!
 

Noticed any other email client issues?

Got a clever solution or need help finding one? Let us know so we can all carry on the good fight against email tomfoolery!
 
 
@zanethehamster, Tea-quaffing Rodent on Twitter @zanethehamster

Share this post

Tweet this blog    Share this blog
 
Read my other design related blog posts here.