Responsive Email Presentation

339 views

Published on

Responsive Design in Email

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
339
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Email Presentation

  1. 1. RESPONSIVE EMAIL EMAILS THAT RESPOND. Created by Mike Louviere / @malouviere
  2. 2. PHILOSOPHY Responsive Design is now standard. Going into 2014 it's time to apply what we've learned and adapt it to email.
  3. 3. WHY RESPONSIVE EMAIL Email Statistics Webmail: 19.0 % Desktop: 29.0 % Mobile: 52.0 % According to PEW Research Center at least 52% of consumers use their mobile devices for reading and accessing some type of email
  4. 4. WHY RESPONSIVE EMAIL Email Opens Source: emailmonday.com 60 Percentage 50 40 30 20 10 Jan' 13 Feb' 13 Mar' 13 Apr' 13 May' 13 Jun' 13 Jul' 13 Aug' 13 Sep' 13 Oct' 13 In 2013 mobile email opens increased by 21% and will account for up to 70% of email opens depending on target audience, product and email types. Nov' 13
  5. 5. WHY RESPONSIVE EMAIL Time Spent on Mobile Devices Reading Email: 7.6 % Responding to Sue's Meeting Invites: 92.4 % Highcharts.com On average 9 minutes of our day is spent reading email on our device, or 7.6% of the total 119 minutes we spend on our phone per day.
  6. 6. BUT SERIOUSLY, EMAIL IS IMPORTANT So let's take a look at the good and the bad...
  7. 7. THIS DOESN'T FLY
  8. 8. HOUZZ THIS USABLE?
  9. 9. CAN YOU DIGG IT?
  10. 10. SOMETHING, SOMETHING, PLAY ON WORDS
  11. 11. HANSON ENEWSLETTER Before & After
  12. 12. FRAMEWORKS Zurb Ink - http://zurb.com/ink/ Table based layouts? What is this 1999? 580px wrapper, main container for the grid column tables
  13. 13. INK WORKFLOW 12 Column Grid Sub Grids Utility Classes Nesting tables with grids, sub-grids and utility classes create layouts.
  14. 14. SOMETHING TO LOOK FORWARD TO It just works! Similar to standard html emails, you will never experience issues with responsive design in email!
  15. 15. NEVER SAY NEVER.
  16. 16. CHALLENGES AND HURDLES Microsoft word hasn't ruined your life enough Gmail isn't off the hook (or Hotmail, or Yahoo or..) The rest picks and chooses
  17. 17. BEST PRACTICES Set widths on cells, not on tables. Add a table wrapper with a class for styling i.e. "body" Remove white-space between table cells Understand absolute and relative positioning. Avoid short-hand css Bring CSS inline
  18. 18. FINAL TIPS & TRICKS Create images at the largest size needed – this might not be the size at the widest breakpoint Be selective in loading assets – think of the data plans! Re-think navigation for mobile
  19. 19. QUESTIONS? View the Wiki BY MIKE LOUVIERE / HANSON INC

×