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
7. Source: Litmus Email client usage worldwide, collected from 251 million email opens.
8. some of our major retail brands are
seeing 60%+ of their subscribers
viewing on a mobile device
9. Source: Litmus Email client usage worldwide, collected from 251 million email opens.
10. Source: Litmus Email client usage worldwide, collected from 251 million email opens.
11.
12.
13.
14. 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
44. 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
45. Templating Engine
• Automated separation of Templates and Content Areas
• The Power of Preprocessors (SASS)
• Easier Iteration
• https://github.com/degdigital/MiddlemanEmailTemplate
50. 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
Editor's Notes
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
