Responsive emails and ZURB Foundation for email
3 likes879 views
The document discusses responsive email design, highlighting supported and unsupported email platforms, as well as best practices for creating mobile-optimized emails. It emphasizes the importance of responsive design, pointing out that a significant portion of email interactions occur on mobile devices, and provides tips for effective email layout and coding. Tools like Zurb Foundation and Inky are mentioned as valuable resources for simplifying complex HTML requirements in email development.
Responsive emails and ZURB Foundation for email
- 3. responsive emails are supported by: ● iOS Mail app ● Android 4.x Email (OEM) app ● Windows Phone 7.5 ● BlackBerry OS7 ● BlackBerry Z10 ● iPhone Gmail app ● Android Gmail app ● Windows Phone 8 (partial supported) ● Windows Phone 10 (partial supported) are not supported by: ● iPhone Mailbox app ● iPhone Yahoo! Mail app ● Android Yahoo! Mail app ● BlackBerry OS5 ● Windows Mobile 6.1 ● Windows Phone 7 ●
- 5. 150 t/day studies find people look at their phones an avg of 150 times/day
- 6. 47% of email opens happen on mobile devices*
- 7. 6x transactional emails can produce over 6 times the revenue than generic marketing emails.
- 9. Movable Ink “US Consumer Device Preference Report: Q3 2014″ (2014)
- 10. When do people check their email on mobile? Movable Ink “US Consumer Device Preference Report: Q3 2014″ (2014)
- 11. 45% of consumers have unsubscribed from a brand’s promotional email because the brand’s emails or website dind’t display or work well on their smartphone
- 12. 34% of consumers have marked a brand’s promotional emails as spam because they didn’t display or work well on their smartphone
- 13. 79% of people delete or unsubrscibe an email if it doesn’t look good on their mobile device
- 14. #ResponsiveEmailDesign “Using fluid tables, fluid images, and media queries to control the layout of an email across different device sizes.”
- 15. who can help us in our job
- 16. some tools (web app)
- 17. but if I have to build it myself?
- 18. email development pain points
- 19. email development = back to the ‘90s CSS layout as we think, just doesn’t work HTML Tables, and tables, and tables,... CSS inline styles CSS proprieties (campaignmonitor.com/css) Picture by http://www.guestfolio.com/
- 21. 600px → 320px single column layout: the best option
- 22. background image use Background Images Sparingly
- 23. <table> code all structure using the table element for more complicated layouts, nest tables
- 25. system font web fonts are not widely supported in email, web-safe fonts like Arial, Helvetica, Tahoma, Times Roman, and Georgia.
- 26. 13-14 px text 20-22 px title much more readable on a small screen
- 27. CTA minimum size: 44 x 44px place above the fold
- 28. images use only absolute links for images
- 29. alt=“Use me” don’t assume that the images will be always seen see how design the not display image text on Litmus
- 30. !important in order to remove the blue link on iOS use color: #333 !important;
- 32. phone numbers provide tappable phone numbers for mobile, so users can easily call with a single touch
- 33. 30 characters limit subject lines to 30 characters or less
- 34. restrict the length … of your emails, subscribers often skim first, deleting any email that’s too long to easily read on mobile
- 35. some email development tips ● Nest tables for consistent spacing ● Use Inline CSS ● set widths in each cell rather than on the table ● Set a Background color on a container table ● Whitespace does matter ● Avoid relying on Images ● Don’t use an image as the first item in your email ● Use ALT attributes ● Always have texts and images ● Don’t inline CSS until you have finished to coding ● Use email tool will automatically inline your CSS (e.g.: ZURB Inliner or Campaign Monitor) ● Use, if you can, a template ● Don’t use all-image emails ● Create a preview text in an hidden <div> ● CSS targeting via attribute selectors Source: campaignmonitor.com
- 36. but we are on the 2016 a lot of tools could help us
- 37. ZURB foundationfor email ● responsive grid for any layout ● common UI patterns to build faster ● make stylish emails fast with SASS ● spend less time testing & preparing
- 38. SASS version Requirements: ● Node.js ● foundation-cli ● Inky HTML ● Sass ● Handlebars templates ● BrowserSync ● Image compression ● Inlining ● Gulp $ foundation watch (work) $ foundation build (live)
- 39. inky: templating language “Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails. HTML emails require tables upon tables upon tables to work properly. Although Foundation for Emails takes a lot of the pain out of constructing these tables, we've made it even easier with Inky, a templating language that converts simple HTML tags like <row> and <columns> into complex table HTML.” Base tags: ● Grid: ○ <container> ○ <row> ○ <columns> ● Button: <button> ● Callout: <callout> ● Menu: ○ <menu> ○ <item>
- 40. inky: a templating language by ZURB Foundation <container> <row> <columns>This is a column.</columns> </row> </container> <table class="container"> <tbody> <tr> <td> <table class="row"> <tbody> <tr> <th class="small-12 large-12 columns first last"> <table> <tr> <th>This is a column.</th> <th class="expander"></th> </tr> </table> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table>
- 41. inky: button <button href="#">Button</button> <table class="button"> <tr> <td> <table> <tr> <td><a href="#">Button</a></td> </tr> </table> </td> </tr> </table>
- 42. inky: coloring <button href="#" class="alert"> Alert Button </button> <table class="button alert"> <tr> <td> <table> <tr> <td><a href="#">Alert Button</a></td> </tr> </table> </td> </tr> </table>
- 43. inky: column <columns> This is a column. </columns> <th class="small-12 large-12 columns first last"> <table> <tr> <th>This is a column.</th> <th class="expander"></th> </tr> </table> </th>
- 44. inky: row <container> <row> Columns go here </row> </container> <table align="center" class="container"> <tbody> <tr> <td> <table class="row"> <tbody> <tr> Columns go here </tr> </tbody> </table> </td> </tr> </tbody> </table>
- 45. inky: spacer <p>Stuff on top</p> <spacer size="100"></spacer> <p>Stuff on bottom</p> <p>Stuff on top</p> <table class="spacer"> <tbody> <tr> <td height="100px" style="font-size:100px;line-height:100px;">   </td> </tr> </tbody> </table> <p>Stuff on bottom</p>
- 47. litmus.com ● email previews ● builder ● checklist ● spam testing ● page testing ● email Analytics
- 49. or / and
- 51. Useful links ➔ The Ultimate Guide to CSS ➔ Coding your emails ➔ Foundation for Emails 2 ➔ Litmus Blog ➔ Responsive email design ➔ Emailmonday
- 52. Thank you