Email Design in the Responsive Age
Email designers are stuck in an archaic state of design, due to decades of uneven CSS support. Outlook's desktop applications, still a critical player in the corporate email market, continue to dictate the way in which email HTML is designed. The advent of mobile design has added new layers of challenge, introducing new apps, clients and screen sizes into an already crowded playing field.
Here are our most essential tips and guidelines for achieving stylistic consistency across platforms (old & new), while maximizing the readability for specific devices and environments.
Header Etiquette
Ensuring consistent rending across different platforms starts from the top, well before the ‹body› tag of your creative begins. The foundation for responsive success is in the header of your email.
Some environments, such as using Outlook 2011 on a Mac computer, will apply a small amount of zoom by default, likely ruining your delicately crafted email alignments, sizes, and tables... ultimately ruining the experience. Others will not render the correct character set by default.
To set the viewport, character set, and zoom, we recommend the following header specifications:
|
‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"› |
Table Manners
Setting The Table
Thanks in no small part to Outlook's antiquated desktop offerings (2007 - 2011 in particular), email HTML has long been restricted to table-based programming.
Furthermore, some email clients insert their own default padding and margins for tables, potentially ruining your layout.
To ensure that your careful programming is rendered universally, it is necessary to specify the cellpadding, cellspacing, text-size adjust, table-space and border, in the opening table parameter:
|
‹table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" › |
Setting The Width
For the strongest rendering, table width should be set at the td level (table cell). Be sure to specify the width as an object parameter, as some email clients will strip the CSS, reverting the cell to an automatic width based on the contents:
|
‹table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" › |
CSS Essentials
Always keep it inline
The bottom line is, there is no guarantee that CSS in the header or in any other style tag will make it to the other side, and on certain email platforms, it is absolutely necessary to define the style of each element in line. Each div, table, td, img, h2, p, span, and href will need to be styled individually to match the style settings specified elsewhere in your document.
Unfortunately that sword cuts both ways, as some email browsers will strip out the CSS you place on individual elements. To maximize your CSS rendering, it is necessary to set the CSS in both the header, and in each html element.
Media Queries
Fortunately for everyone, mobile email is a recent development, and the vast majority of mobile email experiences are CSS-friendly, allowing you to set your CSS parameters responsively using media queries. Take time and make sure that your text is large enough to be easily read, and be sure to adjust your images so that they are not automatically re-sized to fit your mobile device. Make sure that your padding, margins, and layout is not disturbed, and be sure to enhance CTA clickability for thumb-use.
Getting Specific: Outlook
The bad news is, Outlook's desktop applications have their own set of (severely outdated) CSS rules, and will need some coddling. Specifically, Outlook 2010, 2011, and 2013 are problematic in the following ways.
• Settting Widths Whether you are display an image, or sizing a table, it's critical that you hardcode the width of your object using a width=“XXX” parameter, rather than CSS styling. Without doing this, images may reset to their default size, potentially ruining your design. Please be very careful using max-width, as this parameter will not be read or understood by the program.
• Tables Before Divs Still unable to fully render and style div elements, Outlook continues to be the reason why email design uses a table-based code foundation. Not only is it necessary to use tables, be careful to hard-code the widths of your td elements.
• Outlook Specific Elements Fortunately for everyone, these troublesome applications have their own special query, invisible to all other platforms. By using the if-mso tag outlined below, you can create entire "ghost tables" on top of your Div structure, add additional space, or hide/show elements designed specifically for the platform.
|
‹!--[if gte mso 9]> |
• Background Images will not display in Outlook 2011, if they are set using CSS or a standard html property (such as bgimage). To get around this, we can add an if-MSO to isolate for outlook, and create a VML square that you can fill, and should render correctly. For more on this see our guide on Background Images in Email.
|
‹!--[if gte mso 9]> |
Progressive Enhancements
It goes without saying that, when it comes to universal html rendering, we've still got a very long way to go. However, there are some cutting-edge techniques that, if designed carefully, can enhance your creative for those using modern email platforms, without affecting how it will be viewed on trouble platforms such as Outlook 2011 and the GMail App:
Background Images
With a little magic sauce, it's now possible to display background images, even in outlook, for the entire body of your email, or for a specific table cell. While this isn't 100% universal yet, it's also possible to set a fallback color, so that your design will appear consistent, even in the most arhaic email platforms.
To learn more or try it out yourself, please see our guide to Background Images in Email
Pre-Header Text
Some email clients (gmail for instance) give you the option of reading the first couple lines of text available in your message. If that text is "trouble viewing" then you might be missing a major opportunity.
Email marketers, to enhance the experience for these platforms, include a special div element (invisible to the naked eye) at the very top of the creative, specifying a few key lines of text. Ideally this can expand on the subject line in a meaningful way, and create additional allure for your subscribers.
For detailed instructions, please see our guide to Pre-Header Text
Responsive Columns
In web HTML, it is a common practice to de-clutter creatives by switching between 1, 2, or 3 column layouts. Using responsive design to re-arrange your content for mobile is not revolutionary by any means, and can be quite tricky to integrate with your outlook-optimized creative. Given the narrow width of emails, and the challenges in universal rendering, we recommend caution before applying this principle to your email design. Email clients that strip header CSS, and email clients that ignore media queries will reject your dynamic transformations. Worst of all, you run the risk of distracting your subscribers with cluttered, overly dense image content.
Video in Email? ( Not exactly )
Cutting-edge email designers have paved new ways to introducing video in email, using HTML5. But, far from universal and still quite tricky, we strongly recommend using animated Gifs to create motion and excitement, while keeping the email lightweight, and rendering on the majority of platforms.
However, until certain versions of outlook embrace the format, it will be necessary to use the first slide of your gif as a "default slide" that will display for outlook destkop users.
To learn more about animated gifs in email, and see some examples, please see our guide to Animated GIFs in email
Animated HTML Elements
Creating entrance (and exit) animations for individual html elements is now a reality. While not supported by Outlook, it's now possible for images, headers, and other elements to roll, bounce, fade, zoom, rotate, slide, and wiggle their way onto the screen.
For more information, please see our guide to animated HTML elements in email.
Keep it Simple, Stupid
When less is more
In our era of information overload, it's critical to stay focused. Cutting through the thick pile of email information is critical, and embracing a clean, focused design will help you achieve that goal.
• How many links or offers do you need to provide? Don't overwhelm your subscribers with options. Instead, spread them out over several focused messages, and with only one focus, the subject line should distinguish them nicely.
• Do you offers need to be arranged side-by-side?
While this style of presentation is still the very popular for web design, fitting all that detail into 600px width or smaller makes it challenging to read, and select, your options. Our best performing clients have learned the advantages of single-file layouts that are guaranteed to display in differnt platforms, and keep your subscriber focused on one item at a time.
• Is your email design overly complex?
Bckground images, moving parts & responsive layouts are very empowering tools, but they can be overused. Too much of a good thing, in this case, can weigh your email down with code, and might open the door to future responsive layout issues. If you are using a template, be careful that your new content is displaying correctly on desktop, mobile, webmail, and Outlook 2010-2013
• Is your primary CTA in reach?
Don't bury the lead! Fight clickthrough fatigue by making sure your primary CTA is large, easy to click ( especially on mobile ), and close to the top. It's always best to divert attention and traffic to your site, when possible.
