"e" is for "everywhere": Designing email in the mobile age

by Mathew Patterson on Aug 07, 2011

11,298 views

Slides from my Edge of the Web talk in Perth, Australia. ...

Slides from my Edge of the Web talk in Perth, Australia.

Learn how you can design and build your emails to take advantage of the explosion in mobile computing on smartphones and tablets.

Find out what works, what doesn't, and why you should care.

Less

23 Embeds 9,741

http://www.campaignmonitor.com	9080
http://feeds.feedburner.com	407
http://rosdevries.com	84
http://rmatt1.tumblr.com	66
http://www.ig.gmodules.com	54
http://paper.li	11
http://soup.sindre.at	8
http://translate.googleusercontent.com	5
http://www.pindomain.com	3
http://www.inizia.me	3
http://i2.campaignmonitor.com	3
http://www.mala.it	2
http://safe.tumblr.com	2
http://us-w1.rockmelt.com	2
http://tweetedtimes.com	2
http://weblogin1.webroot.com	2
http://i1.campaignmonitor.com	1
http://i4.campaignmonitor.com	1
http://twitter.com	1
http://xianguo.com	1
http://www.protopage.com	1
http://trivialaside.net	1
http://thenewcampaignmonitor.com	1

More...

Statistics

Favorites: 6
Downloads: 0
Comments: 1
Embed Views: 9,741
Views on SlideShare: 1,557
Total Views: 11,298

"e" is for "everywhere": Designing email in the mobile age — Presentation Transcript

‘e’ is foreverywhere email in the mobile age Mat Patterson – @mrpatto

WARNING!Physical movement required

•handsome

•handsome•charming

•handsome•charming•irish

•handsome•charming•irish•wrong

“I hate html email”

70 millionUS mobile email users

80+ milliongroupon subscribers

256%ROI (or more)

4X $average customer

3xC

3xC Context

3xC Context Content

3xC Context Content Coding

ContextContentCoding

Gmail (7%) Outlook (27%) iOS devices (16%) Hotmail (12%)

Opens by client52% Desktop Webmail Mobile0% May 2009 May 2011

Physical context

Physical context screen size

Physical context screen size bandwidth & access

Physical context screen size bandwidth & access touch based

Physical context screen size bandwidth & access touch based environmental factors

Usercontext

ContextContentCoding

right contentright context

35characters

Welcome to your July Newsletter from

Spinal Tap tickets on sale - Tapfans N

preheader

preheader (it’s not sexual)

Lorem

5 tipsfor mobile email design

1 columnunless you are hardcore

480 pxor less, to be safe

44 pxtouch targets 2

m o r e space

contrast more please

ContextContentCoding

structural tables

structural tables inline css

structural tables inline cssexplicit margins

structural tables inline cssexplicit margins nested tables

structural tables inline cssexplicit margins nested tablescheat’s padding

structural tables inline cssexplicit margins nested tablescheat’s padding blocked images

structural tables inline css explicit margins nested tables cheat’s padding blocked imagesplain text version

@media only screen and (max-device-width: 480px) { .hide { display: none !important; } .table, .cell { width: 300px !important; } .divider { height: 1px !important; }}

•hide content•adjust layout•resize images•control font resizing

ﬁx stupid Yahoo! Mail table[class=mytable]

Jeremy Keith is wrong

Jeremy Keith is wrongMobile email is massive

Jeremy Keith is wrongMobile email is massive Context matters

Jeremy Keith is wrong Mobile email is massive Context mattersContent in context matters

Jeremy Keith is wrong Mobile email is massive Context mattersContent in context matters Coding tricks can help

@mrpattomrpatto.com/mobileemail

THE END thanks!

"e" is for "everywhere": Designing email in the mobile age

by Mathew Patterson on Aug 07, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

23 Embeds 9,741

Statistics

"e" is for "everywhere": Designing email in the mobile age — Presentation Transcript