CLEAN CODE FOR COMPLEX EMAILS
With the increased popularity of mobile devices, good email development has become more important than ever. Design studios are working hard to keep up with trends and deliver responsive emails that render well on a large variety of devices.
When I first began developing emails in 2010, I thought I had a good understanding of what was acceptable – and what was unacceptable – to use in email HTML: i.e., not using tables, inline style on elements, or JavaScript in my code.
However, many email applications (including webmail) will not recognize some of the other standard coding practices developers have become accustomed to, including absolute positioning, background images, and stylesheets. Emails built using these techniques will not render properly on a majority of systems.
WATCH OUT!
These common tools will break your email:
Paragraph (<p>) and Div tags
Many examples of “good” emails seen online show the use of Div tags, but I highly recommend against it. Different clients render these items with different line-height spacing and margins, often creating problems with the formatting in general. Instead, place your text in a single cell of a Table and control paragraph text with break (<br>) tags.
Background Images
The use of background colors is perfectly fine, but background images are often removed by an email client, resulting in very plain emails. Instead, be creative with using space. Break images up so that they still appear as backgrounds when placed around other objects. Text inside the image itself can still appear on the image, but it will not be selectable. If you absolutely must use a background image, make sure that your code degrades gracefully so the text content, if any, is not lost.
Design studios
are working
hard to keep up
with trends and
deliver
responsive
emails that
render well on a
large variety of
devices.
JavaScript
Some email distributors allow you to include basic server-side JS in your code prior to the send, but it is rare. Any JavaScript included in your email will be removed by every mail client when it hits the user’s mail server. This includes analytic script, such as Google Analytics.
Stylesheets
External stylesheets are nearly ubiquitous in web development, but they’re against email “rules” and often ignored when encountered by email clients. This can be devastating to a standards-compliant email. However, mobile email clients often support internal stylesheets and we can use this to our advantage – more on this later.
Advanced CSS
You have to be very careful with the types of CSS you use in emails. Stick with the basic and common properties established in CSS2. Most CSS3 properties will not work properly in emails. This includes floats, animations, transforms, positioning, and @font-face, among others. Campaign Monitor has a great list of the supported types of CSS for email and webmail clients.
THE MAGIC OF TABLES
The biggest word of advice I have is: use tables, but carefully. Limit the number of columns and stick to rows as often as possible. Nesting tables inside of tables, while considered terrible practice in web development, is not only accepted but encouraged for controlling layout and copy within an email.
While Span tags are fine, most content formatting should be controlled using the containing TD cell, applied with inline styling. Keep in mind that the box model works differently for a number of clients, so you will want to avoid using padding and margin attributes on the sides of cells (though top and bottom are fine).
Instead of applying a padding or margin to the side of your content, simply create a new empty table cell next to the content and establish its width in pixels. I also recommend including a non-break space ( )
The biggest
word of advice
I have is: use
tables, but
carefully.
character in these “empty” cells to prevent a handful of clients from removing any cell with no information in it.
AVOIDING THE BLACKLIST
You can avoid being blacklisted by: Keeping subject lines short! They should always be fewer than 70 characters in length, including spaces and other non-letter characters.
The total email should be less than 70 kilobytes. Defying this rule alone won’t get you flagged as a spammer, but it will raise some eyebrows – especially if you’re doing a large send. The 70 KB total includes both the images and the source code of the email itself.
The footer of your email should always include a mailing address and, if it’s a subscription-based email, a way to unsubscribe from the mailing list.
USE TABLES TO CREATE RESPONSIVE EMAILS
Responsive design is in high demand in the web development world. But how do you create responsive emails using tables, but without using standard stylesheets or an out-of-box system like Bootstrap?
The answer lies in the tables themselves. Use percentage-based widths on your tables and their cells to control the width of content displayed on the screen.
One of the most exciting aspects of mobile technology is its use of new email clients that support features not available for use elsewhere, in particular, CSS stylesheets (which I’ve spent most of this paper telling you not to use).
You can use a CSS stylesheet in an email if you include it (without using an external call) in the Head of your email. Keep in mind that you can only use the CSS types as specified earlier, meaning that you have to limit the type of interaction your users will experience.
You can use this technique to establish a “mobile-friendly” email using classes defined in the stylesheet, and inline style on elements for
non-mobile email clients. Place your Style attribute after your Class or ID attribute in the element hierarchy to accomplish this.
Also consider your intended recipient. Because mobile users have devices that generally read stylesheets, format the style in your Head’s stylesheet to reflect how mobile-users will view your content. Desktop-based users will still see your email in its original form, while mobile users will see a fresh take on the email’s design.
USING ANIMATED GIF IMAGES
Special consideration needs to be given when using an animated image in your email: namely, it will not work.
Animated GIF images do not animate in Outlook. Instead, they will display the first frame of the image. If your animated GIF uses text or completes an animated sequence, you may consider making the first frame a very brief copy of the last frame of your animation so Outlook users can view the content without animation.
Additionally, animated graphics are often enormous and are likely to break the “70 KB” rule single-handedly. Using one may land you on the blacklist. To reduce this risk, keep your animated GIFs as small as possible with as few moving pixels as possible.
INCLUDE A “RESET” FOR OUTLOOK
In every email I create, I add a few resets that are designed to help Outlook render emails as intended. Because almost all other email clients will ignore a stylesheet, but Outlook will read it, we’re able to include functionality directly for Outlook that won’t affect our emails on other systems.
CONCLUSION
Now that customers are fully mobile and expect the right content delivered in the format that suits them best, well-executed emails are more important than ever. The new standard? Emails that can be opened seamlessly across devices, flashy enough to be noticed by customers, yet simple enough to be ignored by spam filters. It’s a delicate balance, but
reaching customers at the time and place they are most likely to respond creates a reaction that’s worth the effort.
ABOUT CATALYSIS
Catalysis is a Seattle-based digital marketing agency and home to 50+ strategists, data architects, mathematicians, developers, and writers. We help you study your audience to find answers in their behaviors. With relationship marketing expertise across email, web, social, and analytics, Catalysis creates targeted campaigns to deliver the results you want. Our clients include: Microsoft, MSN, Bing, Xbox, Gap, Old Navy, Banana Republic, The Bill & Melinda Gates Foundation, Mithun, Moss Adams, Zumiez, Winebid, and Treehouse
For more information, contact info@catalysis.com or visit our website at www.catalysis.com.
The information contained in this publication is general and is for informational purposes only. Catalysis makes no warranties, express or implied, in this material.
