Responsive Design in Email

1. RESPONSIVE EMAIL
EMAILS THAT RESPOND.
Created by Mike Louviere / @malouviere

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. 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. 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. 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. BUT SERIOUSLY, EMAIL IS IMPORTANT
So let's take a look at the good and the bad...

7. THIS DOESN'T FLY

8. HOUZZ THIS USABLE?

9. CAN YOU DIGG IT?

10. SOMETHING, SOMETHING, PLAY ON WORDS

11. HANSON ENEWSLETTER
Before & After

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. INK WORKFLOW
12 Column Grid
Sub Grids
Utility Classes
Nesting tables with grids, sub-grids and utility classes create
layouts.

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. NEVER SAY NEVER.

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. 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. 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. QUESTIONS?
View the Wiki
BY MIKE LOUVIERE / HANSON INC