Responsive Email Design

1,286 views
1,204 views

Published on

Slides from the Exact Target 3sixty Live talk: Responsive Email Design by DEG's Adam Seitz and Brian Graves

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

No Downloads
Views
Total views
1,286
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
36
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 & CTA in left columnLarge text & 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? > 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 & Assets are tied to a single email & 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? > 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 & Assets are tied to a single email & 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? > 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 & Assets are tied to a single email & 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 & 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 & 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.
  • Responsive Email Design

    1. 1. ResponsiveEmail Design
    2. 2. Why Responsive?
    3. 3. Mobile on the Rise
    4. 4. Mobile on the Rise43%Mobile Opens+330%Last 2 Years11/2012Mobile surpassed Desktop
    5. 5. Email Client Market Share
    6. 6. Email Client Market Share
    7. 7. some of our major retail brands areseeing 60% of their subscribersviewing 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. Mobile AwareSkinny TemplatesFluid TemplatesResponsiveSeveral Approaches
    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 frameworkto streamline planning, content creation,testing and user experience.”- Kristina HuffmanDesign Practice Lead, ExactTarget
    24. 24. Content AuditDetermine if any content types need reduced,rewritten, redesigned, addedor removed completely
    25. 25. Stop thinking in terms of“pages” and start thinkinginstead of “packages”
    26. 26. Content Content PackagesHeaderHero ContentSecondary StoryProductsFooter
    27. 27. Prioritize ContentCreate a Content Hierarchy
    28. 28. Responsive Wireframes
    29. 29. Visual Design
    30. 30. 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>
    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 NetworkCTR increased by more than 25%
    39. 39. Deckers10% increase in CTR9% increase in mobile opens
    40. 40. SavvyMom3x life in CTOR12% of mobile subscribers clicked vs 6% who opened on desktop
    41. 41. Crocs15.63% lift in iPhone ‘read’ engagement7.66% lift in CTOR
    42. 42. More than Metrics“It’s more than just metrics. The experienceon mobile matters. Responsive design is along term investment in customer experience.”- Justine JordanMarketing Director, Litmus
    43. 43. Questions?
    44. 44. Resources
    45. 45. ResourcesDegdigital.com/blogBrianLeeGraves.com/ResponsivePatternsZurb: Responsive Email TemplatesLitmus.com/blogBlog.exacttarget.com/blog/email-design-4/Emailclientmarketshare.comCampaignMonitor.com/guides/mobileEmailDesignReview.comBlog.mailchimp.com@adamseitz@briangraves@emailgirl – Cara Olson@krudz – Kristina Huffman@meladorri – Justine Jordan@iamelliot – Elliot Ross@alexcwilliams – Alex Williams@litmusapp - Litmus@lukew – Luke WroblewskiTwitterBlogs, Stats, & Patterns

    ×