Responsive Email Design

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

responsive email design
#RED

Anna Yeaman / @stylecampaign
Creative Director at
STYLECampaign.com
Leads the creative team. Also
responsible for customer...

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

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

Problem?
( designing for a bijillion screens )

bijillion screens
Multiple builds? No thanks

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

iPhone
Android

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

BB7 clipped

BBZ10 clipped
342px

~700px
Surface
clipped

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

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

Responsive

iPhone scalable iPhone responsive

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

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

A happy accident

Left column for Android Gmail users

Gmail

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

iPhone
Galaxy Nexus
Old
skinny 480px

redesign

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

scroll
Arrow scroll cues

Anchor tags

ANCHOR TAG SUPPORT (ID + name)
iPhone Yes (2X TAPS) Surface Yes (Outlook.com)
iPad Yes (2X TAPS) WP7 Yes
iPod Touch Yes (2...

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

Tap :(
Cluster bombs

Tap :)
Big swipeable areas

Read later flow

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

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

Vote
(1st draft )

Vote
( final draft )

“Open rates increased, click thru
rates doubled and our own
engagement survey included in
the email showed that 80% of
rec...

Retrofit
oo.com.au

“We decided to prioritize the mobile
optimization of our transactional emails as
they are one of the main revenue drivers
...

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

iPhone fluid iPhone responsive

“15% of our newsletter sessions is generated by the
navigation header, so we decided to start small by
mobile optimizing d...

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

Responsive
product grids

2 column to 1 column

3 column to 1 column

3 column to 2 column

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

Living Social thru the years

Fits on 1 screen

4 column to 2 column

Mash up
+ =?

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

Responsive
navigation

Wrap
Stack
Shift
Reduce
Toggle

Wrap
Stack
Shift
Reduce
Toggle

Wrap
Stack
Shift
Reduce
Toggle

Wrap
Stack
Shift
Reduce
Toggle

Wrap
Stack
Shift
Reduce
Toggle

Wrap
Stack
Shift
Reduce
Toggle

Responsive
images

<320
fluid
crop
overflow
swap
hide
dynamic

<320
fluid
crop
overflow
swap
hide
dynamic

<320
fluid
crop
overflow
swap
hide
dynamic

<320
fluid
crop
overflow
swap
hide
dynamic

<320
fluid
crop
overflow
swap
hide
dynamic

Overflow:hidden

<320
fluid
crop
overflow
swap
hide
dynamic

<320
fluid
crop
overflow
swap
hide
dynamic

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

What about tablets?

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

contrast

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

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

“Purchase amounts on the
iPad an order of magnitude
higher than on iPhone,
Android and the web” - Fab
http://gigaom.com/20...

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

Touch
Size
Spacing
positioning

44x44(iOS)
83x58px

34x34(WP)

spacing

iPad mini creative ~20% smaller

grip

grip

view

Controls
desktop tablet mobile

reach

“We’ve been doing a lot of
stuff to make it really easy
to interact with BB10 one-
handed, so something as
simple as movin...

“…so you can tap

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

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

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

Lite desktop emails

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

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

BBZ10

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)

Gmail

Desktop Gmail
iPad
Gmail app
native

Desktop Yahoo!
iPad
Gmail app
native

Desktop Gmail
iPad
Gmail app
native

left rail

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

Desktop 2 column
Surface 1 column

testing

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

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

#RED not #RWD

Thanks!
anna@stylecampaign.com
@stylecampaign

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Orientación sobre pi by jluisoli 1708 views

View on Slideshare

1 of 187 Ad

View on Slideshare

1 of 187 Ad