Coding Pixel Perfect Emails [Part 5 – More Responsive Tips]

Wrapping up this series on coding emails, we’ll look at some final layout commands along with other handy code snippets and tools.

Column Shifting Layouts

Two column layouts can work great for a wide desktop display, but when viewing on a small mobile device, converting it to a 1 column stacked design can greatly improve visibility.

Generally a 2 column layout will actually be 3, one of them being a middle spacing column that gets hidden in mobile view:
Add this in the middle column: class="hide"
And this in the header:
@media only screen and (max-width: 480px) {
table[class="hide"], img[class="hide"], td[class="hide"] {display:none !important;}
}

In columns 1 and 3 add this: class="blockcol”
With this in the header:
@media only screen and (max-width: 480px) {
td[class="blockcol"] {display: block;}
}

With these lines of code we force the individual cells to stack when the screen is smaller than 480px. It may be useful to set the width of the newly stacked columns so they are all uniform (300px is a good baseline).

Big Fat Buttons

Similarly, smallish buttons can work well in desktop environments with a mouse to do the clicking, but when it comes to small screens and clumsy fingers a larger button is usually better. Normally in a HTML button, only the text is clickable, wit hthis mobile button the entire button is clickable.

Put this in the header:

.cta {
background:#df8c12;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.ctatext, .ctatext a:link, .ctatext a:visited {
color:#ffffff;
font-family:Helvetica, Arial, sans-serif;
line-height:150%;
font-size:14px;
font-weight:bold;
text-decoration:none;
}

@media only screen and (max-width: 480px) {
table[class=cta] a {display:block !important; padding:20px !important;}
td[class="cta"], table[class="cta"] {width:300px !important; font-size:22px !important; padding:0px !important;}
td[class="ctatext"] a {font-size:30px !important;}
}

And this is what the actual button code would look like:

<table class="cta" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ctatext" align="center"><a href="#">click here »</a></td>
</tr>
</table>


Other Coding Resources:

The great folks at Litmus always have wonderful newsletters and great coding tips as well, their blog is a great resource.

The Mailchimp email template reference site is another great resource for tips and tricks in email coding, it is also very well organized to boot.  Also check out their ever handy css inlining tool.

Email on Acid has another excellent blog, in particular, they like to get into nitty gritty details on individual email client bugs (Lotus notes, I’m looking at you).

Campaign Monitor, I don’t think enough could be said about the great email coding resource that is the campaign monitor site along with their other tools they provide to the email community for free.  Also see their background image tool.