Send beautiful
(responsive!)
emails
RESPOND Conference, 5th February 2014
Cathy Lill @cathyblabla
HTML Email is a challenge.
Responsive HTML email presents an
added layer of complexity.
Keep it simple.
Provide a text only version Responsive is built in!
First a quick HTML email refresher...
We’ll be needing some of these...

http://www.flickr.com/photos/furniturelosangeles/6601840323
●
●
●
●

Inline all CSS.
Use tables for layout.
Use HTML attributes where possible.
Don’t rely on default tag rendering.
Now lets make it responsive!
With nested
tables...

http://solidteak.in/NestedTables/Default.asp?Fname=NT-003
...and hacks
Reliable responsive layouts
● This method does not rely on media
queries for collapsing layout.
● Columns must be wider th...
Creating a collapsible, fluid layout
● Start with a full-width, max-width table.
● Single-cell rows for full width content...
Collapsible columns
●
●
●
●

Max-width to set the ‘desktop’ column width.
Align attribute to mimic float: left / right.
Wi...
Images
● Set pixel width and height attributes for fixed
size images (same size on all devices).
● For fluid images set wi...
http://h4x0r3d.tumblr.com/post/32249574819/keep-calm-and-hack-the-planet
Max-width for Outlook and Lotus
Notes
● Use conditional comments.
● Add an additional table wrapper with maxwidth hardcode...
Max-width for Apple Mail
● Use a media query to set max-width on
responsive tables.
Hiding media queries from Yahoo!
Mail
● Yahoo! Mail applies all media query CSS
regardless of screen size. Oh noes!
● Use ...
Limitations
●
●
●
●
●

Only wide columns can be fluid.
Fixed width columns.
No column scaling.
Single breakpoint created b...
Add some finesse with media
queries
● Stretch narrow columns to full width.
● Additional padding around full width
element...
Resources
Testing
Litmus http://www.litmus.com
Email on Acid http://www.emailonacid.com
Validation
W3C validation service
http://www.validator.w3.org
Tools from Campaign Monitor
http://www.campaignmonitor.com/resources
Too much hassle? Try our handy
WYSIWYG template builder!
http://www.campaignmonitor.com/templates/
Further reading...
http://blog.emailwizardry.com.au/
http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/...
Thankyou
@cathyblabla
cathyl@campaignmonitor.com
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Send beautiful - responsive! - emails
Upcoming SlideShare
Loading in …5
×

Send beautiful - responsive! - emails

2,047 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,047
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Send beautiful - responsive! - emails

  1. 1. Send beautiful (responsive!) emails RESPOND Conference, 5th February 2014 Cathy Lill @cathyblabla
  2. 2. HTML Email is a challenge.
  3. 3. Responsive HTML email presents an added layer of complexity.
  4. 4. Keep it simple.
  5. 5. Provide a text only version Responsive is built in!
  6. 6. First a quick HTML email refresher...
  7. 7. We’ll be needing some of these... http://www.flickr.com/photos/furniturelosangeles/6601840323
  8. 8. ● ● ● ● Inline all CSS. Use tables for layout. Use HTML attributes where possible. Don’t rely on default tag rendering.
  9. 9. Now lets make it responsive!
  10. 10. With nested tables... http://solidteak.in/NestedTables/Default.asp?Fname=NT-003
  11. 11. ...and hacks
  12. 12. Reliable responsive layouts ● This method does not rely on media queries for collapsing layout. ● Columns must be wider than mobile width to be fluid.
  13. 13. 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.
  14. 14. 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.
  15. 15. 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.
  16. 16. http://h4x0r3d.tumblr.com/post/32249574819/keep-calm-and-hack-the-planet
  17. 17. Max-width for Outlook and Lotus Notes ● Use conditional comments. ● Add an additional table wrapper with maxwidth hardcoded in the width attribute.
  18. 18. Max-width for Apple Mail ● Use a media query to set max-width on responsive tables.
  19. 19. 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.
  20. 20. 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.
  21. 21. 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.
  22. 22. Resources
  23. 23. Testing Litmus http://www.litmus.com Email on Acid http://www.emailonacid.com
  24. 24. Validation W3C validation service http://www.validator.w3.org
  25. 25. Tools from Campaign Monitor http://www.campaignmonitor.com/resources
  26. 26. Too much hassle? Try our handy WYSIWYG template builder! http://www.campaignmonitor.com/templates/
  27. 27. 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/
  28. 28. Thankyou @cathyblabla cathyl@campaignmonitor.com

×