Responsive Email Design

on

  • 56,698 views

Besides a quick explanation of what responsive email design is; I take a look at what’s possible, going through some of the responsive layout patterns we’ve deployed. I’ve also got a section on ...

Besides a quick explanation of what responsive email design is; I take a look at what’s possible, going through some of the responsive layout patterns we’ve deployed. I’ve also got a section on tablets, touch, performance and techniques for dealing with clients that don’t support media queries. I finish up by looking at testing…hope you find it useful. You can watch the video that goes with deck here: http://www.youtube.com/watch?v=T6GajEVabP4

Statistics

Views

Total Views
56,698
Views on SlideShare
34,373
Embed Views
22,325

Actions

Likes
75
Downloads
389
Comments
7

40 Embeds 22,325

http://stylecampaign.com 12668
http://www.scoop.it 2738
http://www.carrementplus.net 2280
http://es.slideshare.net 1605
http://nowymarketing.pl 843
http://www.learnitanytime.com 682
http://fr.slideshare.net 535
http://de.slideshare.net 281
http://ticsyformacion.com 162
http://feeds.feedburner.com 142
http://tests.showpingdeal.fr 128
https://twitter.com 98
http://cuechrist.com 55
http://translate.googleusercontent.com 30
http://interactive.vianet.vianow.com 9
http://feedly.com 8
http://www.linkedin.com 7
http://fp20.org 7
http://smashingreader.com 7
https://hootsuite.scoop.it 6
http://socialmobilemarketing101.com 5
http://cloud.feedly.com 4
http://carrementplus.net 3
http://dev.learnitanytime.com 3
http://www.newsblur.com 2
https://www.google.fr 2
https://www.google.com 2
http://www.Slideshare.net 1
http://voxpop.eluere.com 1
http://pamojatogether.com 1
http://vianet.vianow.com 1
http://digg.com 1
http://webcache.googleusercontent.com 1
http://copyscape.com 1
http://blog.chalifour.veronique.chalifour.net 1
http://131.253.14.98 1
http://www.feedspot.com 1
http://plus.url.google.com 1
https://sendtoinc.com 1
https://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 7 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Awesome presentation Anna, thanks for sharing this
    Are you sure you want to
    Your message goes here
    Processing…
  • Great slideshare. Now I just need to explain it to our 'CRM suite' providers and their 'tech' team. :-)
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks everyone for your kind comments, glad you found it useful. btw there's a #RED video at http://www.youtube.com/watch?v=T6GajEVabP4 which goes along with these slides if anyone's interested.
    Are you sure you want to
    Your message goes here
    Processing…
  • How much would you pay for your responsive EDM that is connected to a data matrix, eg: Live, dynamic text that needs to work on.
    AOL Mail *
    Apple Mail 4
    Apple Mail 5
    Apple Mail 6
    Gmail *
    Lotus Notes 8.5
    Lotus Notes 8
    Lotus Notes 7
    Lotus Notes 6.5
    Thunderbird
    Outlook 2013
    Outlook 2011 for Mac
    Outlook 2010
    Outlook 2007
    Outlook 2003
    Outlook 2002/XP
    Outlook 2000
    Outlook.com *
    Yahoo! *

    And on....
    Android 2.3 & 4.0
    iPhone 5 iOS 6
    iPhone 4S iOS 6
    iPhone 3GS iOS 5
    iPad 2 iOS 6
    BlackBerry Text & HTML
    Symbian S60
    Windows Phone 7.5
    ?
    Are you sure you want to
    Your message goes here
    Processing…
  • Very nice. A lot of good information.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Email Design Responsive Email Design Presentation Transcript

  • #REDresponsive email design
  • Anna Yeaman / @stylecampaignCreative Director atSTYLECampaign.comLeads the creative team. Alsoresponsible 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 View slide
  • 41% of emails wereopened on mobile in 2 nd 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 Litmus.com to get your mobile stats _Email_Opens_Report_SECONDHalf2012.pdf View slide
  • One shot: only 2%will reopen emailon 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?300px 320px 400px 480px 520px 640px
  • AndroidiPhone
  • ~500px Fixed-width ~390px ~320pxKindle Fire 7” HD Note / Smablet Galaxy Nexus Anna Yeaman
  • BB7 clipped
  • 342pxBBZ10 clipped
  • Surfaceclipped ~700px
  • Horizontal hierarchy 300px 500px 700pxSmartphones 7”Tablets Surface
  • Scalable ResponsiveKindle Fire 7” HD Kindle Fire 7” HD
  • Responsive
  • iPhone scalable iPhone responsive
  • iPhone scalable iPhone responsive
  • Responsive( what is it & how does it work? )
  • Media queries Fluid media Fluid grids 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 ViewportPPK - http://www.youtube.com/watch?v=4wscVOXjIzQ Kindle Fire 7” HD
  • @media only screen and (max-width: 480px)
  • breakpoint If the viewport is below 480px, then change the layout like this…
  • breakpointsSimilar to key frames in an animation Muybridge cats
  • One HTML File ( delivered to all platforms )
  • Responsive (fluid grid, fluid media + @media)Breakpoint Breakpoint 480px Fluid layout handles In-betweens 640px
  • Every time you use Responsive in place of Adaptive a fairy loses its wings #RWD @benedfit
  • more Adaptive layouts ( fixed-width + @media )Breakpoint Breakpoint 480px No in-betweens, switches between fixed-width layouts 640px
  • 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: targetusers on mobile with devicespecific copy; 9%-14% increasein 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
  • Galaxy Nexus Old iPhoneskinny 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 YesiPod Touch Yes (2X TAPS) WP7.5 YesAndroid 2.1 No BB 7.1 Yes (also live.com)Android 2.2 Yes Kindle Fire Gmail NoAndroid 2.3 Yes Kindle Fire HD NoAndroid 4.0 No Outlook 07 + 2010 (desktop) YesAndroid 4.1.2 No Gmail Firefox (desktop) YesK9-mail Yes Yahoo Mail (desktop) NoAndroid Gmail 2.3, 4.0, 4.1 Yes Outlook.com (desktop) NoDroid Yahoo! Mail 2.0 Yes
  • Bigger text Bigger CTAs Swipeable areas Less copy Scroll cues Context: read later >ContrastPerformance: few images
  • Tap :( Cluster bombs
  • Tap :) Big swipeable areas
  • Read later flow
  • “Turns out customers like it! Over10% of the clicks were for the read it later option” – Cameron Nouri, Marketing Manager at Rackspace
  • Copy 3x line height on mobile3 lines 9 lines
  • Droid copy tips1: Keep it brief.Bad: Too formal Good: BetterConsult the documentation that came Read the instructions that came withwith your phone for further instructions. your phone.2: Most important thing firstBad: Task last Good: Task firstTouch Next to complete setup using a To finish setup using Wi-Fi, touch Next.Wi-Fi connection. More: http://twitpic.com/9w1u4h
  • 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% ofrecipients liked the new design!” – Cameron Nouri of Rackspace
  • Retrofitoo.com.au
  • “We decided to prioritize the mobileoptimization 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 areawill 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
  • Responsiveproduct 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 ManagerWe had to ask ourselves, “Why are wetrying to push this description piece whenreally a huge percentage of orders happenwithout a person even looking at it?”So we developed a hierarchy of what ourcustomers want: they want images first,then they want to look at videos, and thenthey’re looking at reviews.”
  • Living Social thru the years
  • Fits on 1 screen
  • 4 column to 2 column
  • + =? Mash up
  • Masonry.desandro.comStaggered grids encourage scrolling
  • Surface tablet with uneven grid
  • Grids test: Thumbnail size Deals per screen Amount of copyButton vs. text as CTA1 col vs. 2 vs. 3 vs. listStaggered vs. ordered Scroll drop off Contrast
  • Responsivenavigation
  • WrapStackShiftReduceToggle
  • WrapStackShiftReduceToggle
  • WrapStackShiftReduceToggle
  • WrapStackShiftReduceToggle
  • WrapStackShiftReduceToggle
  • WrapStackShiftReduceToggle
  • Responsive images
  • <320fluidcropoverflowswaphidedynamic
  • <320fluidcropoverflowswaphidedynamic
  • <320fluidcropoverflowswaphidedynamic
  • <320fluidcropoverflowswaphidedynamic
  • <320fluidcropoverflowswaphidedynamic
  • Overflow:hidden
  • <320fluidcropoverflowswaphidedynamic
  • <320fluidcropoverflowswaphidedynamic
  • <320fluidcropoverflowswaphidedynamic
  • Context Hook up to APIs Live video Know the location, weather, click activity,platform, time of day + can pull data from APIs.
  • What about tablets?
  • Unique to tablets: Context Touch Performance
  • Context7” 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 contrastLow contrast copythat is easy to read on a desktopmonitor, becomes Low contrast copy that is easy to read on a desktop a fuzzy blur on a monitor, becomes a fuzzy blur on a smaller screen smaller screen
  • distracted http://www.flickr.com/photos/gserafini/2545176311
  • 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 Goggle “The New Multi-screen world” Aug 2012
  • 2 tasks http://research.google.com/ pubs/pub38135.html
  • Visit depth( website page views / visits ) 1.7x tablet smartphone http://readwrite.com/2013/03/07/tablet-mobile-web- traffic-eclipses-smartphone-traffic-for-first-time
  • “Purchase amounts on theiPad an order of magnitudehigher 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 callBS on that - everyone on the busor the train is on one every day#aea @cbandes
  • http://www.flickr.com/photos/7486366@N08/7108199437
  • Hendrick: Cheaper and moreportable tablets will lead tobroader user base. More 7inchtablets 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 ofstuff to make it really easyto interact with BB10 one-handed, so something assimple as moving the URLbar down to the bottom…
  • “…so you can tap
  • …without having to stretch.”
  • http://www.uxmatters.com/mt/archives/2013/ 02/how-do-users-really-hold-mobile-devicesOne-handed 49% Cradled 36%Two handed 15%
  • Performance WIFI Retina images We heart CSS3
  • 3G network connections are currently 40% slower than desktop connections, and4G/LTE network connections are 12% slower. http://wpdaily.co/responsive-server-side/
  • 508K 84K luci.criosweb.ro/riot/
  • retinahttp://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 100K 60K20K Progressive enhancement
  • Mobile first #RED Poor @media support @media@media Progressive enhancement
  • Desktop first #RED 100K 100K 100K Graceful degradation
  • Lite desktop emails
  • Using display:none for mobile-last responsive design is likeshoving shit into your closetbefore guests arrive at yourhouse @grigs
  • Recycle lite assets desktop mobile tablet
  • Mobile 1st bookStart by designing the mobile view
  • Prism no. of requests and weighthttp://prism.mobiforge.com/
  • http://mobitest.akamai.com mobitestaverage load time / weight & waterfall chart
  • http://mobitest.akamai.comiPhone, iPadand Nexus S
  • @media blind tactics (grrrr Android Gmail)
  • MEDIA QUERY SUPPORTiPhone Yes Surface (Hotmail/Outlook.com) YesiPad (including mini) Yes Win Mobile 6.1 NoiPod Touch Yes WP7 NoAndroid 2.1 No WP7.5 YesAndroid 2.2 Yes WP8 ?Android 2.3 Yes BB OS 5 NoAndroid 4.0 Yes BB OS 7 YesAndroid 4.1 Yes BB OS 10 YesDroid Exchange No Palm OS 4.5 YesAndroid Gmail No Kindle Fire YesDroid Yahoo No Kindle Fire HD Yes
  • BBZ10
  • Fixed fallbackFixed-width default Yes No @media @media No min/max-width / @media support in Outlook
  • Clipped at ~570px Clipped at ~370px Nexus 7 Galaxy Nexus
  • droidhttp://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 GmailiPad native Gmail app
  • Desktop Yahoo!iPad native Gmail app
  • Desktop GmailiPad native Gmail app
  • left rail
  • http://stylecampaign.com/blog/2012/08/12-android-preview-pane-tips/
  • Vertical scroll bar Colored pre-header Styled ALT text
  • Android Desktop creative Gmail designed forpreview tablets and @media blind smartphonesAndroid Gmail Touch friendlyleft rail
  • Surface 1 column Desktop 2 column
  • testing
  • STYLECampaign mobile test lab…1 - iPod touch 640 x 960 OS 4.3.5 16 - Nokia Lumia 800 running WP7.52 - iPod touch 640 x 960 OS 5.1.1 17 - LG-E900 WP73 - iPod touch 640 x 1136 (taller screen) 18 - Dell WP7 with slide out keyboard4 - iPad 2 1024 x 768 OS 4.3.5 19 - Surface tablet Windows 8, 1366 x 7685 - iPad 3 (2x resolution) 2048 x 1536 OS 5.1.1 20 - Blackberry Bold 9900 640 x 480 OS 7.16 - iPad mini 1024×768 21 - Blackberry Bold 9780 480 x 360 OS 67 - LG GT540 2.1 Eclair, 320 x 480 22 - Blackberry Curve 8900 480 x 360 OS 58 - Motorola Defy 2.2.2 Froyo, 480 x 854 23 - Blackberry Tour 9630 480 x 360 OS 59 - Samsung Galaxy Ace GT 2.3, 320 x 480 24 - Original Kindle 3G 600 x 800 screen10 - Samsung Galaxy S2 2.3.6 GB, 480 x 800 25 - Kindle Touch 3G11 - Samsung Galaxy Nexus 4.0.4 ICS, 720 x 1280 26 - Kindle Paperwhite 3G12 - 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 youredesigning for touch it helps to be able to physically interact with the device.
  • QATesting and debugging - its fast and accurate. Somestuff is hard to debug via a static preview tool.
  • Speed Performance - can testdownload speeds. Wi-Fi atvarious locations, 3G & 4G.
  • Context Use cases - using devices in my everyday life gives me a morenuanced 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