Source Code

Coding Email Templates for Responsive Design: Part 1

  |  December 23, 2013   |  Comments

Columnist Dave Hendricks and co-author Graham Gnall share practical, how-to guidance on coding email templates for responsive design in the first of this series.

This column was co-authored by Graham Gnall of Live Intent.

In an increasingly mobile world, populated by email users who routinely swap between devices as often as they blink, adapting your email code to be responsive and render beautifully on any client or device may no longer be a matter of preference, but rather of survival.

I've eschewed opinions in favor of high-level, practical how-to facts for today's article: How to code your email templates for responsive design.

Pre-Design Settings

Before getting into the actual structure of the email, you'll need to declare some information in the head section. Below is a head section that's become something of an industry standard. Reuse this in your templates for maximum compatibility:

< !DOCTYPE html PUBLIC "-//W3C//
DTD XHTML 1.0 Transitional//EN"
"http://w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
< html xmlns="http://www.w3.org/1999.
xhtml">
< head>
< meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
< meta name="viewport"
content="width=device-width, initialscale=
1.0" />
< /head>

When moving your code between an HTML editor and your ESP (and especially vice versa), be sure to first paste it into a plain text document, copy it again, then paste it into its destination. This will safeguard against picking up encoding outside of the character set you'll be using.

Template Size

A single column layout with a maximum width of 600-650 pixels will render well on all devices and lends nicely to responsive design elements like font size and table width. This is the cleanest and most reliable way to
design for all devices at once.

Tables

The most fundamental aspect of designing email is an emphasis on nested tables. This technique may seem ancient to web designers, but is a stalwart necessity in email.

Container Table and Background

Set up a container table with 100 percent width and place a cell within it, also with 100 percent width. Setting a bgcolor here will set a background color for your email. Choose a color that nicely contrasts with the background color of your content.

< table align="center" border="0"
cellpadding="0" cellspacing="0"
width="100%" style="border-collapse:
collapse;">
< td align="center"
bgcolor="#aaaaaa" border="0">
Place your content in here
< /td>
< /table>

If you are using a single format for both mobile and desktop openers, 600 pixels is standard; it looks good on a desktop and will fit the shape of a smartphone. Most smartphones will automatically zoom to fit the content to your screen.

Your content container tables should have pixel-based widths, while all nested tables should be percentage based. This will allow them to stretch and shrink along with the container tables and will work well with responsive designs. Change the width value of your container table and you will see this taking place.

Assign a class name to your container table. This will set you up to layer on media queries and screen size-based rules later.

< table align="center" border="0"
cellpadding="0" cellspacing="0"
width="100%" style="border-collapse:
collapse;">
< td align="center"
bgcolor="#aaaaaa" border="0">
< table align="center"
border="0" cellpadding="0"
cellspacing="0" width="600"
style="border-collapse: collapse;" class="container">
< !-- This is your main
content table -->
< /table>
< /td>
< /table>

Spacing

On all tables and cells, make sure to define dimensions by either relative (percentage) or absolute (pixel) values. Don't expect clients to automatically render them properly otherwise.

When using absolute values do not include "px", as this will cause rendering issues in Outlook. A width of 600 pixels should be input:

width="600"
and not:
width="600px"

If you have empty space in your design, you can handle it with either padding or empty cells.

What About CSS?

CSS (Cascading Style Sheet) support in email is lacking, most notably in Gmail and Gmail apps. For this reason, all styling should be contained in-line, rather than in the < head> section of your email.

Styles:

The following styles are compatible with most clients, but are by no means the be-all to end all. Feel free to get a little crazy and experiment with others:

padding
font-family
font-size
font-weight
text-align
text-decoration
color

For a full list of CSS elements and client compatibility that'll make your head spin, take a look at Campaign Monitor's comprehensive Guide to CSS in Email. You can also download this free ebook, The Da Vinci Coding: The Art of HTML

That's it for today. Next time, we'll cover text and image handling in responsive email templates, as well as the all-important media queries that will allow this to work for all of your openers.

ClickZ Live Chicago Join the Industry's Leading eCommerce & Direct Marketing Experts in Chicago
ClickZ Live Chicago (Nov 3-6) will deliver over 50 sessions across 4 days and 10 individual tracks, including Data-Driven Marketing, Social, Mobile, Display, Search and Email. Check out the full agenda and register by Friday, Oct 3 to take advantage of Early Bird Rates!

ABOUT THE AUTHOR

Dave Hendricks

As president of LiveIntent, Dave Hendricks has overall responsibility for revenue, finance, legal, and operations. Prior to joining LiveIntent before its 2009 Series A, Dave was EVP of operations at PulsePoint (then known as Datran Media), where he worked with LiveIntent founder and CEO Matt Keiser and ran Datran's ESP StormPost. Before all that, Dave held senior roles at data management companies InfoUSA and Experian. A member of the founding executive team at ExperianCheetahMail, Dave began his email adventure at Pioneering ESP MessageMedia after running global partnerships for Oracle Corp. Dave was named one of Silicon Alley Insiders Top 100 technologists in 2011 and is active in several IAB Committees including Mobile and Email. Follow him on Twitter @davehendricks.

COMMENTSCommenting policy

comments powered by Disqus

Get ClickZ Email newsletters delivered right to your inbox. Subscribe today!

COMMENTS

UPCOMING EVENTS

Featured White Papers

IBM: Social Analytics - The Science Behind Social Media Marketing

IBM Social Analytics: The Science Behind Social Media Marketing
80% of internet users say they prefer to connect with brands via Facebook. 65% of social media users say they use it to learn more about brands, products and services. Learn about how to find more about customers' attitudes, preferences and buying habits from what they say on social media channels.

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising
If you're considering implementing a marketing attribution model to measure and optimize your programs, this paper is a great introduction. It also includes real-life tips from marketers who have successfully implemented attribution in their organizations.

Jobs

    • Tier 1 Support Specialist
      Tier 1 Support Specialist (Agora Inc.) - BaltimoreThis position requires a highly motivated and multifaceted individual to contribute to and be...
    • Recent Grads: Customer Service Representative
      Recent Grads: Customer Service Representative (Agora Financial) - BaltimoreAgora Financial, one of the nation&#39;s largest independent publishers...
    • Managing Editor
      Managing Editor (Common Sense Publishing) - BaltimoreWE&rsquo;RE HIRING: WE NEED AN AMAZING EDITOR TO POLISH WORLD-CLASS CONTENT &nbsp; The Palm...