Seven Design and Coding Tips for Better HTML Email Campaigns

Our final take (for now) on best design and coding practices for better email campaigns.

Part Four in a Series of Four

Wrapping up our four-part blog series, ‘Tips from the Experts at Emma’, we offer seven tips to improve the design and code of your email campaigns. Yes, our friends at Emma and other email service providers offer template stationery in an always-evolving variety of pre-built styles, but if you really want to drive success, custom design and coding is the way to go. Here are some ideas on how to build a better custom campaign.

1. Design Email Campaigns to Match Your Brand

   Sounds simple, right? You would be surprised at how many companies don’t design campaigns that are in line with their brand standards. Consistent, brand-friendly design provides instant connection and recognition for readers. If a user can identify with a familiar brand or campaign, their experience is more personal and they’re more likely to engage with the campaign’s content. If not, you lost them on first glance.

Emma Graphic Designer Kelly McClain writes precisely on this topic in Five Pointers for Visually Effective Email Campaigns. Kelly’s post discusses how successful imagery, design elements and typography are used in the Oprah Newsletter she gets each Monday, saying:

“...what keeps me hooked is that whenever I open it, I know exactly where to direct my eyes for a hasty once-over…I start clicking the links that appeal to me [because] the email stays consistent within itself, using only a couple fonts (in reasonable sizes) and sticking to a uniform, easy-to-read color scheme.”

2. Fonts Matter…They Really Do

   Pay special attention to font use when building your campaign. Keep type simple and legible. Don’t waste your readers’ time by making them figure out the visual hierarchy of your campaign on their own. Give them solid typographical structures that support easy scanning to identify headlines, links, and so on. And of course short, bulleted lists are always easy on the eyes.

   Use web-safe fonts ONLY for text-based content in your email marketing. Why? In short, emails are meant to be much simpler than web content and many advanced CSS (or JavaScript) tricks won’t work. Web-safe fonts include just the basics: Arial, Times, Georgia, Tahoma, etc. Web font services such as Typekit don’t (yet) work in email campaigns, nor will @font-face, so you have to keep it simple.

   Of course with Photoshop, Illustrator, Fireworks, or a slew of other image editing tools, it’s a simple process to export type as an image (see our holiday email example below), but use this sparingly. Not everyone will be able or willing to view images in their email, particularly if they’re reading it on an older mobile phone. By default, Gmail disables email imagery until you enable this function.
   
   Fun fonts can be used as images, sparingly, in emails.

   Plus, if your email is also archived on your own site (which it should be), the (presumably keyword-rich) text copy will be picked up by search engines as well, bolstering your search engine cred.

3. Images in Emails

   Jaggy images will undermine your integrity faster than you can say DPI. Likewise, oversized images or broken image links can be a straight shot to the ‘unsubscribe’ button. Exporting images for email campaigns is a delicate balancing act between small file size and image quality. Optimize images enough to ensure speedy download on even the slowest connections but make sure that they still look good. Yahoo’s SmushIt tool is free and works really well for optimizing images if you don’t happen to have Fireworks or Photoshop.

4. But What About Animation?

   In Emma’s article The Year in Marketing, Cody de Vos cites that including animation in your campaigns is a potentially risky endeavor: “...they don’t load consistently, and many of your readers won’t see any animation in their campaign — just the very first image in the animation series. But for those readers who are capable of viewing animated GIFs in their email client, they can add a splash of style to your email.”

   Likewise, it’s even more risky to embed Flash or video files into your campaigns, as even fewer email clients support those formats. Nine West chose to include an animated GIF of a rotating shoe in their Fall email campaign rather than Flash. The animation was not critical to campaign content and some viewers did not see it at all, but those that did, according to Emma “responded well.”

   
   See the animated gif in action from Nine West’s campaign.
   The take-away here is that while rich media offers the opportunity for higher levels of campaign engagement, the number of hurdles to successful implementation far outweighs the benefits. It’s easier just to include a link to this content on your own site.

5. It’s Okay to Scroll. Really.

   If scrolling through your content offers a better user experience, then by all means do it! Cramming content into a tight, constrained layout doesn’t make any sense in a media format where users are already used to the idea of scrolling. Sure, it’s probably a good idea to put your most important piece of news towards the top to increase views and potential click-throughs, but remember that users will naturally scroll a page if the content is longer than their screen. This is especially true if the page they’re viewing is designed to be used that way, as with email campaigns.

6. Trim Down Campaign Width

   Vertical scrolling is one thing. Horizontal scrolling, however, is quite another. Keep your campaign width optimized for lowest common denominators since not all scrolling is created equal. The folks at Emma state in their post The Year in Email Marketing that “...In order to be viewable in every inbox, the general consensus is that you should keep your email campaigns around 600 pixels wide (this is becoming even more relevant in an era of myriad mobile devices. Smaller viewing areas demand narrow campaigns).“

   Alternately, London’s Le Cool Magazine did away with pixel-width limitations and vertical orientation, opting instead for a horizontal, magazine-style email experience. “It’s a bold move, and one that certainly caught our eye. But email, and the web in general, remains a vertical scrolling experience, and while there’s always room for dreamers, it’s not a switch we’d recommend for everyone,” says de Vos on the Emma blog.

7. A Float-Free Zone

   Most email clients render HTML the way that web browsers did back in the 90s, so you have to jump in your time machine and code campaigns the way developers coded web pages in the Web 1.0 days. This means using tables for layout, nesting tables if needed, and not using CSS for layout or positioning.

   
   Screenshot of table code used in one of our email campaigns.

   Browser-based email such as Gmail will strip out any CSS in the head and body, so you have to style things the hard way: inline, one element at a time. CSS shorthand and short HEX colors may not be supported in all clients either, so declare each property separately and use full 6-digit color codes. Because of these limitations, simpler is better.


This wraps our four-part email marketing series with tips from our own crew and the awesome gang at Emma. Big props go out to Molly Niendorf, Heather Dixon, Susan Blue, and the entire team at Emma who were so supportive and generous with their tips and best practices. Keep up with Emma and her stylish advice via the Emma blog. It’s well worth the two seconds it takes to subscribe.

Was this helpful? Let us know!