responsive email design#RED

Anna Yeaman / @stylecampaignCreative Director at STYLECampaign.comLeads the creative team. Also responsible for customer education, consulting and mobile boot camps.

#REDProblem?What is it?

What’s possible?What about tablets?

TouchPerformance

@media blind tacticsTesting

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.pdfLitmus.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 screensMultiple builds? No thanks

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

iPhoneAndroid

Anna YeamanKindle Fire 7” HD

~500px

Galaxy Nexus

~320px

Note / Smablet

~390pxFixed-width

BB7 clipped

BBZ10 clipped342px

~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

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

breakpointsSimilar 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 switchmulti-platformproduct grids

retrofitsnavigation

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 at Rackspace

iPhoneGalaxy 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 (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 textBigger CTAs

Swipeable areasLess 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 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 firstBad: Task last Good: Task first

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

recipients liked the new design!” – Cameron Nouri of Rackspace

Retrofit oo.com.au

“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

iPhone fluid iPhone responsive

“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 lengthPerformance

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

Living Social thru the years

Fits on 1 screen

4 column to 2 column

Mash up

+ =?

Staggered grids encourage scrollingMasonry.desandro.com

Surface tablet with uneven grid

Grids test:Thumbnail size

Deals per screenAmount of copy

Button vs. text as CTA1 col vs. 2 vs. 3 vs. listStaggered vs. ordered

Scroll drop offContrast

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

overflowswap 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 videoContext Know the location, weather, click activity,

platform, time of day + can pull data from APIs.

What about tablets?

Unique to tablets:ContextTouch

Performance

Context 7” increased mobility

Multi-screen useVisit 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

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

Spacingpositioning

44x44(iOS)

83x58px

34x34(WP)

spacing

iPad mini creative ~20% smaller

grip

grip

view

Controlsdesktop 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 moving the URL bar down to the bottom…

“…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-devices

Performance WIFI

Retina imagesWe 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 firstStart with tablet build

as its compatible with desktop users.

Performance( mobile first responsive email design )

Mobile first #RED

20K60K

100K

Progressive enhancement

Mobile first #RED

@media@media

Poor @media support

Progressive enhancement

Desktop first #RED

100K100K

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 house @grigs

Recycle lite assetsdesktop

tablet

mobile

Start by designing the mobile viewMobile 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

BBZ10

Fixed fallbackNo

@mediaYes

@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 appnative

Desktop Yahoo!

iPad

Gmail appnative

Desktop Gmail

iPad

Gmail appnative

left rail

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

Vertical scroll bar Colored pre-headerStyled ALT text

Android Gmail

preview

AndroidGmailleft rail

Desktop creative designed for tablets and

@media blind smartphones

Touch friendly

Desktop 2 columnSurface 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 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

TouchErgonomics - 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?

#RED not #RWD

Thanks!anna@stylecampaign.com@stylecampaign