Coding for Responsive Email

6,032 views

Published on

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

No Downloads
Views
Total views
6,032
On SlideShare
0
From Embeds
0
Number of Embeds
1,159
Actions
Shares
0
Downloads
131
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • 600 px, multi-column email becomes 320px, single column
  • • Fluid grids• Fluid images• Media queries
  • Opens on mobile devices consistently averaging 42%Mobile opens have increased 330% in the last 2 yearsMobile overtook desktop & webmail in November 2012
  • Averaging 43% of opens on mobile devices330% increase of the last 2 yearsMobile surpassed desktop and webmail as the top environment in November 2012
  • • Fluid grids• Fluid images• Media queries
  • 600 or 620 no longer works, we have to contend with massive
  • But even still
  • 1999 for webmail and outlook clients, 2013 for mobile and basically anything AppleStill HTML tables for layoutInline Styles means:Desktop down instead of mobile first
  • Think through elements will break downgood time to add classesAside: real content vs all images
  • Think through elements will break downgood time to add classesAside: real content vs all images
  • Packages of contentKaren McGrane: Structured content: discrete content chunks can be combined in different ways for different platforms.
  • ChunkingStory Types, Upsells, Cross Sells, Banners, Defined Hero Content
  • Coding for Responsive Email

    1. 1. Coding For Responsive Email
    2. 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. 3. Source: Campaign Monitor http://www.campaignmonitor.com/guides/mobile/ Responsive Support
    4. 4. Why Use Responsive Design?
    5. 5. Source: Litmus Email client usage worldwide, collected from 251 million email opens.
    6. 6. some of our major retail brands are seeing 60%+ of their subscribers viewing on a mobile device
    7. 7. Source: Litmus Email client usage worldwide, collected from 251 million email opens.
    8. 8. Source: Litmus Email client usage worldwide, collected from 251 million email opens.
    9. 9. More than Metrics “It’s 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. 10. Deckers 10% increase in CTR 9% increase in mobile opens
    11. 11. Crocs 15.63% lift in iPhone ‘read’ engagement 7.66% lift in CTOR
    12. 12. Building Responsive Emails
    13. 13. Code like it’s 1999
    14. 14. Code like it’s 1999 & 2013
    15. 15. Media Queries: Web vs Email
    16. 16. min-width vs max-width
    17. 17. Attribute Selectors
    18. 18. !important
    19. 19. Common Responsive Design Patterns
    20. 20. Scaling Images
    21. 21. Column Drop
    22. 22. Source Order Shift
    23. 23. http://www.degdigital.com/blog/content- choreography-in-responsive-email/ http://brianleegraves.com/ResponsivePatterns Patterns: More In Depth Coding Responsive Emails
    24. 24. Template Strategies & Content Areas
    25. 25. Stop thinking in terms of “pages” and start thinking instead of “packages”
    26. 26. Content Content Packages Header Hero Content Secondary Story Products Footer
    27. 27. Saved Content Areas
    28. 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. 29. Templating Engine • Automated separation of Templates and Content Areas • The Power of Preprocessors (SASS) • Easier Iteration • https://github.com/degdigital/MiddlemanEmailTemplate
    30. 30. Testing
    31. 31. In Browser AutomatedDevice
    32. 32. Non scaling images Content Overflowing Containers Padding on 100% width tables CMS Business Rules & Appended Content Gotchas Coding Responsive Emails
    33. 33. Resources
    34. 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

    ×