Responsive HTML Email Template: Building the Foundation

Responsive HTML Email Template: Building the Foundation

Kevin Scholl

As the name might imply, the shell is the wrapper, the container holding inside and binding together all that is placed within. As the starting point for any HTML email, the shell holds several critical elements, as well as some nice enhancements for the email clients advanced enough to understand them. In its simplest form, the shell is a basic HTML document. The necessary elements include a doctype and a one column table set to a maximum width of 600.

Though many Web developers may cringe at the thought, currently the best doctype to use is XHTML 1.0 Transitional. This seems to provide for the most complete support across the platform, device, and email client ranges.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

The one column table establishes the maximum width of the email. Six hundred pixels may seem narrow to a seasoned Web developer, but a few considerations come into play. First, email clients tend to have more chrome around them than browsers, to account for various elements such as more extensive menus bars, preview panels, calendar add-ons, and the like. Second, the visual nature of HTML emails remains relatively new, and due to the limited support of more advanced development methods, the emails require a simpler approach than what may be found on applications and sites. Lastly, while screen resolutions have been on the rise for some time, so too has the propensity for users to leave their applications in tiled windows, rather than full-screen.

You may wish to set an overall background color to the email document. This color gets set using the legacy bgcolor attribute, applied to both the BODY tag and the outermost wrapper table:

<body bgcolor="#222222" width="100%" style="margin: 0;">
<table bgcolor="#222222" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse: collapse;">

This is the color that will show outside the 600 pixel width, as well as behind any element not otherwise specifically stated. It’s a good idea to set this background for consistency, as the many email applications have different default background colors, which may or may not work well with your design.

Another non-critical, but nice to have element is a preheader. This is a simple block level element comprising a brief  snippet of text summarizing the overall email.

<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
(Optional) This text will appear in the inbox preview, but not the email body.

While this element is styled so that it does not appear in the email itself, most email readers will use its text as the preview in an Inbox list. Without it, the preview, if it appears at all, may be whatever text appears first in the email itself, which may or may not give the user an accurate or meaningful idea of what the message is about.

Email application support for all the latest and greatest bells and whistles is extremely varied, to the point where they cannot be reliably depended upon for critical visual or functional needs. Still, it is possible to include a number of stylistic enhancements that will be applied by those readers that understand them, while having no adverse impact on older, less capable applications. These enhancements might include button rollover states, changes to alignment, layout adjustments, and element sizing, particularly across the responsive realm where media queries are supported. View the sample shell code (below) to see what we include. But remember that support is not guaranteed, so keep your default simple and clean.

View the code for a sample shell here.

In the next part in our Tackling Responsive HTML Emails series, we’ll look at some modules that you can use (and reuse) to lay out the content in your emails. Stay tuned!