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
Provide optimal experience regardless of device
Easy reading and interactions without scrolling or
zooming
Fluid Layouts
F...
Source: Campaign Monitor http://www.campaignmonitor.com/guides/mobile/
Responsive Support
Why Use Responsive Design?
Source: Litmus Email client usage worldwide, collected from 251 million email opens.
some of our major retail brands are
seeing 60%+ of their subscribers
viewing on a mobile device
Source: Litmus Email client usage worldwide, collected from 251 million email opens.
Source: Litmus Email client usage worldwide, collected from 251 million email opens.
More than Metrics
“It’s more than just metrics. The experience
on mobile matters. Responsive design is a
long term investm...
Deckers
10% increase in CTR
9% increase in mobile opens
Crocs
15.63% lift in iPhone ‘read’ engagement
7.66% lift in CTOR
Building Responsive Emails
Code like it’s 1999
Code like it’s 1999
& 2013
Media Queries: Web vs Email
min-width vs max-width
Attribute Selectors
!important
Common Responsive
Design Patterns
Scaling Images
Column Drop
Source Order Shift
http://www.degdigital.com/blog/content-
choreography-in-responsive-email/
http://brianleegraves.com/ResponsivePatterns
Pat...
Template Strategies
& Content Areas
Stop thinking in terms of
“pages” and start thinking
instead of “packages”
Content Content Packages
Header
Hero Content
Secondary Story
Products
Footer
Saved Content Areas
Feature – several styles
All Image – flexible, variable height
Articles – primary, secondary
Product – feature, upsells, 2...
Templating Engine
• Automated separation of Templates and Content Areas
• The Power of Preprocessors (SASS)
• Easier Itera...
Testing
In Browser AutomatedDevice
Non scaling images
Content Overflowing Containers
Padding on 100% width tables
CMS Business Rules & Appended Content
Gotch...
Resources
More Resources
Degdigital.com/blog
BrianLeeGraves.com/ResponsivePatterns
Blog.exacttarget.com/blog/email-design-4
Zurb: Re...
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
Coding for Responsive Email
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Doppler Academy: Cómo maquetar una Campaña de Email en HTML
Next
Upcoming SlideShare
Doppler Academy: Cómo maquetar una Campaña de Email en HTML
Next
Download to read offline and view in fullscreen.

Share

Coding for Responsive Email

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • HectorPerezHernandez

    Mar. 16, 2019
  • j0nharris

    Feb. 8, 2018
  • rubiaferdias

    Apr. 8, 2016
  • Pantiux

    Dec. 23, 2015
  • ValentinaFerrari7

    Nov. 16, 2015
  • zoomo

    Jun. 11, 2015
  • darekmoleda

    May. 18, 2015
  • BanterMediaSA

    Apr. 20, 2015
  • ssusere1c342

    Jan. 31, 2015
  • jebeor

    Apr. 12, 2014
  • monkeyman_gibbo

    Jan. 17, 2014
  • igorsaraiva

    Sep. 5, 2013

Views

Total views

8,860

On Slideshare

0

From embeds

0

Number of embeds

2,408

Actions

Downloads

162

Shares

0

Comments

0

Likes

12

×