coding for responsive email

Coding ForResponsive 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

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 investment in customer experience.”

- Justine JordanMarketing Director, Litmus

Deckers10% increase in CTR

9% increase in mobile opens

Crocs15.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 ResponsiveDesign Patterns

Scaling Images

Column Drop

Source Order Shift

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

hy-in-responsive-email

/

http://brianleegraves.com/ResponsivePatterns

Patterns: More In Depth

Coding Responsive Emails

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-3-4 across

Styled Text Areas

Commonly used Content Areas

Coding Responsive Emails

Templating Engine• Automated separation of Templates and Content Areas

• The Power of Preprocessors (SASS)

• Easier Iteration

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

Testing

In Browser AutomatedDevice

Non scaling images

Content Overflowing Containers

Padding on 100% width tables

CMS Business Rules & Appended Content

Gotchas

Coding Responsive Emails

Resources

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