Geek asks and answers

Responsive HTML Email: Forecast

I created an html email template that should be responsive. It works great on different email clients and mobile devices. But in Outlook, it increased to 100%, which is absolutely not cool, since the header has a width of 600 pixels.

I know that Outlook does not support the property max-width. But use only widthmakes the mobile browser display it incorrectly.

So bass that my question is: what should I do / modify the template so that it responds and still displays with a maximum width of 600 pixels?

Here is the code. First, with additional css (better to read), and secondly, with built-in css (which should be used when sending via email). Used by http://beaker.mailchimp.com/inline-css to create it.

 <!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 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 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>

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" 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>
+5
source share
2 answers

Try wrapping the template in a table that is widthset to 100%, with three cells ( TDs) arranged horizontally and the center cell set to width="600"(setting the width using HTML attributes, not CSS). Two cells on both sides are left blank with no width information. This html is the only way to get the behavior max-width.

Example: 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>
+4

, - , HTML2, CSS, . SO :

CSS max-width, HTML-?

CSS Styling Outlook 2010?

Outlook , Outlook:

CSS Outlook?

+1

More articles:


All Articles