RESPONSIVE EMAIL
EMAILS THAT RESPOND.
Created by Mike Louviere / @malouviere
PHILOSOPHY
Responsive Design is now standard. Going into 2014 it's time to
apply what we've learned and adapt it to email.
WHY RESPONSIVE EMAIL
Email Statistics
Webmail: 19.0 %
Desktop: 29.0 %

Mobile: 52.0 %

According to PEW Research Center at...
WHY RESPONSIVE EMAIL
Email Opens
Source: emailmonday.com
60

Percentage

50

40

30

20

10

Jan' 13

Feb' 13

Mar' 13

Ap...
WHY RESPONSIVE EMAIL
Time Spent on Mobile Devices
Reading Email: 7.6 %

Responding to Sue's Meeting Invites: 92.4 %
Highch...
BUT SERIOUSLY, EMAIL IS IMPORTANT
So let's take a look at the good and the bad...
THIS DOESN'T FLY
HOUZZ THIS USABLE?
CAN YOU DIGG IT?
SOMETHING, SOMETHING, PLAY ON WORDS
HANSON ENEWSLETTER
Before & After
FRAMEWORKS
Zurb Ink - http://zurb.com/ink/

Table based layouts? What is this 1999?
580px wrapper, main container for the ...
INK WORKFLOW
12 Column Grid
Sub Grids
Utility Classes
Nesting tables with grids, sub-grids and utility classes create
layo...
SOMETHING TO LOOK FORWARD TO
It just works! Similar to standard html emails, you will never
experience issues with respons...
NEVER SAY NEVER.
CHALLENGES AND HURDLES
Microsoft word hasn't ruined your life enough
Gmail isn't off the hook (or Hotmail, or Yahoo or..)
...
BEST PRACTICES
Set widths on cells, not on tables.
Add a table wrapper with a class for styling i.e. "body"
Remove white-s...
FINAL TIPS & TRICKS
Create images at the largest size needed – this might not be
the size at the widest breakpoint
Be sele...
QUESTIONS?
View the Wiki

BY MIKE LOUVIERE / HANSON INC
Upcoming SlideShare
Loading in...5
×

Responsive Email Presentation

151

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
151
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×