Email Coding for Dummies
You may have already read (and *fingers crossed*, followed) my ramblings on how to design an email, but now it’s time to code and build the thing. So, here’s some of the advice I wish I’d been given three years ago.
First, annotate your code. Since everything is built in an elaborate series of nested tables, properly labeling the opening and closing tags of each table will help you find that one tag you forgot to close or make those inevitable last-minute copy changes.
Yeah, that’s right, I said “elaborate series of nested tables”. Your email’s layout must be composed of tables, there’s honestly no way around it.
Next, there are no stylesheets, so always use inline styles and avoid shorthand. Why? Some email marketing systems will ignore shorthand and display content in their default settings. For example, Outlook will take any copy wrapped in: <font style=“15px Arial, sans-serif;”> </font> and render it as Times New Roman.
Also, be sure to double check that all hex codes are a full six characters in length and are paired with a pound sign or, as kids are calling it these days, a hashtag. Because while some email systems like to ignore shorthand, others like to fill in the blanks. Meaning #999 will become #999000 and you’ll get a super gross puke-colored hue instead of the soft grey you were going for if it’s not written out completely as #999999.
When styling live copy, apply all of the necessary CSS to the content’s nearest table row or wrap the copy in some other styled tags (div, span, or font). If you only apply the style to the parent table, it may not carry into the nested tables. It’s a tedious process, but it works.
As for padding and cellpadding, they are finicky, and the only advice I can offer here is to pay careful attention to each during testing. Do not use spacer images as a means to eliminate the need for padding—spacer images only work when image-blocking is turned off and if the images render incorrectly, they’ll definitely destroy the layout. In short, it’s not worth the risk.
However, one sure-fire way to create padding is to create “empty” table rows. Simply, set the row height to the desired number of pixels, just be sure to place a non-breaking space— —into the row, as some email systems won’t render a truly empty row.
Another amazing thing about non-breaking spaces is that any two words separated by a non-breaking space will stick together and not break into a new line. This can used with/in place of white-space: nowrap; which isn’t supported across all systems, to help prevent text orphans. But only us this sparingly as this will affect how fluid the design is.
—
In the end, strategically building and coding a “smart” email is all about paying attention to the small things that can make or quite literally break an email. So, double check your work and put it through rigorous QA testing before you launch, because you can’t take back an email. And in the world of advertising, your errors could be blinking into tens of thousands of inboxes.
Moncur is a branding + digital agency. Leveraging our specialized expertise in strategic messaging, branding, advanced technology website development and integrated digital marketing, we help large B2B companies brand, market and sell what they do online. Learn more at www.thinkmoncur.com.
