HIGHROAD SOLUTIONUSER GROUP CONFERENCE
Responsive Email
June 6, 2013 • WASHINGTON, DC
Ron McGrath, CTO Lydia Roberts, Consultant/Web DesignerHighRoad Solution
Responsive Email
Are you creating mobile friendly versions of your emails?
Email Views by Device
Compare Desktop, Web and Mobile
Mobile Breakdown
Member Expectations
If you get a mobile email that doesn’t look good, what do you do?
Does that mean we have to build two versions of our
emails?
What is Responsive Design?
• An approach to web design that provides an optimal viewing experience across a wide range of devices.
• A responsive website or email has a layout that changes configuration based on what size screen it is viewed on.
The Goal
Provide people with a good experience – it doesn't have to be the exact same experience.– Ethan Marcotte, author, Responsive Web Design
The Goal
Non-responsive Responsive
How Does it Work?
HTML (content) and CSS (style) are the foundation of any website or email.
A new version of CSS – CSS3 – gives us the @media query rule. It's what makes responsive design possible!Support for @media: Android 2.2+, iOS, BlackBerry 6+, Microsoft Windows Phone 7.5+
See full list »
Best Practices
• Single Column:Mobile max-width of ~300px
• Key Information and CTA at Top
• Keep Content Concise:Use teasers instead of lengthy articles. Eliminate table of contents and quick links where possible.
Best Practices
• 13px minimum font size
• Touch-friendly buttonsApple recommends minimum target area of 44x44px
• High Contrast Colors (i.e., dark text on a white background)
• Test, Test, Test across multiple email and device platforms, not just your organization's
Case Study: Redesign for Responsive
Left:
A typical, non-responsive layout
Case Study: Redesign for Responsive
• Design is too wide
• Header dates hard to read/cut off on narrow screens
• CTA at bottom
• Can't see links in sidebar, sidebar looks too similar to button
• Icons too small to tap
Case Study: Redesign for Responsive
• Design is 600px wide for desktop
• Header is easy to read
• CTA at top
• Buttons look button-y!
• Key info and Details in two columns below CTA
• Icons made larger and Share button added
Final Results
Desktop View Mobile View
Final Results
Before Redesign After Redesign and Responsive Coding
Resources
• Takeaway Design for all Inboxes
• Anatomy of a Perfect Mobile Email
• Emailology Boilerplate code, Tips & Tricks, Troubleshooting
• Campaign Monitor Guide to Responsive Email Design
• Which devices support media queries?
• Mail Chimp Guide to Email on Mobile Devices
• Yahoo! Mail issues with @media queries
• Examples of Responsive Emails by Marketing Land
• MORE Examples of Responsive Emails