Responsive Email Presentation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Email Presentation

  • 131 views
Uploaded on

Responsive Design in Email

Responsive Design in Email

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
131
On Slideshare
127
From Embeds
4
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 4

http://intranet.hansoninc.local 4

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