Email Design: What Century Are We In?!

Email Design: What Century Are We In?!

old-emailThe demand for email campaigns and “blasts” have been popping up more and more often with a number of our clients. As you know, we’re HUGE advocates of modern, fresh design and clean, standards-compliant code. Sending HTML email is just like building a webpage, right?


In this post I’ll go over some of the big hiccups we’ve run into when designing emails for clients, and ways we’ve skirted around them with some tricks and tweaks.

The Code – Using Standards… From 10 Years Ago.

To a hip, coding-by-hand front end developer well-versed in the latest standards, marking up email blasts feel can like a slap in the face. Yes, there’s ways to work around using all divs, but the easiest way to code an HTML email is using a table-based layout (insert loud gasps and blood-curdling screams here). All the big reasons for doing this involve email CSS support, but we’ll get into those details later. For now, you’ll just have to trust me.

Despite the fact that it’s easiest to put your layout in a table, that doesn’t mean you need to throw all of your standards out the window. You should still wrap all of your content in semantic tags, such as headlines, paragraphs, and unordered lists. I strongly suggest staying away from native-style heavy tags such as definition lists and cites, being that it is just going to add extra headaches when diving into your CSS.

Keep things as simple as possible. By using only basic tags when marking up, the number of times you want to bang your head into a wall will decrease exponentially. Believe me, I’ve been there. Divs aren’t totally out of the scheme of things either: use divs to wrap content within a td to control entire sections at a time.

The CSS – A Minefield of Support Issues

When the topic of building emails comes up, the biggest pain is hands-down the CSS. This client supports this, that client doesn’t, this client supports it but displays it incorrectly 75% of the time. Here I’ll go over the big properties you should avoid and some good habits to get into when digging into your stylesheet.

Let’s start with the biggest issue: the stylesheet itself. You can’t use one, at least not one linked externally. The support for externally linked files for .css and .js is botched. Seriously, what century are we in? To dodge this bullet you might consider putting all your styles within the head or body tag. Sounds good… unless you have substantial users on Gmail. Unfortunately, Gmail seems to be the last one jumping on the boat to support this, which means only one thing: inline styles. That one hurt even just typing it.

Don’t get discouraged yet though: not ALL of your styles need to be put inline. A habit I’ve gotten into is putting all of my main-layout based styles in the head tag, and saving text treatment, colors, etc. for inline. Try and limit yourself to a few different styles, as this way you can copy and paste to your heart’s content. Another saving grace is that many email campaign programs (including ours!) have an option to inject styles inline, hopefully closing the number of loopholes for clients with limited support for properties within the style tag itself.

The big no-no properties that you want to avoid using almost all deal with positioning and layout (hence the table-layout recommendation). Absolute and fixed positioning is barely supported at best, especially when working on a webmail client such as Gmail, Yahoo, or Hotmail.

Although “float:” is gaining better support as the years go on, it’s best to save this property for small uses such as images within content and not for laying out the content. Recently there’s been a huge uproar over Microsoft’s decision to use the MS Word rendering engine for its CSS support in Outlook 2007. For anyone who has tried exporting a document from Word to HTML, you know how shoddy this can be. So again I say, keep things simple.

Backgrounds – “Why aren’t my images showing up?”

Backgrounds are something I’ve been fighting with for a while, but I think I’ve finally found a happy medium. Background-image isn’t supported by Outlook 2007 or Gmail. Although these are pretty big names, background-image is something you may want to consider keeping, but use it smartly: don’t make a compound rule for your backgrounds, split it up by image and color. This way if the client doesn’t support the image, a solid color will displayed in its place, like so:


This allows users with clients who do support background images to see a very rich, graphically pleasing email, much like a webpage would be, and users on Outlook 07 and Gmail will never know the difference. Just make sure that your background-color doesn’t hurt the scheme of your design, leaving text readable and the email content sections still clearly separated. I find this method works great for simple images such as gradients, where I will just drop a value from the gradient as the background color, like pictured above.

For a full listing of what clients support which properties, check out this amazing collection Campaign Monitor put together on CSS support in email clients.

At Least One Thing is the Same – Testing!

Over time, I’ve learned the importance of testing email designs in as many clients as possible. You would be surprised the quirky little things you overlook when building out an email that might only show up in one client. There are plenty of services out there that do this for you as well if you don’t want to sign up for tons of webmail accounts, but to be honest… they’re free and take only mere seconds to set up.

Hopefully as time moves on we will see more and more standards support as the product of great movements, such as the Email Standards Project, and building emails will slowly become more and more like building webpages. Until then, simply keep in mind your restrictions when designing a blast, but don’t necessarily hold back. Just because you’re using simple and sometimes outdated code, you don’t need to sacrifice design. And if you’re wondering “no external CSS? No background support? What century are we in?!” I’m right there with you… but hopefully I’ve at least given you a couple workarounds to try.

Have specific questions or experiences to share? Drop us a comment, we’d love to field it! Interested in starting an email campaign or marketing program with a company who knows how to navigate the ropes? Check out our email marketing services.