We recently re-designed our automated member registration email and paid particular attention to how its viewed when images are blocked and on mobile devices. Here is an example of how it looks with images, images blocked and on a mobile device:



Styling the Header and Footer

We realize that people are less likely to download images from automated emails so we wanted the header and footer to flow with the design either way. This technique works for most of our targeted email clients so for us, it's well worth the extra effort.

We started with a nested table for the header (carriage returns are removed for IE):

<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center" class="table" border="0">
    <tr>
              <td valign="top" style="color:#FFF; font-size:25px; font-weight:bold; background-color: #73d145; text-align:center; line-height:45px"><div align="center"><img src="http://www.emailonacid.com/emails/response_emails/header.jpg" alt="&nbsp;&nbsp; Email on Acid" usemap="#Map" class="header" style="display:block; color:#FFF; font-size:25px; font-weight:bold; background-color: #73d145; text-align:center; line-height:45px" title="&nbsp;&nbsp; Email on Acid" border="0"/></div></td>
    </tr>
</table>

We intentionally left out the width and height attributes for the image so that the green bar does not render as a grey box in Hotmail/Firefox and Outlook 2007/2010.  We also didn't want to take up too much vertical space for the footer when images are hidden so we used the same treatment for that as well.

Here are the final results:



Styling the Button

We also wanted our "Online Demo" button to render correctly no matter what.  Once again, we started with a nested table and used the background attribute from within it's TD.

<table width="150" cellspacing="3" cellpadding="0" border="0">
    <tr>
              <td width="150" height="35" align="center" background="http://www.emailonacid.com/emails/response_emails/button_back.gif" style="background-repeat:repeat-x; background-position:top left; background-color:#3c96e2; border:1px solid #666666; color:#FFFFFF; font-weight:bold; white-space:nowrap; height:35px;"><a href="http://www.emailonacid.com/email-preview/online_demo/C7" target="_blank" style="color:#FFFFFF; cursor:pointer; font-size:13px; text-align:center; text-decoration:none; vertical-align:baseline; font-weight:bold;"> <span style="padding:10px 10px; color:#FFF">Online Demo&nbsp;&rsaquo;&rsaquo;</span></a></td>
    </tr>
</table>

Here are the final results with images blocked:



Here are the results with images showing:

Creating the Mobile Version

Last but not least, we created a toned down version for our mobile viewers. 

Here is the original email:

Here is that same email for Android and iPhone users:

Here is the media query we used to achieve this affect:

<style type="text/css">
        @media only screen and (max-device-width: 480px) {
            body[style] .hide {display:none;}
            body[style] .header { width:320px; height:34px;}
            body[style] .dripping { width:72px; height:71px;}
            body[style] .footer { width:320px; height:141px;}
            body[style] .table { width:320px;}
            body[style] .headline { font-size: 20px;}
            body[style] .body_style { padding:10px 0 !important;}   
        }
</style>

As you can see, we resized the container tables and each of the header and footer images via CSS.  In this case the CSS trumps all of our preset HTML attributes.  We also adjusted the headline to be a bit smaller and hid some of the "added bonus" items.

In case you were wondering, we used attribute selectors in our media queries to ensure that Yahoo does not render our mobile version.  Click here for more info.

Show more