Responsive HTML Emails

3,182 views

Published on

Fluid, flexible, and responsive techniques are well-known for the web, but applying those concepts to email is misunderstood at best and appalling to web designers at worst.

This presentation covers the application of responsive concepts within the famously standards-adverse universe of email; how to successfully approach a responsive email project (and live through it); examples of well-known brands building awesome responsive emails, and more!

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

  • Be the first to like this

No Downloads
Views
Total views
3,182
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive HTML Emails

  1. 1. Responsive HTML Emails
  2. 2. Who Am I? Justine Jordan Wearer of Many Hats, Litmus
  3. 3. @meladorri @litmusapp #RWDsummit
  4. 4. Disclaimer: I am not a web designer.
  5. 5. Disclaimer: I love email.
  6. 6. Why email? with thanks to Andy Warhol
  7. 7. Where do users read email? Mobile: Smartphones (iPhone, Android) and tablets Desktop: Installed email programs (Outlook, Apple Mail) Webmail: Email accessed through a web browser (Gmail, Hotmail, Yahoo!) Source: Litmus Email Analytics 25% Webmail 48% Mobile 27% Desktop #RWDsummit 7
  8. 8. Looking back to 2011… Source: Litmus Email Analytics 0% 10% 20% 30% 40% 50% 60% 70% Desktop Webmail Mobile 10% 33% 50% #RWDsummit 8
  9. 9. Users do not always conform to averages < 15% read on mobile70%+ read on mobile #RWDsummit 9
  10. 10. Their experiences o en suck. 10
  11. 11. Their experiences o en suck. great app great site not-so-great email 11
  12. 12. great site not-so-great email Their experiences o en suck. email receipt requested from an ATM transaction! 12
  13. 13. Email is a unique medium with unique considerations
  14. 14. Email is not a jpg a print ad a one-page website
  15. 15. Email is not a jpg a print ad a one-page website
  16. 16. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site Email user flow Subscriber experience 16
  17. 17. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 17
  18. 18. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 18
  19. 19. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 19
  20. 20. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 20
  21. 21. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site <div style="line-height:1px;font-size:1px;color:#FFFFFF;display:none;"> Hey Justine, Up for sharing something about yourself with the rest of the company? </div> 21
  22. 22. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 22
  23. 23. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 23
  24. 24. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 24
  25. 25. From name Subject line Preheader Open Tap/Click Page/Site Inbox Email/Body Page/Site 25
  26. 26. Some ways that email and the web are the same #RWDsummit Email HTML CSS Images Text Design Links Hierarchy Web HTML CSS Images Text Design Links Hierarchy ✔ ✔ ✔ ✔ ✔ ✔ ✔ 26
  27. 27. Web <div> <h1> <p> em <style> background-color margin Some ways that email and the web are different #RWDsummit Email <table> <td> <td> px style=“font-face” bgcolor padding 27
  28. 28. Wide variety of ways to access email Remember the browser wars? 29
  29. 29. @media support in email iPhone native yes iPad native yes Android 2.1 native no Android 2.2 native yes Android 2.3 native yes Android 4.x native yes Gmail mobile apps no Mailbox iOS app sorta h p://stylecampaign.com/blog/2012/10/responsive-email-support/ Yahoo! mobile apps no Windows Mobile 7 no Windows Mobile 7.5 yes Windows Mobile 8 maybe BlackBerry OS 6 yes BlackBerry OS 7 yes BlackBerry Z10 yes Kindle Fire native yes Previewing your responsive HTML email in some modern browsers won’t work so well, either. 30
  30. 30. So how in the world do you make these things responsive?
  31. 31. Responsive email is o en more like adaptive web design 32
  32. 32. This probably looks familiar… @media screen and (max-width: 525px) 33
  33. 33. …but with some email quirks thrown in table[class="wrapper"]{ width:100% !important; } td[class="logo"]{ text-align: left; padding: 20px 0 20px 0 !important; } img[class="mobile-hide"]{ display: none !important; } img[class="img-max"]{ max-width: 100%; height:auto; } 34
  34. 34. …but with some email quirks thrown in table[class="wrapper"]{ width:100% !important; } td[class="logo"]{ text-align: left; padding: 20px 0 20px 0 !important; } img[class="mobile-hide"]{ display: none !important; } img[class="img-max"]{ max-width: 100%; height:auto; } 35
  35. 35. Play nice with Outlook table[class="wrapper"]{ width:100% !important; } 36
  36. 36. Making images fluid #RWDsummit img[class=“img-max”] { width:100% !important; height: auto !important; } <img src=“path/to.jpg” width=“500” height=“200” border=“0” alt=“A fluid image in email!” style=“display: block; padding: 0; color: #ffffff; font-family: Helvetica, arial, sans-serif; font-size: 16px;” class=“img-max”> height and width for the desktop view border to prevent, well, borders alt a ribute for accessibility and defensive design/image blocking inline style for hacky email stuff fluid image class for smaller screens 37
  37. 37. Multi-column layout wonky support for the box model floats don’t work in Outlook 38
  38. 38. Multi-column layout 39
  39. 39. Multi-column layout <table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table"> <table cellpadding="0" cellspacing="0" border="0" width="47%" align=”right" class="responsive-table"> The important bits… width=“47%” align=“left” align=“right” table[class="responsive-table"]{ width:100%!important; } 40
  40. 40. Bulletproof bu on #RWDsummit table[class="responsive-table"]{ width:100%!important; } <table border="0" cellspacing="0" cellpadding="0" class="responsive-table"> <tr> <td bgcolor="#cccccc" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="https://litmus.com/” style="font- size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none;">Litmus</a> </td> </tr> </table> 41
  41. 41. Super fancy stuff Target mobile webkit browsers (and the email apps that use them) Varying support for some HTML5/CSS3 techniques @media screen and (-webkit-min-device-pixel-ratio:0) -webkit-transform -webkit-keyframes -webkit-animation 42
  42. 42. Use HTML a ributes instead of CSS Not this #fff or rgb background-color shorthand width:100px <style> text-align:le Use this #ffffff bgcolor individual properties width=“100” style=“…” align=“le ” h p://www.campaignmonitor.com/css/ 43
  43. 43. •  24% market share •  Automatically scales to fit •  Excellent support for media queries •  Images on by default •  Resizes fonts under 13px What to know: iPhone #RWDsummit 44
  44. 44. Blue links on iOS 45
  45. 45. Blue links on iOS .appleBody a { color:#ffffff; text-decoration: none; } <tr> <td align="center" style="padding: 10px 0 0 0; font-size: 13px; line-height: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; "> Get away <span class="appleBody">Thurs-Sun</span> </td> </tr> 46
  46. 46. What to know: BlackBerry •  0.097% market share •  Media query support •  Blocks images; supports ALT text •  Does not scale/auto-zoom •  No separate app; email joins social, SMS and voice in the “hub” #RWDsummit 47
  47. 47. What to know: Windows Phone •  0.163% market share •  Mixed media query support •  Inconsistent font display •  Blocks images •  CTAs require 2 clicks for image-based emails •  No ALT text #RWDsummit 48
  48. 48. What to know: Android •  9% market share •  Support for ALT text •  Various screen sizes, OS and app versions •  Mixed support for media queries •  Some auto-scale, some do not #RWDsummit 49
  49. 49. Great responsive emails: Twi er 50
  50. 50. Great responsive emails: Litmus
  51. 51. Great responsive emails: Expedia
  52. 52. Rendering is inconsistent across devices and operating systems Wide variety of ways to access email 54
  53. 53. Testing is crucial #RWDsummit 55
  54. 54. responsiveemailresources.com
  55. 55. #RWDsummit litmus.com/scope
  56. 56. templates.mailchimp.com
  57. 57. modernhtmlemail.com
  58. 58. litmus.com/community
  59. 59. Follow these people #RWDsummit @briangraves @stylecampaign @briangraves @stylecampaign @flcarneiro @iamelliot @rodriguezcommaj @moonstrips @yarrcat @M_J_Robbins @mparkerbyrd @omgitsonlyalex @alexcwilliams
  60. 60. pages.litmus.com/RWDsummit Templates Frameworks Pa erns Tools Articles …more
  61. 61. Thanks! Thanks!

×