responsive email design and development

Click here to load reader

Post on 28-Jan-2015

106 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

How to design and code responsive HTML emails. Presented at a UCLA Campus Web Publishers meeting on January 22, 2014.

TRANSCRIPT

  • 1. WHY?

2. STATISTICS 3. Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot 4. Source: https://litmus.com/blog/mobile-opens-hit-44-and-outlook-com-takes-a-dive 5. Source: https://litmus.com/blog/mobile-opens-hit-record-high-of-47?utm_campaign=aug2013news&utm_source=newsletter&utm_medium=email 6. Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot 7. If youre not designing for mobile, youre ignoring half your audience. 8. Source: E-Dialog http://www.e-dialog.com/pdf/smartguides/edialog_responsive_email_design_guide_2013.pdf 9. Source: https://litmus.com/blog/saving-email-for-later-opens-across-devices-environments 10. pinch + zoom mobile optimized 11. DESIGN 12. Step 1Scalable graphics 13. Step 2Increase font size 14. TS;DR(too small; didnt read) 15. scaled images + readable type= single column responsive 16. Limited time? Single column 17. Step 3Manage the ow of content 18. a 19. Step 4Design for mobile viewports 20. Not all mobile clients support @media queries 21. Not all mobile clients scale to t 22. Design for the upper left mobile fold 23. Step 5 Create large touch targets 24. Step 6Communicate structure & hierarchy 25. Step 7Embrace brevity 26. What is this and why do I care? 27. Step 8 Design your microcontent 28. Carefully choose the From: name 29. Shorten and front-load subject lines 30. CODING BASICS 31. HTML emails are not webpages 32. Deprecated code 33. Variable support for HTML + CSS 34. Table-based layouts Lorem Ipsum 35. Stackable tables Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 36. a 37. Nested tables ... ... 38. a a 39. Avoid colspan and rowspan attributes You will regret using this colspan!!! Lorem Ipsum Lorem Ipsum Lorem Ipsum 40. Dene + widths Lorem Ipsum Lorem Ipsum ... ... 41. Doctype 42. HTML validators 43. Dene image width + height 44. HTML entities 45. Use CSS .h1 .h2 .h3 .h4{ { { {font-size:32px; font-size:26px; font-size:21px; font-size:18px;line-height:115%; line-height:130%; line-height:150%; line-height:150%;} } } }.column-full { width:540px; } .column-half { width:260px; } .column-third { width:170px; } .column-quarter { width:130px; } .spacer-xl .spacer-lg .spacer-md .spacer-sm .spacer-xs{ { { { {height:50px; line-height:50px; } height:40px; line-height:40px; } height:30px; line-height:30px; } height:20px; line-height:20px; } font-size:10px; height:10px; line-height:10px; }.border { border-bottom:1px solid #aaaaaa; } .border-thick { border-bottom:5px solid #cccccc; } 46. But inline it 47. Supported CSS /* Font styles */ .text-style { font-family:"Lucida Grande", "Lucida Sans Unicode", "Corbel", "Tahoma", sans-serif; font-size:14px; font-style:italic; font-weight:bold; line-height:1.2em; text-align:left; text-decoration:underline; } 48. Supported CSS /* Color styles */ .color-style { background-color:#F0235B; border:1px solid #999999; color:#FFFFFF; } 49. Unsupported CSS /* Positioning */ .div-position { float:left; position:relative; top:100px; z-index:1; } 50. Unsupported CSS /* Margins */ .h1 { margin:0 0 24px; } .p { margin:0 0 10px; } 51. Avoid elements with default margins Headers and paragraphs have default margin styles

Not all email clients will let you override or zero them out.

52. Font styles on block elements

H1 Header
Paragraph...

H1 Header Paragraph... 53. Vertical spacers /* Vertical spacers for text spacing */ .spacer-xl { height:50px; line-height:50px; } .spacer-lg { height:40px; line-height:40px; } .spacer-md { height:30px; line-height:30px; } .spacer-sm { height:20px; line-height:20px; } .spacer-xs { font-size:10px; height:10px; line-height:10px; } 54. Combine for awless text layout

H1 Header
Paragraph...

H1 Header Paragraph... 55. Partially supported CSS /* Padding */ img { padding:5px; } td { padding:10px; } /* Not fully supported on table, div or p elements */ 56. Partially supported CSS /* Background images */ td { background-image:url("http://..."); } 57. Background image hack

58. Partially supported CSS /* HTML buttons */ a { display:block; } 59. Button hack

Show me the button! a>

60. Guides to CSS Support 61. Microsoft Outlook 2007, 2010, 2013... 62. ...Your Worst Enemy 63. Conditional statements for Outlook 64. RESPONSIVE 65. Fluid grids Fluid media Media queries 66. Source: http://moddify.com/is-android-fragmentation-for-real/ 67. Source: http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions 68. Source: http://devicelab./ 69. Source: 70. Source: http://emailclientmarketshare.com/ 71. Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/ 72. Source: http://www.campaignmonitor.com/guides/mobile/#mobile-support 73. @media @media only screen and (max-width: 599px) { ... } 74. Breakpoints @media only screen and (max-width: 599px) { ... }@media only screen and (max-width: 480px) { ... } 75. Viewport 76. Attribute selectors 77. Percentage widths .container { width:600px; } .column { width:560px; } .gutter { width:20px; } @media only screen and (max-device-width: 599px) { [class=container] { width:100% !important; } [class=column] { width:92% !important; } [class=gutter] { width:4% !important; } } 78. !important declarations .container { width:600px; } .column { width:560px; } .gutter { width:20px; } @media only screen and (max-device-width: 599px) { [class=container] { width:100% !important; } [class=column] { width:92% !important; } [class=gutter] { width:4% !important; } } 79. Fluid images [class=column-half] img { width:100% !important; height:auto !important; max-width:300px !important; } 80. Multi-column layouts ... ... 81. Multi-column CSS .two-column { width:600px; } .two-column .column { width:300px; }@media only screen and (max-width: 599px) { [class=two-column] { width:100% !important; } [class=two-column] [class=column] { width:100% !important; display:block !important; } } 82. a 83. Floated tables require Outlook hack

...Content goes here

...

...Content goes here

84. CSS for Outlook hack .outlook-container-FIX { width:100%; } .outlook-spacing-FIX { mso-table-lspace:0; mso-table-rspace:0; } .half-column { border:1px solid #FBFBF9; } 85. Buggy! 86. Quoi????? 87. Resources 88. Source: https://github.com/ladyheatherly/responsive-email/blob/master/responsive-email-template.html 89. Source: http://briangraves.github.io/ResponsiveEmailPatterns/ 90. Source: 91. Source: https://github.com/mailchimp/Email-Blueprints 92. Thank you!