Rule 1: Email is not Web
You’re right, they both use HTML. The difference is in the style of HTML that is used. For Web, divs are used and external css files drive styling and design. For email, tables are used. CSS stylings are coded inline.
Rule 2: Email Clients New and Old
You’re not only designing an email for the latest browser, or the newest phone, you’re designing an email that needs to look good in Outlook and work in Lotus Notes. Lots of rules need to be taken into account.
Rule 3: Create a Clean Template of Code
Starting with a template that you’ve built, approved with the client, and put through the rigors of a render testing will be the best way to head towards success.
Rule 4: CSS needs to be Inline
As mentioned in Rule 1, email code has the CSS styles inline. When viewed the first time, the code looks heavy, but as you work in it, it becomes beautiful.
Rule 5: Nest your Tables
Abandon those colspans and rowspans at the door. You’ve entered Emailland. Nest your tables, then nest again. That structure will allow you to walk by possible rendering issues and never look back.
Rule 6: Validate Validate Validate
Use a trusted source, such as the W3C validator and the Email Validator to make sure your code is not missing anything crucial. A missing tag can ruin the structural integrity of your email.
Rule 7: Render Test with a Passion
Take your render testing personally. Don’t dismiss a structural problem. Use a render testing platform and get as many live devices as you can get your hands on.
Rule 8: Know your Followers
Know where to focus in your coding and design. By knowing where your followers are viewing the email, you can know where to spend your time.