responsive email presentation

RESPONSIVE EMAILEMAILS THAT RESPOND.Created by / Mike Louviere @malouviere

PHILOSOPHYResponsive Design is now standard. Going into 2014 it's time to

apply what we've learned and adapt it to email.

WHY RESPONSIVE EMAILEmail Statistics

Desktop: 29.0 %

Mobile: 52.0 %

Webmail: 19.0 %

According to PEW Research Center at least 52% ofconsumers use their mobile devices for reading and

accessing some type of email

WHY RESPONSIVE EMAILPe

rcen

tage

Email OpensSource: emailmonday.com

Jan' 13 Feb' 13 Mar' 13 Apr' 13 May' 13 Jun' 13 Jul' 13 Aug' 13 Sep' 13 Oct' 13 Nov' 1310

20

30

40

50

60

In 2013 mobile email opens increased by 21% and will accountfor up to 70% of email opens depending on target audience,

product and email types.

WHY RESPONSIVE EMAILTime 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 ourdevice, or 7.6% of the total 119 minutes we spend on our phone

per day.

BUT SERIOUSLY, EMAIL IS IMPORTANTSo 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 ENEWSLETTERBefore & After

FRAMEWORKSZurb Ink - http://zurb.com/ink/

Table based layouts? What is this 1999?

580px wrapper, main container for the grid column tables

INK WORKFLOW12 Column Grid

Sub Grids

Utility Classes

Nesting tables with grids, sub-grids and utility classes createlayouts.

SOMETHING TO LOOK FORWARD TOIt just works! Similar to standard html emails, you will never

experience issues with responsive design in email!

NEVER SAY NEVER.

CHALLENGES AND HURDLESMicrosoft word hasn't ruined your life enough

Gmail isn't off the hook (or Hotmail, or Yahoo or..)

The rest picks and chooses

BEST PRACTICESSet 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

FINAL TIPS & TRICKSCreate 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

QUESTIONS?View the Wiki

BY MIKE LOUVIERE / HANSON INC