Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Coding for Responsive Email

8,221 views

Published on

Published in: Technology, Business
  • Sex in your area is here: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×