Create Beautiful Responsive Marketo Emails & Landing Pages... No Coding Required!
Coding for Responsive Email
-
Upload
brian-graves -
Category
Technology
-
view
2.871 -
download
1
Transcript of 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