Menu
You may be aware of the fact that website layouts sometimes appear a little different across various web browsers. However, the differences are getting smaller every day, since Microsoft finally seems to realize it needs to comply with the standards that other browsers have been following since the beginning of time.
Web browsers vs web browsers + email clients + operating systems
There are five web browsers that have some 99,9% of the market between them. There are a lot more email clients in use, especially considering the fact that Hotmail in Internet Explorer actually renders HTML emails differently from Hotmail in Firefox. The same goes for Outlook 2007 under Windows Vista and Windows 7. Seriously, I’m not making this stuff up – I’ve seen it happen.
While you may be inclined to think something along the lines of “Oh, an email template is just one page of HTML…easy peasy!”, the bare naked truth is that coding email templates that render properly in each and every email client in each and every browser and under each and every operating system, is a severe pain in the HTML!
A couple of things we email template nerds need to take into account:
- Use <tables>s instead of <div>s.
- Use a wrapper table to include all other content.
- Use inline CSS instead of external stylesheets or internal <style>-tags.
- Stick to HTML and CSS. No Javascript or other fancy stuff.
- Pay attention to detail.
That last one is pretty important, so I’ll make sure you remember it: PAY ATTENTION TO DETAIL!
When you’ve done all of the above, you’ve covered the basics. There’s still a lot of work to be done, but you’ve definitely taken the first step to creating a solid email template. Once you’re at that stage, it’s testing time.
