coding for responsive email

Click here to load reader

Post on 15-May-2015

2.869 views

Category:

Technology

1 download

Embed Size (px)

TRANSCRIPT

  • 1. Coding For Responsive Email

2. Provide optimal experience regardless of device Easy reading and interactions without scrolling or zooming Fluid Layouts Fluid Images Breakpoint Changes (Media Queries) What is Responsive Design? Coding Responsive Emails 3. Source: Campaign Monitor http://www.campaignmonitor.com/guides/mobile/ Responsive Support 4. Why Use Responsive Design? 5. Source: Litmus Email client usage worldwide, collected from 251 million email opens. 6. some of our major retail brands are seeing 60%+ of their subscribers viewing on a mobile device 7. Source: Litmus Email client usage worldwide, collected from 251 million email opens. 8. Source: Litmus Email client usage worldwide, collected from 251 million email opens. 9. More than Metrics Its more than just metrics. The experience on mobile matters. Responsive design is a long term investment in customer experience. - Justine Jordan Marketing Director, Litmus 10. Deckers 10% increase in CTR 9% increase in mobile opens 11. Crocs 15.63% lift in iPhone read engagement 7.66% lift in CTOR 12. Building Responsive Emails 13. Code like its 1999 14. Code like its 1999 & 2013 15. Media Queries: Web vs Email 16. min-width vs max-width 17. Attribute Selectors 18. !important 19. Common Responsive Design Patterns 20. Scaling Images 21. Column Drop 22. Source Order Shift 23. http://www.degdigital.com/blog/content- choreography-in-responsive-email/ http://brianleegraves.com/ResponsivePatterns Patterns: More In Depth Coding Responsive Emails 24. Template Strategies & Content Areas 25. Stop thinking in terms of pages and start thinking instead of packages 26. Content Content Packages Header Hero Content Secondary Story Products Footer 27. Saved Content Areas 28. Feature several styles All Image flexible, variable height Articles primary, secondary Product feature, upsells, 2-3-4 across Styled Text Areas Commonly used Content Areas Coding Responsive Emails 29. Templating Engine Automated separation of Templates and Content Areas The Power of Preprocessors (SASS) Easier Iteration https://github.com/degdigital/MiddlemanEmailTemplate 30. Testing 31. In Browser AutomatedDevice 32. Non scaling images Content Overflowing Containers Padding on 100% width tables CMS Business Rules & Appended Content Gotchas Coding Responsive Emails 33. Resources 34. More Resources Degdigital.com/blog BrianLeeGraves.com/ResponsivePatterns Blog.exacttarget.com/blog/email-design-4 Zurb: Responsive Email Templates Emailclientmarketshare.com CampaignMonitor.com/guides/mobile EmailDesignReview.com Blog.mailchimp.com https://litmus.com/blog/our-favorite- responsive-and-mobile-email-resources @briangraves @emailgirl Cara Olson @degdigital - DEG @krudz Kristina Huffman @meladorri Justine Jordan @iamelliot Elliot Ross @alexcwilliams Alex Williams @litmusapp - Litmus @mparkerbyrd Matt Byrd @rodriguezcommaj Jason Rodriguez @moonstrips Nicole Merlin TwitterBlogs, Stats, & Patterns