Ron McGrath, HighRoad Solution's CTO & Co-Founder, and Lydia Roberts discuss responsive design and what it means for your email marketing.

1. HIGHROAD SOLUTION
USER GROUP CONFERENCE
Responsive Email
June 6, 2013 • WASHINGTON, DC
Ron McGrath, CTO
Lydia Roberts, Consultant/Web Designer
HighRoad Solution

2. Responsive Email
Are you
creating mobile
friendly
versions of your
emails?

3. Email Views by Device

4. Compare Desktop, Web
and Mobile

5. Mobile Breakdown

6. Member Expectations
If you get a mobile email that doesn’t
look good, what do you do?

7. Does that mean we have to
build two versions of our
emails?

8. 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.

9. The Goal
Provide people with a good experience –
it doesn't have to be the exact same experience.
– Ethan Marcotte, author, Responsive Web Design

10. The Goal
Non-responsive Responsive

11. 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 »

12. 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.

13. Best Practices
• 13px minimum font size
• Touch-friendly buttons
Apple 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

14. Case Study:
Redesign for Responsive
Left:
A typical, non-
responsive layout

15. 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

16. 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

17. Final Results
Desktop View Mobile View

18. Final Results
Before Redesign After Redesign and
Responsive Coding

19. 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