Thursday, February 7, 2013

Coding email design that doesn't break

Today we're going to talk about the fundamentals of coding email design. See, it's not as easy as you might think. The reason for that is that when it comes to displaying html email, email readers are stuck in 1995. They simply don't let you use the latest and greatest coding. So, what does this mean?

  1. Use tables instead of divs. For all of your layout coding, use a table instead of a div. It can be a bit annoying if you code websites too, but this one tip alone will save you hours of agony when you discover that your divs went all haywire in someone's Outlook inbox.
  2. Send multipart MIME. What's this? Basically, it means sending both the HTML code and the plain text version of your email all in one message. The reason to do it this way is two-fold: first, it'll reduce your spam score (which you want--the lower your spam score, the more likely your email is to be delivered) and second, for readers who can't read the HTML version, your email message will still display which means they'll still be able to read it (and won't send you angry emails about sending them blank or buggy messages).
  3. Keep it simple. Because email programs aren't as advanced as web browsers, it behooves you to keep your code simple. That means staying far from things like javascript and HTML5, but it also means using as few images as possible and keeping the design as simple as possible. All of this is a good idea because it means your email is less likely to break, and it also means it's more likely to display nicely for a wide variety of readers--whether they're reading on a mobile device or tablet or on an enormous monitor with images turned off.
  4. Code semantically perfect code. Errors in HTML code are really common (over 97% of HTML emails have errors!) AND they're also a trigger for most spam filters. So, make sure your code is error-free. There are lots of tools out there that you can use check your code, I like Markup Validation Service from W3C.
  5. Code by hand. It's crucial that your email file size be as small as possible (this avoids errors, avoids raising your spam filter score, and helps your email load faster on slow connections). The only way to make this happen is to code by hand so that you can avoid all extraneous code. I use Notepad, personally, but any plain text editor will work. If you don't know how to code HTML, you shouldn't be designing email newsletters.
  6. Test your email! Test your email in as many different email programs as you can. This helps you spot any display errors long before they arrive in readers inboxes. Faulty display is a leading cause of unsubscribes or passive opting out (when the reader simply stops opening your emails) and this kind of attention erosion costs companies big. It's well worth the half hour or so it takes to check out your email across multiple programs and platforms.
By the way, if all of this sounds like way too much work, bring in an expert. We'd be happy to help by creating your email design for you.


No comments:

Post a Comment