Your SlideShare is downloading. ×
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Responsive Email: What It Is & Why You Need It
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Email: What It Is & Why You Need It

113

Published on

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

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
113
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 doesn’tlook 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

×