In part one of this ‘Best Practice Email’ series we talked about email layouts. In part two we focused on email content. In this final installment of “Rules for Best Practice in Email” we get under the hood, and look at the best coding practices.
Now that you know how to create a well-designed graphic email that accommodates differences in email clients and web browsers, it’s time to make your emails work in every inbox.
As we mentioned in Part 1, a graphic email might look and feel like a webpage, but is it coded just like a webpage? Well sure – if that webpage was coded in the 1990s.
Writing markup for email takes HTML back to the old school. These tips will help those of you who don’t recall the days of flannels, pagers, and the Discman, or who think of tables only as something to eat off or store data in.
1) Use tables for layout
To ensure that your layout renders correctly across all inboxes, use tables–lots of tables–all nested together. This tip defies modern-day web development, in that tables are now primarily used for tabular data–not for webpage layout.
Since CSS became a suitable and more flexible way to layout webpages, using tables – the old-school way of coding webpages – has been rightfully railed against by web developers. However this isn’t the case when marking up HTML for a graphic email where tables are not only acceptable but still the preferable method.
As much as our instincts might tell us otherwise, the sobering facts are that tables seem to be the only surefire way to get multicolumn layouts working across all likely inboxes.
Using divs for very simple layouts can work well, but test the divs thoroughly to ensure they behave as intended. Outlook, Yahoo and Hotmail don’t offer great support for position and float, so it’s wise to make sure that your other CSS properties don’t fail in different clients.
Tables offer the most consistent support across all clients and have long-since been the standard for coding emails. However outdated or unfamiliar they might feel when being employed in laying out templates, it is likely you will achieve the best results in all inboxes using tables over divs or other methods.
2) Bring your styles inline
Gmail and other email clients, inevitably strips some (if not all) of the CSS out of the tag in HTML documents. For this reason–plus the fact that external stylesheets are not an option in email—place your CSS styles inline.
This makes for a lot of repetitive styles applied to each element and completely eliminates the luxury and convenience of classes, but it will offer the most consistency and preserve a well-designed template. Some email service providers like MailChimp and CampaignMonitor now offer conversion tools to bring your CSS inline and relieve the headache of having to repeat styles for each element.
The exception to this rule: Media queries aimed at layouts for mobile devices. Media queries are always written as topline CSS and contain classes, when supported they enable a different experience for mobile users to view email designs on smaller screens.
3) Always avoid shorthand CSS
When coding email there aren’t a lot of shortcuts to make life easier, and unfortunately using shorthand CSS does not seem to be an exception.
Support for shorthand CSS in font, padding and defining hexvalues is generally inconsistent (although using the shorthand format with borders does sometimes work). As is always the rule with coding email: If you are going to try it, test it–everywhere. Make sure that shorthand properties behave the way you intend them to, and do not rely on default values – define them.
In short, the benefit of shaving a few characters off your CSS is unlikely to be worth the new rendering headaches it creates.
4) Wrap your background color in its own table
Similar to stripping out style tags, some email clients will strip out the body tag as well. For this reason, it is wise to define the background color in a separate table wrapped around the rest of the template and set the width to 100%.
By default, most email clients display messages on a white background. The amount of background displayed varies across clients, and other factors such as banner ads, toolbars and menus can affect the message pane’s overall size.
Another good approach to ensure that an email template displays clearly within the message view pane: add a border either around the whole template or to the template’s sides. If the content within the template appears on a white background, this will enclose the design and create some space between the message and the pane.
5) Slice your images
Images are key to a great email design and usually link to a webpage or several.
Unfortunately, image maps are not well supported everywhere (and may not link your images at all). Once again, taking the long road is the best solution: Slice all those images, and link each one separately. This will enable you to verify that each link works, and will also download smaller images faster.
While the list of constraints may seem daunting, email clients have come a long way, and will continue to change and grow. Once upon a time, there was simply no CSS support at all for email, and markup required a lot of empty cells and spacer gifs to get the padding just right.
Lately, achieving standardization of HTML for email has become an internationally recognized goal.The Email Standard Workgroup, a W3 group, will meet in September to discuss a new HTML syntax standard for long-term use.
Email has a proud history and a long legacy, but it is shuffling in the right direction.
Lauren RibandoLauren is a front-end web developer who specializes in Email. She currently serves as the Email Build Specialist at Gilt.com, an innovative online shopping destination offering its members special access to the most inspiring merchandise and experiences all at insider prices.
