Responsive Email: What It Is & Why You Need It

  • View

  • Download

Embed Size (px)


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

Text of Responsive Email: What It Is & Why You Need It

  • 1. HIGHROAD SOLUTIONUSER GROUP CONFERENCEResponsive EmailJune 6, 2013 WASHINGTON, DCRon McGrath, CTOLydia Roberts, Consultant/Web DesignerHighRoad Solution

2. Responsive EmailAre youcreating mobilefriendlyversions of youremails? 3. Email Views by Device 4. Compare Desktop, Weband Mobile 5. Mobile Breakdown 6. Member ExpectationsIf you get a mobile email that doesntlook good, what do you do? 7. Does that mean we have tobuild two versions of ouremails? 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. The GoalProvide people with a good experience it doesnt have to be the exact same experience. Ethan Marcotte, author, Responsive Web Design 10. The GoalNon-responsive Responsive 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. 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. 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. Case Study:Redesign for ResponsiveLeft:A typical, non-responsive layout 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. 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. Final ResultsDesktop View Mobile View 18. Final ResultsBefore Redesign After Redesign andResponsive 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