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.
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
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
37.
38. Stop thinking in terms of
“pages” and start thinking
instead of “packages”
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
61. 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
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.
