Responsive Email Design
•Download as PPTX, PDF•
3 likes•1,572 views
Slides from the Exact Target 3sixty Live talk: Responsive Email Design by DEG's Adam Seitz and Brian Graves
Recommended
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (20)
Similar to Responsive Email Design
Similar to Responsive Email Design (20)
More from Brian Graves
More from Brian Graves (8)
Recently uploaded
Recently uploaded (20)
Responsive Email Design
- 4. Mobile on the Rise
- 5. Mobile on the Rise 43%Mobile Opens +330% Last 2 Years 11/2012 Mobile surpassed Desktop
- 6. Email Client Market Share
- 7. Email Client Market Share
- 8. some of our major retail brands are seeing 60% of their subscribers viewing on a mobile device
- 9. Designing for Every Screen
- 10. 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
- 11. Designing for email is about embracing flexibility & unknown screen sizes.
- 12. Mobile Aware Skinny Templates Fluid Templates Responsive Several Approaches
- 13. Mobile Aware
- 14. Skinny Templates
- 15. Fluid Templates
- 16. Responsive
- 17. Responsive
- 18. Responsive
- 24. But How is it Actually Done?
- 27. Templates
- 33. Separate Content from Presentation
- 35. 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
- 36. Content Audit Determine if any content types need reduced, rewritten, redesigned, added or removed completely
- 38. Stop thinking in terms of “pages” and start thinking instead of “packages”
- 39. Content Content Packages Header Hero Content Secondary Story Products Footer
- 41. Prioritize Content Create a Content Hierarchy
- 43. Visual Design
- 44. 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>
- 50. Structured Content = Targeted Content
- 51. Structured Content = Targeted Content
- 54. Rewards Network CTR increased by more than 25%
- 55. Deckers 10% increase in CTR 9% increase in mobile opens
- 56. SavvyMom 3x life in CTOR 12% of mobile subscribers clicked vs 6% who opened on desktop
- 57. Crocs 15.63% lift in iPhone ‘read’ engagement 7.66% lift in CTOR
- 58. 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
- 59. Questions?
- 60. Resources
- 61. 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
Editor's Notes
- 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.