响应式HTML电子邮件:outlook

时间:2013-03-01 15:01:27

标签: html css outlook responsive-design html-email

我制作了一个应该响应的html电子邮件模板。它在不同的电子邮件客户端和移动设备上显示完美。但是在Outlook上它的数量已经达到了100%,这绝对不是很酷,因为标题宽度是600px。

我知道Outlook不支持max-width属性。但仅使用width会导致移动浏览器显示错误。

所以贝司我的问题是:我应该做什么/更改模板以使其响应并仍然以600px的最大宽度显示?

这是代码。首先使用额外的css(应该更好阅读),第二个使用内联css(应该在发送电子邮件时使用)。使用http://beaker.mailchimp.com/inline-css将其呈现为内联。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>
    /* ------------------------------------- 
        GLOBAL 
------------------------------------- */
* { 
    margin:0;
    padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}

img { 
    max-width: 100%; 
}
.collapse {
    margin:0;
    padding:0;
}
body {
    -webkit-font-smoothing:antialiased; 
    -webkit-text-size-adjust:none; 
    width: 100%!important; 
    height: 100%;
    background:#F4F3F4;
}


/* ------------------------------------- 
        ELEMENTS 
------------------------------------- */
a { color: #2BA6CB;}

p.callout {
    padding:15px;
    background-color:#ECF8FF;
    margin-bottom: 15px;
}
.callout a {
    font-weight:bold;
    color: #2BA6CB;
}


/* ------------------------------------- 
        BODY 
------------------------------------- */
table.body-wrap { width: 100%;}


/* ------------------------------------- 
        TYPOGRAPHY 
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
line-height: 1.1; margin-bottom:15px; color:#000;
font-family:Arial, Verdana, "Times New Roman";
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }

h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}

.collapse { margin:0!important;}

p, ul { 
    margin-bottom: 10px; 
    font-weight: normal; 
    font-size:14px; 
    line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}

ul li {
    margin-left:5px;
    list-style-position: inside;
}


/* --------------------------------------------------- 
        RESPONSIVENESS
        Nuke it from orbit. It's the only way to be sure. 
------------------------------------------------------ */

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
    display:block!important;
    max-width:600px!important;
    margin:0 auto!important; /* makes it centered */
    clear:both!important;
    padding:0!important;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
    padding:0 5px 5px 5px;
    max-width:600px;
    margin:0 auto;
    display:block; 
}

/* Let's make sure tables in the content area are 100% wide */
.content table { 
    width: 100%; 
    background:#FFF; 
    border: solid 1px #d9d9d9; 
}


/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }

</style>

</head>

<body>

<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" bgcolor="#F4F3F4">
            <div class="content">
            <p style="color:#666; margin:0; padding:0; font-size:10px;"><a href="{email_url}" style="color:#666; margin:0; padding:0;">Klik hier</a> om deze e-mail online te bekijken.</p>
            <table bgcolor="#FFFFFF" style="text-align:left;">
                <tr>
                    <td>
                        <p><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" /></p>

                        <!-- Callout Panel -->
                        <p class="callout">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! &raquo;</a>
                        </p><!-- /Callout Panel -->
                        <?php if (empty($posts)) { ?>
                            <p style="padding: 15px;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
                        <?php } else { ?>
                        <table cellpadding="5" style="padding: 15px;">
                            <?php foreach ($posts as $post) { setup_postdata($post); ?>
                                <tr>
                                    <td><a href="<?php echo get_permalink(); ?>"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image"></a></td>
                                    <td valign="top">
                                    <a href="<?php echo get_permalink(); ?>"><h3><?php the_title(); ?></h3></a></td>
                                </tr>
                            <?php } ?>
                        </table>
                        <?php } ?>      

                        <br/>
                        <br/>                           

                    </td>
                </tr>
                <tr style="margin:0 15px;">
                    <td align="center" style="border-top: solid 1px #d9d9d9; padding:5px 0;" >
                        <p>
                            <a href="http://twitter.com/Topografie">Twitter</a> |
                            <a href="https://www.facebook.com/TopografieindeKlas">Facebook</a> |
                            <a href="{unsubscription_url}">Geen nieuws e-mails meer ontvangen</a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>

        </td>
        <td></td>
    </tr>
</table><!-- /BODY -->

</body>
</html>

内联CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
<head style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">



</head>

<body style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;background: #F4F3F4;width: 100%;">

<table class="body-wrap" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;width: 100%;">
    <tr style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
        <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;"></td>
        <td class="container" bgcolor="#F4F3F4" style="margin: 0 auto;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;display: block;max-width: 600px;clear: both;">
            <div class="content" style="margin: 0 auto;padding: 0 5px 5px 5px;font-family: Arial, Verdana, &quot;Times New Roman&quot;;max-width: 600px;display: block;">
            <p style="color: #666;margin: 0;padding: 0;font-size: 10px;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><a href="{email_url}" style="color: #666;margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">Klik hier</a> om deze e-mail online te bekijken.</p>
            <table bgcolor="#FFFFFF" style="text-align: left;margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
                <tr style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                    <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                        <p style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;max-width: 100%;"></p>

                        <!-- Callout Panel -->
                        <p class="callout" style="margin: 0;padding: 15px;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 15px;font-weight: normal;font-size: 14px;line-height: 1.6;background-color: #ECF8FF;">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;font-weight: bold;">Do it Now! &raquo;</a>
                        </p><!-- /Callout Panel -->
                        <?php if (empty($posts)) { ?>
                            <p style="padding: 15px;margin: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
                        <?php } else { ?>
                        <table cellpadding="5" style="padding: 15px;margin: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
                            <?php foreach ($posts as $post) { setup_postdata($post); ?>
                                <tr style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                                    <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;"><a href="&lt;?php echo get_permalink(); ?&gt;" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;"><img width="75" src="&lt;?php echo newsletter_get_post_image($post-&gt;ID); ?&gt;" alt="image" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;max-width: 100%;"></a></td>
                                    <td valign="top" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                                    <a href="&lt;?php echo get_permalink(); ?&gt;" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;"><h3 style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 27px;"><?php the_title(); ?></h3></a></td>
                                </tr>
                            <?php } ?>
                        </table>
                        <?php } ?>      

                        <br style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                        <br style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">                         

                    </td>
                </tr>
                <tr style="margin: 0 15px;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                    <td align="center" style="border-top: solid 1px #d9d9d9;padding: 5px 0;margin: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                        <p style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">
                            <a href="http://twitter.com/Topografie" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;">Twitter</a> |
                            <a href="https://www.facebook.com/TopografieindeKlas" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;">Facebook</a> |
                            <a href="{unsubscription_url}" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;">Geen nieuws e-mails meer ontvangen</a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>

        </td>
        <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;"></td>
    </tr>
</table><!-- /BODY -->

</body>
</html>

2 个答案:

答案 0 :(得分:5)

尝试将模板包装在width设置为100%的表格中,其中三个单元格(TD s)水平排列,中心单元格设置为width="600"(设置宽度)使用HTML属性,而不是CSS)。两边的两个单元格都没有任何宽度信息。这是获取max-width行为的仅限html方式。

示例:http://jsfiddle.net/YcwM7/

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">This cell should be a maximum width of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

答案 1 :(得分:1)

对此有几个问题,对于最佳跨客户端结果的一般共识是在没有真正依赖CSS的情况下限制自己使用HTML2来处理电子邮件样式。以下链接均回答过去的问题:

Is there an equivalent of CSS max-width that works in HTML emails?

CSS Styling won't work in outlook 2010?

但是,Outlook确实有自己的条件语句,因此您可以为Outlook创建一组单独的样式规则:

Is there a conditional CSS If for outlook?