title: Should this Responsive html email work in Outlook?
body: <p>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.</p>
  
  <p>I found this simple suggestion somewhere:</p>
  
  <pre><code>&lt;!--[if mso]&gt;
   &lt;center&gt;
   &lt;table&gt;&lt;tr&gt;&lt;td width="580"&gt;
  &lt;![endif]--&gt;
   &lt;div style="max-width:580px; margin:0 auto;"&gt;
  
   &lt;p&gt;This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS&lt;/p&gt;
  
   &lt;/div&gt;
  &lt;!--[if mso]&gt;
   &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
   &lt;/center&gt;
  &lt;![endif]--&gt;
  </code></pre>
  
  <p>But I haven't found the claim inside the &lt;p&gt; 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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&amp;gt;&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
          &lt;meta name="format-detection" content="telephone=no"&gt; 
          &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /&gt;
          &lt;title&gt;Test responsive email design&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body bgcolor="#000" style="background-color:#000; color:#FFF; font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;"&gt;
          &lt;![if gte mso 9]&gt;
              &lt;table width="100%"&gt;&lt;tr&gt;&lt;td&gt;
               &lt;center&gt;&lt;table&gt;&lt;tr&gt;&lt;td width="580"&gt;
          &lt;![endif]&gt;
  
          &lt;div style="max-width:580px; margin:0 auto; background-color:#000; color:#FFF;"&gt;
               &lt;img src="http://lorempixel.com/580/200" width="100%" height="auto" align="center" style="width:100%; max-width:580px; height:auto;" /&gt;
               &lt;p&gt;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.&lt;/p&gt;
          &lt;/div&gt;
          &lt;![if gte mso 9]&gt;
              &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
              &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
              &lt;/center&gt;
          &lt;![endif]&gt;
       &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>