Tonight We're Gonna Code Like It's 1999

December 2014

@mybluewristband, Jennifer Wong

Slides

So, emails are evil. Story of one woman trying to make nicer emails.

Design

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.

Sketching

Do lots of them. (Your later ones are always better.)

Images

'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 :(

Campaign Monitor

Max Width: 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.

<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

Outlook 2007, 2010, 2013: WTF?

They all use Microsoft Word as their rendering engine. Whhhaaatt?

Gmail

You have to style all your <a> tags inline. Wah.

Blogs

Templates

Testing