These are the only things supported by all browsers. Believe it or not, Google is the worst offender of CSS support, and there is very little support to adhere to standards.
Before jumping in to fix all those problems, the most important thing is to have a logical approach. Your audience should be dictating the kind of email you should/shouldn’t be designing. Each client has very prevalent advantages and disadvantages that you should be very aware of.
Here’s our table structure for the monthly and weekly emails.
As you can see, everything essentially boils down to nested tables. Sadly, a table is the most stable element in an HTML email.
<tr> tags actually have limited utility in email. They can’t take any useful display/positioning/box rules, and since typography and colors need to be on their specific element, it’s best not to bother with <tr> tags at all. Using <div> instead of <td> is a stylistic choice, but I recommend it. By using a <div>, you keep your box model rules in one place rather than spreading them across multiple <td> tags. Also, you can save the <td> tags for fine-tuning your spacing.
Content gets buried way way way down there in order to keep everything standardized.
A small, unobtrusive technique to avoid funky looking pretext. Use a pixel’s alt text (might as well use your tracking pixel).
I’ve designed an internal email boilerplate (a bit different from the one Adam wrote) that we’re using for notification emails. Should make email designing a lot faster and less painful. Plus, it comes with some extras built in.
A fun little tracking pixel that records whenever someone opens, forwards or prints our emails. This data gets pushed to the usage tracking database and comes standard in the internal email boilerplate.
Targeted CTAs which you may have already heard about. We can manipulate the state of a forwarded email by hiding content and swapping it when it’s wrapped in a <blockquote> tag.
Here in the style block, we use a bit of CSS to do the swapping. This works on about half of our customer base (and eventually, I’ll do some better testing to see if it’s affecting subscriptions).
![Quirks in Email Design ,[object Object]](https://image.slidesharecdn.com/techtalk-120118140530-phpapp02/85/Techtalk-1-320.jpg)
![Problems ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)