Responsive email design guide

395 views
355 views

Published on

Quick explanation and extensive use case guide by @Stylecampaign

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
395
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive email design guide

  1. 1. #REDresponsive email design
  2. 2. Anna Yeaman / @stylecampaignCreative Director atSTYLECampaign.comLeads the creative team. Alsoresponsible for customereducation, consulting and mobileboot camps.
  3. 3. #RED Problem? What is it? What’s possible?What about tablets? Touch Performance@media blind tactics Testing
  4. 4. 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
  5. 5. One shot: only 2%will reopen emailon another device http://www.knotice.com/reports/Knotice_Mobile _Email_Opens_Report_SECONDHalf2012.pdf
  6. 6. Problem?( designing for a bijillion screens )
  7. 7. bijillion screens Multiple builds? No thanks
  8. 8. How wide for fixed-width?300px 320px 400px 480px 520px 640px
  9. 9. AndroidiPhone
  10. 10. ~500px Fixed-width ~390px ~320pxKindle Fire 7” HD Note / Smablet Galaxy Nexus Anna Yeaman
  11. 11. BB7 clipped
  12. 12. 342pxBBZ10 clipped
  13. 13. Surfaceclipped ~700px
  14. 14. Horizontal hierarchy 300px 500px 700pxSmartphones 7”Tablets Surface
  15. 15. Scalable ResponsiveKindle Fire 7” HD Kindle Fire 7” HD
  16. 16. Responsive
  17. 17. iPhone scalable iPhone responsive
  18. 18. iPhone scalable iPhone responsive
  19. 19. Responsive( what is it & how does it work? )
  20. 20. Media queries Fluid media Fluid grids Responsive design
  21. 21. http://alistapart.com/article/responsive-web-design
  22. 22. www.campaignmonitor.com/blog/post/3116/what-you- can-learn-from-panics-email-marketing/
  23. 23. @media checks screen properties e.g. width h
  24. 24. Screen size 800x1280 Viewport 533x731 ViewportPPK - http://www.youtube.com/watch?v=4wscVOXjIzQ Kindle Fire 7” HD
  25. 25. @media only screen and (max-width: 480px)
  26. 26. breakpoint If the viewport is below 480px, then change the layout like this…
  27. 27. breakpointsSimilar to key frames in an animation Muybridge cats
  28. 28. One HTML File ( delivered to all platforms )
  29. 29. Responsive (fluid grid, fluid media + @media)Breakpoint Breakpoint 480px Fluid layout handles In-betweens 640px
  30. 30. Every time you use Responsive in place of Adaptive a fairy loses its wings #RWD @benedfit
  31. 31. more Adaptive layouts ( fixed-width + @media )Breakpoint Breakpoint 480px No in-betweens, switches between fixed-width layouts 640px
  32. 32. What’s possible? context switch multi-platform product grids retrofits navigation images
  33. 33. Context switch ( adjust hierarchy or offer )
  34. 34. Prioritize content for mobile users
  35. 35. RT @gsterling: Marin: targetusers on mobile with devicespecific copy; 9%-14% increasein CTR from doing so #SMX#22C
  36. 36. A happy accident
  37. 37. Left column for Android Gmail users
  38. 38. Gmail
  39. 39. Different column on mobile (copy / urls / code)
  40. 40. Multi-platform“The world is going mobile, which means our customers are going mobile” – Cameron Nouri, Marketing Manager at Rackspace
  41. 41. Galaxy Nexus Old iPhoneskinny 480px
  42. 42. redesign
  43. 43. 2 BB running Vr. 7.1 Bold & Curve (9900 / 9320)
  44. 44. scroll Arrow scroll cues
  45. 45. Anchor tags
  46. 46. 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
  47. 47. Bigger text Bigger CTAs Swipeable areas Less copy Scroll cues Context: read later >ContrastPerformance: few images
  48. 48. Tap :( Cluster bombs
  49. 49. Tap :) Big swipeable areas
  50. 50. Read later flow
  51. 51. “Turns out customers like it! Over10% of the clicks were for the read it later option” – Cameron Nouri, Marketing Manager at Rackspace
  52. 52. Copy 3x line height on mobile3 lines 9 lines
  53. 53. 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
  54. 54. Vote(1st draft )
  55. 55. Vote( final draft )
  56. 56. “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
  57. 57. Retrofitoo.com.au
  58. 58. “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)
  59. 59. iPhone fluid iPhone responsive
  60. 60. BIG FONTS(OR WE’LL CHANGE IT FOR YOU!)style=”-webkit-text-size-adjust:none”
  61. 61. Before: Droid clipped + images blocked
  62. 62. After: Droid 1 column HTML text
  63. 63. iPhone fluid iPhone responsive
  64. 64. “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
  65. 65. retrofit: Is the desktop code clean?Clean but still incompatible? Touch friendly? Copy length Performance
  66. 66. Responsiveproduct grids
  67. 67. 2 column to 1 column
  68. 68. 3 column to 1 column
  69. 69. 3 column to 2 column
  70. 70. No copy category title 3 words iPhone apps
  71. 71. 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.”
  72. 72. Living Social thru the years
  73. 73. Fits on 1 screen
  74. 74. 4 column to 2 column
  75. 75. + =? Mash up
  76. 76. Masonry.desandro.comStaggered grids encourage scrolling
  77. 77. Surface tablet with uneven grid
  78. 78. 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
  79. 79. Responsivenavigation
  80. 80. WrapStackShiftReduceToggle
  81. 81. WrapStackShiftReduceToggle
  82. 82. WrapStackShiftReduceToggle
  83. 83. WrapStackShiftReduceToggle
  84. 84. WrapStackShiftReduceToggle
  85. 85. WrapStackShiftReduceToggle
  86. 86. Responsive images
  87. 87. <320fluidcropoverflowswaphidedynamic
  88. 88. <320fluidcropoverflowswaphidedynamic
  89. 89. <320fluidcropoverflowswaphidedynamic
  90. 90. <320fluidcropoverflowswaphidedynamic
  91. 91. <320fluidcropoverflowswaphidedynamic
  92. 92. Overflow:hidden
  93. 93. <320fluidcropoverflowswaphidedynamic
  94. 94. <320fluidcropoverflowswaphidedynamic
  95. 95. <320fluidcropoverflowswaphidedynamic
  96. 96. Context Hook up to APIs Live video Know the location, weather, click activity,platform, time of day + can pull data from APIs.
  97. 97. What about tablets?
  98. 98. Unique to tablets: Context Touch Performance
  99. 99. Context7” increased mobility Multi-screen use Visit depth
  100. 100. location http://research.google.com/ pubs/pub38135.html
  101. 101. Top locations for tablet email use – in bed or on couch
  102. 102. contrast
  103. 103. 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
  104. 104. distracted http://www.flickr.com/photos/gserafini/2545176311
  105. 105. Smartphones are the most frequent companion devices during simultaneous usage Goggle “The New Multi-screen world” Aug 2012
  106. 106. Top activities performed during simultaneous screen usage Goggle “The New Multi-screen world” Aug 2012
  107. 107. 2 tasks http://research.google.com/ pubs/pub38135.html
  108. 108. 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
  109. 109. “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/
  110. 110. iPad not a mobile device? I callBS on that - everyone on the busor the train is on one every day#aea @cbandes
  111. 111. http://www.flickr.com/photos/7486366@N08/7108199437
  112. 112. Hendrick: Cheaper and moreportable tablets will lead tobroader user base. More 7inchtablets than 10inch soon#mobility13 @oliverw
  113. 113. Touch Size Spacingpositioning
  114. 114. 44x44(iOS)83x58px
  115. 115. 34x34 (WP)
  116. 116. spacing
  117. 117. iPad mini creative ~20% smaller
  118. 118. grip
  119. 119. grip
  120. 120. view
  121. 121. Controlsdesktop tablet mobile
  122. 122. reach
  123. 123. “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…
  124. 124. “…so you can tap
  125. 125. …without having to stretch.”
  126. 126. http://www.uxmatters.com/mt/archives/2013/ 02/how-do-users-really-hold-mobile-devicesOne-handed 49% Cradled 36%Two handed 15%
  127. 127. Performance WIFI Retina images We heart CSS3
  128. 128. 3G network connections are currently 40% slower than desktop connections, and4G/LTE network connections are 12% slower. http://wpdaily.co/responsive-server-side/
  129. 129. 508K 84K luci.criosweb.ro/riot/
  130. 130. retinahttp://blog.netvlies.nl/design- interactie/retina-revolution/
  131. 131. Tablet first Start with tablet build as its compatible with desktop users.
  132. 132. Performance( mobile first responsive email design )
  133. 133. Mobile first #RED 100K 60K20K Progressive enhancement
  134. 134. Mobile first #RED Poor @media support @media@media Progressive enhancement
  135. 135. Desktop first #RED 100K 100K 100K Graceful degradation
  136. 136. Lite desktop emails
  137. 137. Using display:none for mobile-last responsive design is likeshoving shit into your closetbefore guests arrive at yourhouse @grigs
  138. 138. Recycle lite assets desktop mobile tablet
  139. 139. Mobile 1st bookStart by designing the mobile view
  140. 140. Prism no. of requests and weighthttp://prism.mobiforge.com/
  141. 141. http://mobitest.akamai.com mobitestaverage load time / weight & waterfall chart
  142. 142. http://mobitest.akamai.comiPhone, iPadand Nexus S
  143. 143. @media blind tactics (grrrr Android Gmail)
  144. 144. 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
  145. 145. BBZ10
  146. 146. Fixed fallbackFixed-width default Yes No @media @media No min/max-width / @media support in Outlook
  147. 147. Clipped at ~570px Clipped at ~370px Nexus 7 Galaxy Nexus
  148. 148. droidhttp://stylecampaign.com/blog /2012/08/android-grid-of-grim/
  149. 149. Galaxy Nexus & S2 (Gmail) sub lines / snippet text
  150. 150. 2 droids inbox on home screen (can customize)
  151. 151. Gmail
  152. 152. Desktop GmailiPad native Gmail app
  153. 153. Desktop Yahoo!iPad native Gmail app
  154. 154. Desktop GmailiPad native Gmail app
  155. 155. left rail
  156. 156. http://stylecampaign.com/blog/2012/08/12-android-preview-pane-tips/
  157. 157. Vertical scroll bar Colored pre-header Styled ALT text
  158. 158. Android Desktop creative Gmail designed forpreview tablets and @media blind smartphonesAndroid Gmail Touch friendlyleft rail
  159. 159. Surface 1 column Desktop 2 column
  160. 160. testing
  161. 161. 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
  162. 162. Touch Ergonomics - if youredesigning for touch it helps to be able to physically interact with the device.
  163. 163. QATesting and debugging - its fast and accurate. Somestuff is hard to debug via a static preview tool.
  164. 164. Speed Performance - can testdownload speeds. Wi-Fi atvarious locations, 3G & 4G.
  165. 165. 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?
  166. 166. #RED not #RWD
  167. 167. Thanks!anna@stylecampaign.com@stylecampaign

×