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

Responsive Email Design

on

  • 1,168 views

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

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

Statistics

Views

Total Views
1,168
Views on SlideShare
1,167
Embed Views
1

Actions

Likes
3
Downloads
20
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Responsive Email Design Presentation Transcript

  • ResponsiveEmail Design
  • Why Responsive?
  • Mobile on the Rise
  • Mobile on the Rise43%Mobile Opens+330%Last 2 Years11/2012Mobile surpassed Desktop
  • Email Client Market Share
  • Email Client Market Share
  • some of our major retail brands areseeing 60% of their subscribersviewing 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 AwareSkinny TemplatesFluid TemplatesResponsiveSeveral 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 frameworkto streamline planning, content creation,testing and user experience.”- Kristina HuffmanDesign Practice Lead, ExactTarget
  • Content AuditDetermine if any content types need reduced,rewritten, redesigned, addedor removed completely
  • Stop thinking in terms of“pages” and start thinkinginstead of “packages”
  • Content Content PackagesHeaderHero ContentSecondary StoryProductsFooter
  • Prioritize ContentCreate 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 CTR9% increase in mobile opens
  • SavvyMom3x life in CTOR12% of mobile subscribers clicked vs 6% who opened on desktop
  • Crocs15.63% lift in iPhone ‘read’ engagement7.66% lift in CTOR
  • 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
  • Questions?
  • Resources
  • 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