Responsive design and modern CSS techniques have rapidly transformed the web from the 960 pixel wide place it was only a few years ago, bringing beautiful, usable web experiences to our smartphones, tablets, phablets, i-things and other devices of all shapes and sizes. With more and more of our customers carrying their email around in their pocket we need to provide an equally beautiful experience for email on mobile devices. This talk covered responsive techniques you can apply to your HTML emails that overcome some of the challenges of email client rendering engines, as well as some tips for designing your emails to work well with these techniques.

1. Send beautiful
(responsive!)
emails
RESPOND Conference, 5th February 2014
Cathy Lill @cathyblabla

2. HTML Email is a challenge.

3. Responsive HTML email presents an
added layer of complexity.

4. Keep it simple.

6. Provide a text only version Responsive is built in!

7. First a quick HTML email refresher...

8. We’ll be needing some of these...
http://www.flickr.com/photos/furniturelosangeles/6601840323

9. ●
●
●
●
Inline all CSS.
Use tables for layout.
Use HTML attributes where possible.
Don’t rely on default tag rendering.

10. Now lets make it responsive!

12. With nested
tables...
http://solidteak.in/NestedTables/Default.asp?Fname=NT-003

14. ...and hacks

15. Reliable responsive layouts
● This method does not rely on media
queries for collapsing layout.
● Columns must be wider than mobile width
to be fluid.

16. Creating a collapsible, fluid layout
● Start with a full-width, max-width table.
● Single-cell rows for full width content.
● Nested tables for collapsible columns.

19. Collapsible columns
●
●
●
●
Max-width to set the ‘desktop’ column width.
Align attribute to mimic float: left / right.
Width: 100% to stretch columns on mobile.
Remember only columns wider than the
device width will stretch.
● Leave 25px between columns for Outlook.

21. Images
● Set pixel width and height attributes for fixed
size images (same size on all devices).
● For fluid images set width attribute to 100%
to fit containing cell and use CSS height:
auto to maintain aspect ratio.

23. http://h4x0r3d.tumblr.com/post/32249574819/keep-calm-and-hack-the-planet

24. Max-width for Outlook and Lotus
Notes
● Use conditional comments.
● Add an additional table wrapper with maxwidth hardcoded in the width attribute.

26. Max-width for Apple Mail
● Use a media query to set max-width on
responsive tables.

28. Hiding media queries from Yahoo!
Mail
● Yahoo! Mail applies all media query CSS
regardless of screen size. Oh noes!
● Use attribute selectors for your media query
CSS as Yahoo! Mail ignores them.

30. Limitations
●
●
●
●
●
Only wide columns can be fluid.
Fixed width columns.
No column scaling.
Single breakpoint created by max-width.
Only provides ‘desktop’ and ‘mobile’
versions.

31. Add some finesse with media
queries
● Stretch narrow columns to full width.
● Additional padding around full width
elements.
● Bigger buttons, larger text sizes.
● Background images for nicer retina
rendering.

32. Resources

33. Testing
Litmus http://www.litmus.com
Email on Acid http://www.emailonacid.com

34. Validation
W3C validation service
http://www.validator.w3.org

35. Tools from Campaign Monitor
http://www.campaignmonitor.com/resources

36. Too much hassle? Try our handy
WYSIWYG template builder!
http://www.campaignmonitor.com/templates/

37. Further reading...
http://blog.emailwizardry.com.au/
http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/
http://www.campaignmonitor.com/guides/mobile/responsive/
http://www.campaignmonitor.com/resources/will-it-work/email-clients/
http://dev.bowdenweb.com/html/ie-conditional-comments.html
https://litmus.com/help/email-clients/rendering-engines/
http://stylecampaign.com/blog/

38. Thankyou
@cathyblabla
cathyl@campaignmonitor.com