Like leaving a sentence with no punctuation, there is just something wrong about not identifying content with a p tag. It feels unnatural… even though it doesn’t really matter to an email client.
But, each email client renders that p tag a little differently. While most respect your formatting, other flip you the bird and I got tired of fighting with them. Even with stripping formatting down to it’s essence, if the design doesn’t accommodate for variable content height or flow then it simply looks broken. What to do what to do?
“ah-ha!” I say to myself. “What if there wasn’t a p tag at all?”And in marches SPAN to save the day!
The only time it would really matter is if the content is getting hung up on your website and how hard is it to do a find/replace for “span”. Finally, success!
I can’t tell you how much details like this bother me. I want the user experience to be consistent across all channels and it’s simply unacceptable to accept it as ‘good enough’. Perfection is priceless.
Now, I know what you’re going to say… “it’s a bloody html email” and “who gives a $#!&?” Well the answer to both those is, me. 🙂 And for all those templates you can get online for your emails with email client specific hacks in them, you still don’t get a consistent presentation across the board. The truth is you can’t approach it like you would a standard html project because it’s not. It’s a bloody email.
I find there are a lot of short cut approaches to html emails. A lot of “how to” blog entries and template shortcuts thrown all over the web by people who have obviously not spent much time down in the email trenches. Well, I’m here to set the record straight… there is no html email genie!
There, it’s out in the open for the whole world to know. The best thing I can recommend is hard work and practice. (I know, I kind of felt a little dirty using the “p” word.) The truth is, html emails are more a recipe than a template. A dash of this, a pinch of that… and it all depends on the content.
Recipe for perfect email cookies:
1. Content. We all know that content is king when it comes to SEO; the same is true for html emails.
2. Text only versions. This is the most overlooked nugget of awesomeness that will ensure deliverable. Never ever forget to have a text only version.
3. Subject line. Be short, be concise and stay away from words like free, win and viagra. Our subject lines not need a virile treatment.
4. Image to text ration. This one is for my fellow designers… emails are not a website, you doofus! Learn the medium you’re designing in for goodness sakes.
5. Unsubscribe link / SPAM Law Compliance. Be smart. I mean, it’s the law to NOT send mail to people that don’t want it… so suck it up and to your homework.
There it is… the simple recipes for a successful start to your html email. One of my favorite resources is actually mailchimp.com. They have some really fun documentation that make for a quite entertaining read. Enjoy.