@mybluewristband, Jennifer Wong
So, emails are evil. Story of one woman trying to make nicer emails.
Started with research. Indiegogo had really nice emails, and lots of places didn't (looking at you, HackerLeague).
Takeaways: Keep copy light, image heavy, huge top anchored logos, and set a max width.
So, the hotpads email she was working with: email
Problems: No unsubscribe, why is the logo in the middle?? not very attractive.
Goals: Consistency, brand awareness.
Do lots of them. (Your later ones are always better.)
'Rule of Thumbs': Minimum touchable area is 44px by 44px?? No! They're all different at this point!
Finger Friendly Design: Ideal Mobile Touchscreen Target Sizes Minimum Touchable Area On Mobile Devices
Why Templates?: You can keep your code DRY, for one. A little abstraction goes a long way.
Tables: They're coming. Specify your tables as block or Chrome will ignore your max-width. Whaaaat?
Inline styles: You have to use them :(
Max Width: 550-600px is ideal.
So use comments!
Image Alternatives: Have alts and background-color fallbacks. Seems like Outlook and different email providers just won't... display things.
Media Queries: Awesome for things like readability/targeting devices. In conjunction with fluid layouts, you can have nice things.
Device Pixel Ratio: Target retina/high-res devies separately.
!importants: Sometimes you have to use them. Sometimes inline styles overwrite media queries, so you just have to.
<img> and <a>: Sometimes images will appear with a thin gray border. If you put your images on the same line as your anchor element, it will go away. Weeeiirrrddd.
High-res Images: Outlook 2007, 2010, 2013, and Outlook in IE don't allow HTML or CSS image sizing. Solution
They all use Microsoft Word as their rendering engine. Whhhaaatt?
You have to style all your <a> tags inline. Wah.