HIGHROAD SOLUTIONUSER GROUP CONFERENCEResponsive EmailJune 6, 2013 • WASHINGTON, DCRon McGrath, CTOLydia Roberts, Consulta...
Responsive EmailAre youcreating mobilefriendlyversions of youremails?
Email Views by Device
Compare Desktop, Weband Mobile
Mobile Breakdown
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 devic...
The GoalProvide people with a good experience –it doesnt have to be the exact same experience.– Ethan Marcotte, author, Re...
The GoalNon-responsive Responsive
How Does it Work?HTML (content) and CSS (style) are the foundation ofany website or email.A new version of CSS – CSS3 – gi...
Best Practices• Single Column:Mobile max-width of ~300px• Key Information and CTA at Top• Keep Content Concise:Use teasers...
Best Practices• 13px minimum font size• Touch-friendly buttonsApple recommends minimum targetarea of 44x44px• High Contras...
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• ...
Case Study:Redesign for Responsive• Design is 600px wide fordesktop• Header is easy to read• CTA at top• Buttons look butt...
Final ResultsDesktop View Mobile View
Final ResultsBefore Redesign After Redesign andResponsive Coding
Resources• Takeaway Design for all Inboxes• Anatomy of a Perfect Mobile Email• Emailology Boilerplate code, Tips & Tricks,...
Upcoming SlideShare
Loading in …5
×

Responsive Email: What It Is & Why You Need It

422 views

Published on

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

Published in: Marketing, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
422
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Email: What It Is & Why You Need It

  1. 1. HIGHROAD SOLUTIONUSER GROUP CONFERENCEResponsive EmailJune 6, 2013 • WASHINGTON, DCRon McGrath, CTOLydia Roberts, Consultant/Web DesignerHighRoad Solution
  2. 2. Responsive EmailAre youcreating mobilefriendlyversions of youremails?
  3. 3. Email Views by Device
  4. 4. Compare Desktop, Weband Mobile
  5. 5. Mobile Breakdown
  6. 6. Member ExpectationsIf you get a mobile email that doesn’tlook good, what do you do?
  7. 7. Does that mean we have tobuild two versions of ouremails?
  8. 8. 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.
  9. 9. The GoalProvide people with a good experience –it doesnt have to be the exact same experience.– Ethan Marcotte, author, Responsive Web Design
  10. 10. The GoalNon-responsive Responsive
  11. 11. 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 »
  12. 12. 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.
  13. 13. 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
  14. 14. Case Study:Redesign for ResponsiveLeft:A typical, non-responsive layout
  15. 15. 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
  16. 16. 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
  17. 17. Final ResultsDesktop View Mobile View
  18. 18. Final ResultsBefore Redesign After Redesign andResponsive Coding
  19. 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

×