Tonight We're Gonna Code Like It's 1999
@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?? 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
Inline styles: You have to use them :(
550-600px is ideal.
You will have tables everywhere.
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.
<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
Outlook 2007, 2010, 2013: WTF?
They all use Microsoft Word as their rendering engine. Whhhaaatt?
You have to style all your
<a> tags inline. Wah.
- Style Campaign
- Responsive Email Design
- Anatomy of a Mobile Email
- Holiday Reading to Help You Send Better Email