Your SlideShare is downloading. ×
0
Responsive
Email Design
Why Responsive?
Mobile on the Rise
Mobile on the Rise

43% +330% 11/2012
Mobile Opens

Last 2 Years

Mobile 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 a...
Designing for email is about embracing flexibility
& unknown screen sizes.
Several Approaches
Mobile Aware
Skinny Templates
Fluid Templates
Responsive
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 us...
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”
Header

Hero Content

Secondary Story

Products

Footer

Content

Content Packages
Prioritize Content

Create a Content Hierarchy
Responsive Wireframes
Visual Design
Code
<td class="main_cta" style=“font-size: 14px;">
Main CTA!
</td>

@media only screen and (max-width: 599px) {
td[class=...
Implement & Execute
Implement & Execute
Implement & Execute
Implement & Execute
Structured Content = Targeted Content
Structured Content = Targeted Content
Responsive Results
Rewards Network
CTR increased by more than 25%
Deckers
10% increase in CTR
9% increase in mobile opens
SavvyMom
3x life in CTOR
12% of mobile subscribers clicked vs 6% who opened on desktop
Crocs
15.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 investm...
Questions?
Resources
Resources
Blogs, Stats, & Patterns

Twitter

Degdigital.com/blog

@adamseitz

BrianLeeGraves.com/ResponsivePatterns

@bria...
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Upcoming SlideShare
Loading in...5
×

Responsive Email Design

2,626

Published on

Brian Graves, UI Engineer for DEG and Adam Seitz, Director of Creative for DEG present on Responsive Email Design.

Our options for viewing emails has proliferated beyond the desktop: we now have web-enabled mobile phones and tablets. Learn from DEG's experts how emails can be coded with Responsive Design to respond and render well for all devices.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,626
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Averaging 43% of opens on mobile devices330% increase of the last 2 yearsMobile surpassed desktop and webmail as the top environment in November 2012
  • Not Siloed - People move fluidly between devices, often choosing a mobile device even when they have access to a desktop computer. Don’t assume you can design for “the on-the-go user” because people use their mobile devices anywhere and everywhere.You should aim for content parity between your desktop and your mobile experiencesNever force users to go to the desktop website for content they’re seeking on a mobile device.
  • Simple improvement without specialization.Design-only tacticsSingle column heroKey info &amp; CTA in left columnLarge text &amp; buttons
  • Skinny single column and large, readable text create a style that translates seamlessly across environments.Still Fixed Width. 420 pixels wide.
  • Use percentages for widthsAdapts to fill the screen it’s viewed on; text wraps automaticallyContent doesn’t change in design or placementEffective for simple layouts
  • 600 px, multi-column email becomes 320px, single column
  • • Fluid grids• Fluid images• Media queries
  • Allows for lots of creative freedom but less ability to quickly and easily target content based on data, automation, and segmentationWhat do we know about our subscribers? &gt; What do we know about THIS subscriber?WYSIWYG is problematic because it encourages embedding formatting in content, the designs will display beautifully— on the desktop. Content &amp; Assets are tied to a single email &amp; a single screen
  • Allows for lots of creative freedom but less ability to quickly and easily target content based on data, automation, and segmentationWhat do we know about our subscribers? &gt; What do we know about THIS subscriber?WYSIWYG is problematic because it encourages embedding formatting in content, the designs will display beautifully— on the desktop. Content &amp; Assets are tied to a single email &amp; a single screen
  • Allows for lots of creative freedom but less ability to quickly and easily target content based on data, automation, and segmentationWhat do we know about our subscribers? &gt; What do we know about THIS subscriber?WYSIWYG is problematic because it encourages embedding formatting in content, the designs will display beautifully— on the desktop. Content &amp; Assets are tied to a single email &amp; a single screen
  • Evaluate types of emails and content types within those emails. What’s working? What’s not?Your content is useless unless it supports a key business objective or supports a customer in completing a task.
  • “Don’t penalize users for visiting your site on smaller devices.” – Brad Frost
  • 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
  • Allows for easy rearranging and “mix &amp; match”Chunking
  • Think about your content devoid of any design. What’s the most important? What’s the least?
  • high level content and low-fi graphics to communicate content strategy across devicesDecide how content will reflow across screen sizesQuick way to explore items such as navigation without worrying about things like visual design or brand guidelinesWe typically build out fully responsive html prototypes but this can be done using photoshop, illustrator, balsamiq, or just pen and paperShow Wireframe Demos
  • Does it align with the content strategy/wireframe?Is this able to be coded in an adaptable way (avoiding too many areas to hide/show)Is this a sustainable format to follow for future emails?
  • Media Queries – “Not a line of code, more like a conditional statement that enables alternate styles.” – Justine JordanIf screen size is x, then display yTop Down instead of Mobile First. Yahoo! Fix. !important.Middleman,etc
  • Responsive Base Template
  • Modular Sections
  • Modular Sections
  • Content AbstractedIntroduces new opportunities to automate and target content
  • Responsive Base Template
  • more personalizationmore responsivemore accurate analytics &amp; testingWhen you structure your content you are able to compare types of creative and types of content apples to apples. Unstructured content requires a lot of assumptions. Structure content allows for more accurate tests to determine best performing types and locations for content.Unstructured content requires arbitrary assumptions to say one CTA worked better or one product line performed better because there are too many variables.
  • Transcript of "Responsive Email Design"

    1. 1. Responsive Email Design
    2. 2. Why Responsive?
    3. 3. Mobile on the Rise
    4. 4. Mobile on the Rise 43% +330% 11/2012 Mobile Opens Last 2 Years Mobile surpassed Desktop
    5. 5. Email Client Market Share
    6. 6. Email Client Market Share
    7. 7. some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device
    8. 8. Designing for Every Screen
    9. 9. 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
    10. 10. Designing for email is about embracing flexibility & unknown screen sizes.
    11. 11. Several Approaches Mobile Aware Skinny Templates Fluid Templates Responsive
    12. 12. Mobile Aware
    13. 13. Skinny Templates
    14. 14. Fluid Templates
    15. 15. Responsive
    16. 16. Responsive
    17. 17. Responsive
    18. 18. But How is it Actually Done?
    19. 19. Templates
    20. 20. Responsive Templates
    21. 21. Separate Content from Presentation
    22. 22. A Responsive Workflow
    23. 23. Plan for the Long Term “Design a sustainable responsive framework to streamline planning, content creation, testing and user experience.” - Kristina Huffman Design Practice Lead, ExactTarget
    24. 24. Content Audit Determine if any content types need reduced, rewritten, redesigned, added or removed completely
    25. 25. Stop thinking in terms of “pages” and start thinking instead of “packages”
    26. 26. Header Hero Content Secondary Story Products Footer Content Content Packages
    27. 27. Prioritize Content Create a Content Hierarchy
    28. 28. Responsive Wireframes
    29. 29. Visual Design
    30. 30. Code <td class="main_cta" style=“font-size: 14px;"> Main CTA! </td> @media only screen and (max-width: 599px) { td[class="main_cta"] { font-size: 16px !important; } }
    31. 31. Implement & Execute
    32. 32. Implement & Execute
    33. 33. Implement & Execute
    34. 34. Implement & Execute
    35. 35. Structured Content = Targeted Content
    36. 36. Structured Content = Targeted Content
    37. 37. Responsive Results
    38. 38. Rewards Network CTR increased by more than 25%
    39. 39. Deckers 10% increase in CTR 9% increase in mobile opens
    40. 40. SavvyMom 3x life in CTOR 12% of mobile subscribers clicked vs 6% who opened on desktop
    41. 41. Crocs 15.63% lift in iPhone ‘read’ engagement 7.66% lift in CTOR
    42. 42. 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
    43. 43. Questions?
    44. 44. Resources
    45. 45. Resources Blogs, Stats, & Patterns Twitter Degdigital.com/blog @adamseitz BrianLeeGraves.com/ResponsivePatterns @briangraves Zurb: Responsive Email Templates @emailgirl – Cara Olson Litmus.com/blog @krudz – Kristina Huffman Blog.exacttarget.com/blog/email-design-4/ @meladorri – Justine Jordan Emailclientmarketshare.com @iamelliot – Elliot Ross CampaignMonitor.com/guides/mobile @alexcwilliams – Alex Williams EmailDesignReview.com @litmusapp - Litmus Blog.mailchimp.com @lukew – Luke Wroblewski
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×