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

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

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

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

Responsive Email Design

Design

Transcript of Responsive Email Design