Responsive Email Design
-
Upload
etcommunitieskc -
Category
Design
-
view
2.342 -
download
0
description
Transcript of Responsive Email Design
ResponsiveEmail Design
Why Responsive?
Mobile on the Rise
Mobile on the Rise
43%Mobile Opens
+330%Last 2 Years
11/2012Mobile surpassed Desktop
Email Client Market Share
Email Client Market Share
some of our major retail brands are
seeing 60% of their subscribers
viewing on a mobile device
Designing for Every Screen
Designing for Every Screen
• Desktop & Webmail still make up 32% and 20% of the market
• Email is not Siloed – Customers access from multiple devices
• Aim for Content Parity between desktop & mobile
Designing for email is about embracing flexibility & unknown screen sizes.
Mobile Aware
Skinny Templates
Fluid Templates
Responsive
Several Approaches
Mobile Aware
Skinny Templates
Fluid Templates
Responsive
Responsive
Responsive
But How is it Actually Done?
Templates
Responsive Templates
Separate Content from Presentation
A Responsive Workflow
Plan for the Long Term
“Design a sustainable responsive framework to streamline planning, content creation, testing and user experience.”
- Kristina HuffmanDesign Practice Lead, ExactTarget
Content Audit
Determine if any content types need reduced, rewritten, redesigned, added
or removed completely
Stop thinking in terms of “pages” and start thinking
instead of “packages”
Content Content Packages
Header
Hero Content
Secondary Story
Products
Footer
Prioritize Content
Create a Content Hierarchy
Responsive Wireframes
Visual Design
Code
@media only screen and (max-width: 599px) { td[class="main_cta"] { font-size: 16px !important; }}
<td class="main_cta" style=“font-size: 14px;">Main CTA!
</td>
Implement & Execute
Implement & Execute
Implement & Execute
Implement & Execute
Structured Content = Targeted Content
Structured Content = Targeted Content
Responsive Results
Rewards NetworkCTR increased by more than 25%
Deckers10% increase in CTR
9% increase in mobile opens
SavvyMom3x life in CTOR
12% of mobile subscribers clicked vs 6% who opened on desktop
Crocs15.63% lift in iPhone ‘read’ engagement
7.66% lift in CTOR
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
Questions?
Resources
Resources
Degdigital.com/blog
BrianLeeGraves.com/ResponsivePatterns
Zurb: Responsive Email Templates
Litmus.com/blog
Blog.exacttarget.com/blog/email-design-4/
Emailclientmarketshare.com
CampaignMonitor.com/guides/mobile
EmailDesignReview.com
Blog.mailchimp.com
@adamseitz
@briangraves
@emailgirl – Cara Olson
@krudz – Kristina Huffman
@meladorri – Justine Jordan
@iamelliot – Elliot Ross
@alexcwilliams – Alex Williams
@litmusapp - Litmus
@lukew – Luke Wroblewski
TwitterBlogs, Stats, & Patterns