Member ExpectationsIf you get a mobile email that doesn’tlook good, what do you do?
Does that mean we have tobuild two versions of ouremails?
What is Responsive Design?• An approach to webdesign that providesan optimal viewingexperience across awide range of devices.• A responsive websiteor email has a layoutthat changesconfiguration based onwhat size screen it isviewed on.
The GoalProvide people with a good experience –it doesnt have to be the exact same experience.– Ethan Marcotte, author, Responsive Web Design
How Does it Work?HTML (content) and CSS (style) are the foundation ofany website or email.A new version of CSS – CSS3 – gives us the @mediaquery rule. Its what makes responsive designpossible!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 lengthyarticles. Eliminate table ofcontents and quick links wherepossible.
Best Practices• 13px minimum font size• Touch-friendly buttonsApple recommends minimum targetarea of 44x44px• High Contrast Colors(i.e., dark text on a white background)• Test, Test, Testacross multiple email and deviceplatforms, not just your organizations
Case Study:Redesign for ResponsiveLeft:A typical, non-responsive layout
Case Study:Redesign for Responsive• Design is too wide• Header dates hard toread/cut off onnarrow screens• CTA at bottom• Cant see links insidebar, sidebarlooks too similar tobutton• Icons too small totap
Case Study:Redesign for Responsive• Design is 600px wide fordesktop• Header is easy to read• CTA at top• Buttons look button-y!• Key info and Details in twocolumns below CTA• Icons made larger and Sharebutton added
Final ResultsBefore Redesign After Redesign andResponsive 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