响应式电子邮件模板 - Outlook 2013 突破性布局答案

【问题标题】：Responsive Email Template - Outlook 2013 Breaking Layout响应式电子邮件模板 - Outlook 2013 突破性布局
【发布时间】：2018-01-24 06:24:42
【问题描述】：

此布局仅在 Outlook 中中断。我不记得我是从哪里得到模板的，所以我不能把它归于何处，但我相信它是 Lee Munroe 的模板之一。我不明白为什么它在 Outlook 2013 中出现问题，它是一个简单的单列布局。我有一个更复杂的单列布局，我正在使用相同的框架，而且这个布局完全没有给我带来任何麻烦。但是当我试图将其解析为更简单的布局时，我无法让它与 Outlook 很好地配合使用。有任何想法吗？自学成才的编码器，所以我可能会遗漏一些简单的东西。我知道 Outlook 不能处理最大宽度，但这个模板应该是 Outlook 准备好的。

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>A Message from the CEO</title>
  <style type="text/css">

img {
  border: none;
  -ms-interpolation-mode: bicubic;
  max-width: 100%; }

.img-block {
  display: block; }

body {
  font-family: open sans, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

table {
  border-collapse: separate;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  width: 100%; }
  table td {
    font-family: open sans, sans-serif;
    font-size: 14px;
    vertical-align: top; }

body {
  background-color: #F6F6F6;
  Margin: 0;
  padding: 0; }

.body {
  background-color: #F6F6F6;
  width: 100%; }

.container {
  Margin: 0 auto !important;
  max-width: 600px;
  padding: 30px;
  width: auto !important;
  width: 600px; }

.content {
  box-sizing: border-box;
  display: block;
  Margin: 0 auto;
  max-width: 600px;
  padding: 0px; }

.main {
  background: #FFFFFF;
  border-radius: 3px;
  width: 100%; }

.wrapper {
  box-sizing: border-box;
  padding: 30px; }

.header {
  background-color: #FFFFFF;
  Margin-bottom: 0px;
  Margin-top: 0px;
  padding: 0px 0px 0px 0px;
  width: 100%; }
  .header > table {
    min-width: 100%; }

h1,
h2,
h3,
h4 {
  Margin: 0; }

h1 {
  font-family: open sans, sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  color: #7D1745;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 10px; }

h2 {
  font-family: open sans, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #3C708F;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

h3 {
  font-family: open sans, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #7D1745;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

h4 {
  font-family: open sans, sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #454646;
  text-align: left;
  line-height: 1.4;
  Margin-bottom: 15px; }

ul,
ol {
  font-family: open sans, sans-serif;
  font-size: 1em;
  font-weight: normal;
  color: #454646;
  Margin: 0;
  Margin-bottom: 20px; }
  p li,
  ul li,
  ol li {
    list-style-position: outside;
    Margin-left: 15px;
    padding: 0;
    text-indent: 0; }
ul,
ol {
  Margin-left: 5px;
  padding: 0;
  text-indent: 0; }

a:link {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:hover {
  font-family: open sans, sans-serif;
  color: #56A2CC;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:active {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

a:visited {
  font-family: open sans, sans-serif;
  color: #3C708F;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none; }

.preheader {
  color: transparent;
  display: none;
  height: 0;
  max-height: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  mso-hide: all;
  visibility: hidden;
  width: 0; }

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 24px !important;
    Margin-bottom: 10px !important; }
  h2 {
    font-size: 21px !important;
    Margin-bottom: 10px !important; }
  h3 {
    font-size: 21px !important;
    Margin-bottom: 10px !important; }
  h4 {
    font-size: 18px !important;
    Margin-bottom: 10px !important; }
  p,
  ul,
  ol,
  td,
  span,
  a {
    font-size: 16px !important; }
  .wrapper {
    padding: 10px !important; }
  .content {
    padding: 0 !important; }
  .container {
    padding: 0 !important;
    width: 100% !important; }
  .header {
    Margin-bottom: 10px !important; }
  .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important; }
  .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important; } }

@media all {
  .ExternalClass {
    width: 100%; }
  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {
    line-height: 100%; }
  .apple-link a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important; } }
    </style>

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

</head>
<body class="">
  <table border="0" cellpadding="0" cellspacing="0" class="body">
    <tr>
      <td class="container">
        <div class="content">
        <!-- START CENTERED WHITE CONTAINER -->
        <span class="preheader">Read the latest update from Johnson Financial Group.</span>
        <table class="main" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
          </tr>
          <tr>
            <td class="wrapper">
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
                    <h1>Headline</h1>
                    <p>Content here. Blah blah blah blah.</p>
                    <h2>Subheadline 1</h2>
                    <p>Content here. Blah blah blah blah.</p>
                    <h3>Subheadline 2</h3>
                    <p>Content here. Blah blah blah blah. <a href="https://www.johnsonbank.com/" title="Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank"><strong style="font-weight: 700;">Read More</strong></a></p>
                    <h4>Subheadline 3</h4>
                    <p>Content here. Blah blah blah blah.</p>
                    <p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="wrapper">
              <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center">
                    <img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
                    <div>&nbsp;</div>
                    <a href="https://www.johnsonbank.com/Personal/Banking" title="Personal Banking | Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">BANKING</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.johnsonbank.com/Personal/Wealth" title="Personal Wealth | Johnson Bank" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">WEALTH</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.johnsonbank.com/Personal/Insurance" title="Personal Insurance | Johnson Insurance" style="color: #3C708F; font-size: 1em; font-weight: 700; text-decoration: none;" target="_blank" rel="noopener"><strong style="font-weight: 700;">INSURANCE</strong></a><br />
                    <div>&nbsp;</div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- END CENTERED WHITE CONTAINER -->
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

【问题讨论】：

我有另一个在 Outlook 2013 中运行良好的模板。如果有人想查看它以进行比较，请告诉我。它是由相同的代码库制成的，所以也许这将有助于指出答案。我唯一能想到的就是我错误地组合了表格。

标签： responsive-design html-email fluid-layout hybrid

【解决方案1】：

您的问题远远超出 Outlook 2013。这些问题出现在 Outlook 2007-2016、Windows 10 Mail 和 Android 设备中。

问题存在于<style> 表中。如果您注释掉您的样式表，那么在 Litmus 中测试时一切正常。

<style> 将桌面<table> 的宽度设置为width: 100%;。但是您不希望您的表格为 100%，您希望它们为 600 像素。

table {
  border-collapse: separate;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  /*width: 100%; <-- don't use this */
  width: 600px;
}

浏览您的<style> 表并将width:100%; 值更改为width: 600px;。这包括 @media all，但您可以跳过 @media only screen and (max-width: 600px)，因为这些表值应该是 100% 宽度。

您需要想办法使控制表的宽度为 100%，并在父表中居中放置容器表。

其他问题

您的预览文本不适用于 Android。它出现了，我想你想隐藏它。

Open Sans 永远无法在 Outlook 或 Gmail 中使用，因为它们都不适用于网络字体。您可以将它用于 Apple、IOS、Android、AOL 和其他客户端。我强烈建议您使用这样的样式表链接：

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

将其添加到您的<head>。

按照 Google Fonts 的建议，在您的 Open Sans 样式表中使用它：

font-family: 'Open Sans', Arial, sans-serif;

您应该设置默认的后备字体，当前设置为 sans-serif 以确保使用正确的字体。我建议再添加一种网络安全字体作为后备以保持一致性，因为 Outlook 有恢复为 Times New Roman 的坏习惯，而且您不想要衬线字体。

祝你好运。

编辑：我编辑了这个答案，因为我没有明确说明您可以跳过此媒体查询的编辑值：@media only screen and (max-width: 600px)。

【讨论】：

大部分内容。
这很有趣，因为这正是布局的来源。我没有编辑表格设置或媒体查询。据我所知，容器类应该在媒体查询端处于 100% 的位置，但既然你提到它，它看起来应该在类本身上使用 600 像素进行编码。我不想过多地弄乱模板，所以我把所有这些样式都放在一边了。我会尝试像你提到的那样对 100% 进行调整。
在我看来，作者打算将表格 100% 用于较小的屏幕，但容器应该控制它以用于较大的屏幕：.container { Margin: 0 auto !important;最大宽度：600px；内边距：30px；宽度：自动！重要；宽度：600px； }
@KatrinaNeveri 我确信作者打算让移动设备达到 100%。但是你的代码强制桌面浏览器是 100%。 Outlook 不如现代客户精明。这就是为什么我说更改<style> 表和@media all 以解决桌面客户端问题。我认为您已经对电子邮件开发有足够的了解，可以不理会@media only screen and (max-width: 600px)。
我根本不打算更改仅媒体屏幕和 (max-width: 600px) 项目。这也不是我在评论中所指的。我的意思是，您在上面看到的所有内容都是创建模板的人应用的默认设置。他们似乎与您的建议相反，表格是响应式的，但容器将所有内容控制为 600 像素宽度。从我所见，仅媒体屏幕和（最大宽度：600px）下没有控制表格宽度，除非那是 .container 标记在那里所做的，它是 100%。