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