CODEWITHSUNDEEP
emailoutlook
Cmaso
Cmaso

Reputation: 1113

Should this Responsive html email work in Outlook?

So I've been doing a lot of reading the past week on how to code responsive email, and have the basics down -- use tables, use inline styles, use percent values for images (width:100%; max-width:Xpx, height:auto), and even the v:rect hack for creating background images in Outlook. The problem remains that Outlook 2007, 10, and 13 do not support "max-width" css, and despite seeing and trying out many online claims to have found a workaround for this, including Zurb Ink, none of my test emails behave responsively in those versions of Outlook. That is, unless tables are given a percent width, they will not collapse beyond a certain viewport width.

I found this simple suggestion somewhere:

<!--[if mso]>
 <center>
 <table><tr><td width="580">
<![endif]-->
 <div style="max-width:580px; margin:0 auto;">

 <p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>

 </div>
<!--[if mso]>
 </td></tr></table>
 </center>
<![endif]-->

But I haven't found the claim inside the <p> tag to be true. In Outlook, the email in Outlook behaves as though it's a fixed width table, and the content within will neither expand nor collapse with the viewport (but outside of Outlook it will do so). I'm wondering if anyone else has had success with this structure, or if there's a sure-fire workaround out there yet for the Outlook max-width problem.

The emails we want to send out aren't complicated -- basically a 1-cell wide table with a max-width of 580px, a header image, and each row containing either text or an image. And sometimes a background-image to cover all or part of the email. Below is my basic code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="format-detection" content="telephone=no"> 
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
        <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
        <title>Test responsive email design</title>
    </head>

    <body bgcolor="#000" style="background-color:#000; color:#FFF; font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;">
        <![if gte mso 9]>
            <table width="100%"><tr><td>
             <center><table><tr><td width="580">
        <![endif]>

        <div style="max-width:580px; margin:0 auto; background-color:#000; color:#FFF;">
             <img src="http://lorempixel.com/580/200" width="100%" height="auto" align="center" style="width:100%; max-width:580px; height:auto;" />
             <p>The image above should never get wider than 580px, and should shrink proportionally when the viewport width is less than 580px. Here is some fluid text that also should never be wider than 580px, and should remain inside the viewport when the viewport width gets smaller than 580px.</p>
        </div>
        <![if gte mso 9]>
            </td></tr></table>
            </td></tr></table>
            </center>
        <![endif]>
     </body>
 </html>

Upvotes: 0

Views: 642

Answers (1)

Cmaso
Cmaso

Reputation: 1113

I've found what may be the problem with the non-responsive display in Outlook. using Zurb Ink, the responsive html works great in all browsers, including IE. But, when I email it to myself in Outlook, the responsiveness is lost. I open the email and there's no responsiveness, and then I click "view in browser", and there's still no responsiveness.

However, this apparently doesn't have to do with the code. The code in the email is untouched. If I view source, then copy and paste into a new html file, and view that file in a browser, the responsiveness is there. If I compare that code with the original html code, there's no difference. The problem is that when I select "View In Browser" in Outlook (2013), the file's url is this: C:\Users\Christophe\AppData\Local\Microsoft\Windows\Temporary Internet Files\Content.Outlook\ZNCZG02D\email (5).mht which of course isn't an html file. Curious if there's a setting in Outlook which will recognize the code as html and render it as an html file instead of an mht file. I'll get back.

Upvotes: 1

Related Questions