We provide a lot (and I mean a lot!) of HTML code evaluations of our client’s emails. Sometimes we see some really crazy coding that makes starting from scratch a lot easier than correcting the existing code. Sometimes we evaluate things solely based on best practices, like avoiding the use of <p> tags and background images when the overall code structure is setup properly.
A lot of these best practices have been around from the start of the Email Marketing boom. Back when we were using Outlook 97 & 03, back when Hotmail looked like the way we wished it still did and back when Lotus was the only game in town for a lot of government workers.
Looking at today’s email clients like Thunderbird, the new Hotmail and now mobile email apps, I have to wonder – what can we get away with now when it comes to coding?
Surely, we must be able to break some of these best practices now – we can “trick” Outlook into using a background image, we’re *kind of* able to have video in emails and now we can embed Schemas into Gmail. So some of the “lower level” coding that’s more basic should work, right? Right?
To make things a little easier and faster, we downloaded a free email template that appeared to “break” some best practices. Big thanks to Meagan Fisher for developing the template! We then added more code that was based on the most frequent client requests to the template. The end design result, was NOT pretty…but afterwards, we sent that baby on a test drive through a few popular email clients to see some fun!
The chart below shows what we tested and how each email client handled it:
table { font-family: Tahoma, Geneva, sans-serif; font-size: 10px; color: #000000; }
td { padding: 5px; }
tr#header td { border-bottom: dotted 1px #333; text-align: center; font-weight: bold; }
tr.tested td { border-bottom: dotted 1px #ccc; border-right: dotted 1px #ccc; text-align: center; }
td.lastBtm { border-bottom: dotted 1px #333 !important; }
td.lastRight { border-right: none !important; }
tr.highlight td { background-color: #f2f2f2; }
td.code { font-family: “Courier New”, Courier, monospace; font-size: 11px; text-align: left !important; }
span.green { color: #0C6; font-size: 20px; }
span.red { color:#F03; font-size: 13px; }
| Outlook ’07/’10 | Yahoo | Gmail | Hotmail | AOL | Thunderbird | |
| <!DOCTYPE HTML> | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| styles applied to <body> | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| <p> | ✔ | ✔ | ✔ | ✔ | ||
| <h1> – <h6> | ✔ | ✔ | ✔ | ✔ | ✔ | |
| CSS in <head> not inline | ✔ | ✔ | ✔ | ✔ | ||
| a:hover | ✔ | ✔ | ✔ | ✔ | ||
| float: left/right | ✔ | ✔ | ✔ | ✔ | ||
| form input type=text | ✔ | ✔ | ✔ | ✔ | ♠ | |
| form input type=select | ✔ | ✔ | ✔ | ✔ | ♠ | |
| form input type=checked | ✔ | ✔ | ✔ | ✔ | ♠ | |
| form input type=submit | ✔ | ✔ | ♠ | |||
|
absolute positioning & z-index |
✔ | ✔ | ||||
| margin | ✔ | ✔ | ||||
| inline text styles on <td> – not on <span> | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| shorthand CSS ★ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| CSS3 gradients | ✔ | ✔ | ✔ | ✔ | ||
| repeat background-image | ✔ | ✔ | ✔ | ✔ | ✔ | |
| text shadow | ✔ | ✔ | ✔ | ✔ | ||
| box shadow | ✔ | ✔ | ✔ | |||
| radius | ✔ | ✔ | ✔ | |||
| <header> | ✔ | |||||
| <nav> | ✔ | |||||
| ♠ while the form elements were there, when clicked on – a new browser window/tab opened to the actual url of the form
★ interestingly, the font rendered differently in each client – most noticeably, it was Georgia in Gmail |
||||||
After running our test, I would advise against using “non-best practices” that will be used for the foundation and layout of the email like positioning and overlapping divs. Reserve using them only for things that are cosmetic like text shadows and rounded corners.
To determine whether you should implement some of these that do work, look at what email clients support it and do a little digging into your subscriber data. If a majority of your subscribers have Yahoo email addresses, then feel free to go ahead and use a:hover or text-shadow – just know that some Gmail users will have a “degraded” version.
It is a MUST that you test to several different email clients to see just how different your email would look for users that wouldn’t support a non-best practice. If it’s going to be significantly different, then go the best practice route! If you have an EmailDirect account, you can take advantage of our Inbox Preview feature – it’s like sending to 20+ email clients at once!
We hope this test of ours can help and hopefully expand what you can code for your email. If you have a different result or if there’s something we forgot, let us know below in the comments!
Until next time – happy designing!