responsive email design
Post on 17-Aug-2014
55.807 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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…
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
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
top related