HTML email: tables or divs?
Solution 1:
⚠️ Update 2021-06-10: This is a very old answer. I'm not sure how accurate it is 10 years after it was written. Mail clients are hopefully more compliant today ⚠️
When it comes to email HTML, note that all best practices from web development goes out the window. To make the look consistent, you should:
- Use table based layouts
- Use the old-school attribute styling for tables
- Use ONLY inline-styles, and only very simple such.
<style>-tags are discarded by many clients. - Skip using
<html>,<head>and<body>- They will be discarded by most clients anyway. - If you embed images, try to make sure that the e-mail looks decent even if images are not loaded. Many clients require the user to mark the email as "safe" before displaying images.
You can read more detailed versions of the above points here:
- http://articles.sitepoint.com/article/code-html-email-newsletters
- http://dennisdeacon.wordpress.com/2008/06/09/top-10-email-best-practices/
- http://www.catswhocode.com/blog/best-practices-for-coding-html-emails
Solution 2:
Like everyone here has said, use tables and inline all your css... but there is an ecosystem of email apps to help you build emails.
I've been using Mailrox (https://www.mailrox.com/) for most of my email builds recently and it seem to be pretty damm good and outputting perfect HTML emails, if you're building one from a design, even though it's in beta.
You could also try pre-built templates from Mailchimp or Campaign Monitor, but it sounds like you have a design for your email so maybe Mailrox would be best.
If you really want to get into building emails I'd say forget most of what you know about modern webdesign and master table layouts and use the links from PatrikAkerstrand.
Litmus is also great for testing your hand-coded designs. They give you previews of your email in (pretty much) all the email clients.
Hope this helps.