50
Coding For Responsive Email

Coding for Responsive Email

Embed Size (px)

Citation preview

Page 1: Coding for Responsive Email

Coding ForResponsive Email

Page 2: Coding for Responsive Email

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

Page 3: Coding for Responsive Email
Page 4: Coding for Responsive Email
Page 5: Coding for Responsive Email

Source: Campaign Monitor http://www.campaignmonitor.com/guides/mobile/

Responsive Support

Page 6: Coding for Responsive Email

Why Use Responsive Design?

Page 7: Coding for Responsive Email

Source: Litmus Email client usage worldwide, collected from 251 million email opens.

Page 8: Coding for Responsive Email

some of our major retail brands are

seeing 60%+ of their subscribers

viewing on a mobile device

Page 9: Coding for Responsive Email

Source: Litmus Email client usage worldwide, collected from 251 million email opens.

Page 10: Coding for Responsive Email

Source: Litmus Email client usage worldwide, collected from 251 million email opens.

Page 11: Coding for Responsive Email
Page 12: Coding for Responsive Email
Page 13: Coding for Responsive Email
Page 14: Coding for Responsive Email

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 JordanMarketing Director, Litmus

Page 15: Coding for Responsive Email

Deckers10% increase in CTR

9% increase in mobile opens

Page 16: Coding for Responsive Email

Crocs15.63% lift in iPhone ‘read’ engagement

7.66% lift in CTOR

Page 17: Coding for Responsive Email

Building Responsive Emails

Page 18: Coding for Responsive Email

Code like it’s 1999

Page 19: Coding for Responsive Email

Code like it’s 1999

& 2013

Page 20: Coding for Responsive Email
Page 21: Coding for Responsive Email
Page 22: Coding for Responsive Email
Page 23: Coding for Responsive Email
Page 24: Coding for Responsive Email
Page 25: Coding for Responsive Email
Page 26: Coding for Responsive Email
Page 27: Coding for Responsive Email
Page 28: Coding for Responsive Email
Page 29: Coding for Responsive Email

Media Queries: Web vs Email

Page 30: Coding for Responsive Email

min-width vs max-width

Page 31: Coding for Responsive Email

Attribute Selectors

Page 32: Coding for Responsive Email

!important

Page 33: Coding for Responsive Email

Common ResponsiveDesign Patterns

Page 34: Coding for Responsive Email

Scaling Images

Page 35: Coding for Responsive Email

Column Drop

Page 36: Coding for Responsive Email

Source Order Shift

Page 37: Coding for Responsive Email
Page 38: Coding for Responsive Email

http://www.degdigital.com/blog/content-choreograp

hy-in-responsive-email

/

http://brianleegraves.com/ResponsivePatterns

Patterns: More In Depth

Coding Responsive Emails

Page 39: Coding for Responsive Email

Template Strategies& Content Areas

Page 40: Coding for Responsive Email

Stop thinking in terms of “pages” and start thinking

instead of “packages”

Page 41: Coding for Responsive Email

Content Content Packages

Header

Hero Content

Secondary Story

Products

Footer

Page 42: Coding for Responsive Email
Page 43: Coding for Responsive Email

Saved Content Areas

Page 44: Coding for Responsive Email

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

Page 45: Coding for Responsive Email

Templating Engine• Automated separation of Templates and Content Areas

• The Power of Preprocessors (SASS)

• Easier Iteration

• https://github.com/degdigital/MiddlemanEmailTemplate

Page 46: Coding for Responsive Email

Testing

Page 47: Coding for Responsive Email

In Browser AutomatedDevice

Page 48: Coding for Responsive Email

Non scaling images

Content Overflowing Containers

Padding on 100% width tables

CMS Business Rules & Appended Content

Gotchas

Coding Responsive Emails

Page 49: Coding for Responsive Email

Resources

Page 50: Coding for Responsive Email

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