Responsive email design guide

Anna Yeaman / @stylecampaign
Creative Director at
STYLECampaign.com
Leads the creative team. Also
responsible for customer education,
consulting and mobile boot camps.

#RED
Problem?
What is it?
What’s possible?
What about tablets?
Touch
Performance
@media blind tactics
Testing

41% of emails were
opened on mobile in 2nd
half of 2012
- 14% increase in six months
- 50% increase over same time last year
- Will exceed 50% by end of 2013
http://www.knotice.com/reports/Knotice_Mobile
_Email_Opens_Report_SECONDHalf2012.pdf
Litmus.com to get your mobile stats

One shot: only 2%
will reopen email
on another device
http://www.knotice.com/reports/Knotice_Mobile
_Email_Opens_Report_SECONDHalf2012.pdf

Problem?
( designing for a bijillion screens )

bijillion screens
Multiple builds? No thanks

How wide for fixed-width?
320px 400px 480px
300px 520px 640px

Anna Yeaman
Kindle Fire 7” HD
~500px
Galaxy Nexus
~320px
Note / Smablet
~390px
Fixed-width

Horizontal hierarchy
300px
Smartphones
500px
7”Tablets
700px
Surface

Scalable Responsive
Kindle Fire 7” HD Kindle Fire 7” HD

iPhone scalable iPhone responsive

Responsive
( what is it & how does it work? )

Fluid grids
Fluid media
Media queries
Responsive design

http://alistapart.com/article/responsive-web-design

www.campaignmonitor.com/blog/post/3116/what-you-
can-learn-from-panics-email-marketing/

@media checks screen
properties e.g. width
h

Screen size 800x1280
Viewport 533x731
Kindle Fire 7” HD
Viewport
PPK - http://www.youtube.com/watch?v=4wscVOXjIzQ

@media only screen and
(max-width: 480px)

If the viewport is below
480px, then change the
layout like this…
breakpoint

breakpoints
Similar to key frames in an animation
Muybridge cats

One HTML File
( delivered to all platforms )

Responsive
(fluid grid, fluid media + @media)
480px 640px
Breakpoint Breakpoint
Fluid layout handles In-betweens

Every time you use 'Responsive'
in place of 'Adaptive' a fairy
loses it's wings #RWD
@benedfit

Adaptive layouts
( fixed-width + @media )
480px 640px
Breakpoint Breakpoint
No in-betweens, switches between fixed-width layouts
more

What’s possible?
context switch
multi-platform
product grids
retrofits
navigation
images

Context switch
( adjust hierarchy or offer )

Prioritize content for mobile users

RT @gsterling: Marin: target
users on mobile with device
specific copy; 9%-14% increase
in CTR from doing so #SMX
#22C

Left column for Android Gmail users

Different column on mobile (copy / urls / code)

Multi-platform
“The world is going mobile, which means
our customers are going mobile”
– Cameron Nouri, Marketing Manager at Rackspace

iPhone
Galaxy Nexus
Old
skinny 480px

2 BB running Vr. 7.1 Bold & Curve (9900 / 9320)

ANCHOR TAG SUPPORT (ID + name)
iPhone Yes (2X TAPS) Surface Yes (Outlook.com)
iPad Yes (2X TAPS) WP7 Yes
iPod Touch Yes (2X TAPS) WP7.5 Yes
Android 2.1 No BB 7.1 Yes (also live.com)
Android 2.2 Yes Kindle Fire Gmail No
Android 2.3 Yes Kindle Fire HD No
Android 4.0 No Outlook 07 + 2010 (desktop) Yes
Android 4.1.2 No Gmail Firefox (desktop) Yes
K9-mail Yes Yahoo Mail (desktop) No
Android Gmail 2.3, 4.0, 4.1 Yes Outlook.com (desktop) No
Droid Yahoo! Mail 2.0 Yes

Bigger text
Bigger CTAs
Swipeable areas
Less copy
Scroll cues
Context: read later
>Contrast
Performance: few images

“Turns out customers like it! Over
10% of the clicks were for the read
it later option”
– Cameron Nouri, Marketing Manager at Rackspace

Copy 3x line
height on mobile
3 lines
9 lines

Droid copy tips
More: http://twitpic.com/9w1u4h
Consult the documentation that came
with your phone for further instructions.
Read the instructions that came with
your phone.
1: Keep it brief.
Bad: Too formal Good: Better
Touch Next to complete setup using a
Wi-Fi connection.
To finish setup using Wi-Fi, touch Next.
2: Most important thing first
Bad: Task last Good: Task first

“Open rates increased, click thru
rates doubled and our own
engagement survey included in
the email showed that 80% of
recipients liked the new design!”
– Cameron Nouri of Rackspace

“We decided to prioritize the mobile
optimization of our transactional emails as
they are one of the main revenue drivers
within our automated email program.
Optimizing these valuable communications
was key to creating an engaging post -
purchase experience for our customers”.
Alfredo Caballero Marketing Manager at
oo.com.au (Australian retailer)

iPhone fluid iPhone responsive

BIG FONTS
(OR WE’LL CHANGE IT FOR YOU!)
style=”-webkit-text-size-adjust:none”

Before: Droid clipped + images blocked

After: Droid 1 column HTML text

“15% of our newsletter sessions is generated by the
navigation header, so we decided to start small by
mobile optimizing different navigation patterns.
The amount of traffic generated by this content area
will allow us to gain insights fairly quickly and help
us plan larger optimization changes over time.”
– Alfredo Caballero of oo.com.au

retrofit:
Is the desktop code clean?
Clean but still incompatible?
Touch friendly?
Copy length
Performance

No copy category title 3 words
iPhone apps

Zappos (invision blog interview)
Donny Guy – User Experience Manager
We had to ask ourselves, “Why are we
trying to push this description piece when
really a huge percentage of orders happen
without a person even looking at it?”
So we developed a hierarchy of what our
customers want: they want images first,
then they want to look at videos, and then
they’re looking at reviews.”

Staggered grids encourage scrolling
Masonry.desandro.com

Surface tablet with uneven grid

Grids test:
Thumbnail size
Deals per screen
Amount of copy
Button vs. text as CTA
1 col vs. 2 vs. 3 vs. list
Staggered vs. ordered
Scroll drop off
Contrast

Wrap
Stack
Shift
Reduce
Toggle

<320
fluid
crop
overflow
swap
hide
dynamic

Hook up to APIs Live video
Context
Know the location,
weather, click activity,
platform, time of day + can
pull data from APIs.

Unique to tablets:
Context
Touch
Performance

Context
7” increased mobility
Multi-screen use
Visit depth

location
http://research.google.com/
pubs/pub38135.html

Top locations for tablet email
use – in bed or on couch

push the contrast
Low contrast copy
that is easy to read
on a desktop
monitor, becomes
a fuzzy blur on a
smaller screen
Low contrast copy that is
easy to read on a desktop
monitor, becomes a fuzzy
blur on a smaller screen

http://www.flickr.com/photos/gserafini/2545176311
distracted

Goggle “The New Multi-screen world” Aug 2012
Smartphones are the most frequent companion
devices during simultaneous usage

Goggle “The New Multi-screen world” Aug 2012
Top activities performed during
simultaneous screen usage

2 tasks
http://research.google.com/
pubs/pub38135.html

1.7x
tablet smartphone
Visit depth
( website page views / visits )
http://readwrite.com/2013/03/07/tablet-mobile-web-
traffic-eclipses-smartphone-traffic-for-first-time

“Purchase amounts on the
iPad an order of magnitude
higher than on iPhone,
Android and the web” - Fab
http://gigaom.com/2012/01/11/fab-com-
mobile-shoppers-buy-twice-as-often-as-web-visitors/

iPad not a 'mobile' device? I call
BS on that - everyone on the bus
or the train is on one every day
#aea @cbandes

http://www.flickr.com/photos/7486366@N08/7108199437

Hendrick: Cheaper and more
portable tablets will lead to
broader user base. More 7inch
tablets than 10inch soon
#mobility13 @oliverw

Touch
Size
Spacing
positioning

iPad mini creative ~20% smaller

Controls
desktop tablet mobile

“We’ve been doing a lot of
stuff to make it really easy
to interact with BB10 one-
handed, so something as
simple as moving the URL
bar down to the bottom…

…without having to stretch.”

Two handed 15%
Cradled 36%
One-handed 49%
http://www.uxmatters.com/mt/archives/2013/
02/how-do-users-really-hold-mobile-devices

Performance
WIFI
Retina images
We heart CSS3

3G network connections are
currently 40% slower than
desktop connections, and
4G/LTE network connections
are 12% slower.
http://wpdaily.co/responsive-server-side/

508K 84K
luci.criosweb.ro/riot/

retina
http://blog.netvlies.nl/design-
interactie/retina-revolution/

Tablet first
Start with tablet build
as its compatible
with desktop users.

Performance
( mobile first responsive email design )

Mobile first #RED
20K
60K
100K
Progressive enhancement

Mobile first #RED
@media
@media
Poor @media support
Progressive enhancement

Desktop first #RED
100K
100K
100K
Graceful degradation

Using display:none for mobile-
last responsive design is like
shoving shit into your closet
before guests arrive at your
house @grigs

Recycle lite assets
desktop
tablet
mobile

Start by designing the mobile view
Mobile 1st book

Prism
no. of requests and weight
http://prism.mobiforge.com/

mobitest
average load time / weight & waterfall chart
http://mobitest.akamai.com

iPhone, iPad
and Nexus S
http://mobitest.akamai.com

@media blind
tactics
(grrrr Android Gmail)

MEDIA QUERY SUPPORT
iPhone Yes Surface (Hotmail/Outlook.com) Yes
iPad (including mini) Yes Win Mobile 6.1 No
iPod Touch Yes WP7 No
Android 2.1 No WP7.5 Yes
Android 2.2 Yes WP8 ?
Android 2.3 Yes BB OS 5 No
Android 4.0 Yes BB OS 7 Yes
Android 4.1 Yes BB OS 10 Yes
Droid Exchange No Palm OS 4.5 Yes
Android Gmail No Kindle Fire Yes
Droid Yahoo No Kindle Fire HD Yes

Fixed fallback
No
@media
Yes
@media
No min/max-width / @media support in Outlook
Fixed-width default

Nexus 7
Clipped at ~570px
Galaxy Nexus
Clipped at ~370px

droid
http://stylecampaign.com/blog
/2012/08/android-grid-of-grim/

Galaxy Nexus & S2 (Gmail) sub lines / snippet text

2 droids inbox on home screen (can customize)

Desktop Gmail
iPad
Gmail app
native

Desktop Yahoo!
iPad
Gmail app
native

http://stylecampaign.com/blog/
2012/08/12-android-preview-pane-tips/

Vertical scroll bar Colored pre-header
Styled ALT text

Android
Gmail
preview
Android
Gmail
left rail
Desktop creative
designed for
tablets and
@media blind
smartphones
Touch friendly

Desktop 2 column
Surface 1 column

STYLECampaign mobile test lab…
1 - iPod touch 640 x 960 OS 4.3.5 16 - Nokia Lumia 800 running WP7.5
2 - iPod touch 640 x 960 OS 5.1.1 17 - LG-E900 WP7
3 - iPod touch 640 x 1136 (taller screen) 18 - Dell WP7 with slide out keyboard
4 - iPad 2 1024 x 768 OS 4.3.5 19 - Surface tablet Windows 8, 1366 x 768
5 - iPad 3 (2x resolution) 2048 x 1536 OS 5.1.1 20 - Blackberry Bold 9900 640 x 480 OS 7.1
6 - iPad mini 1024×768 21 - Blackberry Bold 9780 480 x 360 OS 6
7 - LG GT540 2.1 Eclair, 320 x 480 22 - Blackberry Curve 8900 480 x 360 OS 5
8 - Motorola Defy 2.2.2 Froyo, 480 x 854 23 - Blackberry Tour 9630 480 x 360 OS 5
9 - Samsung Galaxy Ace GT 2.3, 320 x 480 24 - Original Kindle 3G 600 x 800 screen
10 - Samsung Galaxy S2 2.3.6 GB, 480 x 800 25 - Kindle Touch 3G
11 - Samsung Galaxy Nexus 4.0.4 ICS, 720 x 1280 26 - Kindle Paperwhite 3G
12 - Galaxy Note 2.3.6 GB, 800 x1280 “Smablet” 27 - Kindle Fire 7″ tablet Silk (based on Android vr2)
13 - Nexus 7 4.1 Jellybean, 800 x 1280 7″ tablet 28 - Kindle Fire HD tablet 7″
14 - Android mini PC 29 - Kindle Fire HD tablet 8.9″
15 - Palm Pixi Plus 320 x400 web OS v1.4.5 30 - Palm Treo Pro 320 x 320 Windows mobile 6.1

Touch
Ergonomics - if you're
designing for touch it helps
to be able to physically
interact with the device.

QA
Testing and debugging - it's
fast and accurate. Some
stuff is hard to debug via a
static preview tool.

Speed
Performance - can test
download speeds. Wi-Fi at
various locations, 3G & 4G.

Context
Use cases - using devices in my
everyday life gives me a more
nuanced feel for a platform. When
do I reach for the 7“ vs. iPad, do
I use them in different ways?

Thanks!
anna@stylecampaign.com
@stylecampaign

Responsive email design guide

More Related Content

What's hot

Viewers also liked

Similar to Responsive email design guide

More from François-Yves Prigent

Recently uploaded

Responsive email design guide