Responsive email design guide for multiple screens
•
90 likes•165,857 views
This document discusses responsive email design (RED) for various screen sizes. It notes that 41% of emails were opened on mobile in the second half of 2012 and that number will exceed 50% by the end of 2013. It addresses designing for the "bijillion" screens including smartphones, tablets and desktops. The key aspects of responsive design discussed are fluid grids, fluid media, and media queries. Breakpoints and techniques like stacking and shifting navigation are presented. Considerations for touch, images, and performance on mobile and tablets are also covered. Testing on real devices is recommended for evaluating touch ergonomics, debugging, and performance.
Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Similar to Responsive email design guide for multiple screens
Similar to Responsive email design guide for multiple screens (20)
Recently uploaded
Recently uploaded (20)
Responsive email design guide for multiple screens
- 2. Anna Yeaman / @stylecampaign Creative Director at STYLECampaign.com Leads the creative team. Also responsible for customer education, consulting and mobile boot camps.
- 3. #RED Problem? What is it? What’s possible? What about tablets? Touch Performance @media blind tactics Testing
- 4. 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.pdf Litmus.com to get your mobile stats
- 5. One shot: only 2% will reopen email on another device http://www.knotice.com/reports/Knotice_Mobile _Email_Opens_Report_SECONDHalf2012.pdf
- 6. Problem? ( designing for a bijillion screens )
- 7. bijillion screens Multiple builds? No thanks
- 8. How wide for fixed-width? 320px 400px 480px 300px 520px 640px
- 10. Anna Yeaman Kindle Fire 7” HD ~500px Galaxy Nexus ~320px Note / Smablet ~390px Fixed-width
- 11. BB7 clipped
- 15. Scalable Responsive Kindle Fire 7” HD Kindle Fire 7” HD
- 16. Responsive
- 17. iPhone scalable iPhone responsive
- 18. iPhone scalable iPhone responsive
- 19. Responsive ( what is it & how does it work? )
- 20. Fluid grids Fluid media Media queries Responsive design
- 23. @media checks screen properties e.g. width h
- 24. Screen size 800x1280 Viewport 533x731 Kindle Fire 7” HD Viewport PPK - http://www.youtube.com/watch?v=4wscVOXjIzQ
- 25. @media only screen and (max-width: 480px)
- 26. If the viewport is below 480px, then change the layout like this… breakpoint
- 27. breakpoints Similar to key frames in an animation Muybridge cats
- 28. One HTML File ( delivered to all platforms )
- 29. Responsive (fluid grid, fluid media + @media) 480px 640px Breakpoint Breakpoint Fluid layout handles In-betweens
- 30. Every time you use 'Responsive' in place of 'Adaptive' a fairy loses it's wings #RWD @benedfit
- 31. Adaptive layouts ( fixed-width + @media ) 480px 640px Breakpoint Breakpoint No in-betweens, switches between fixed-width layouts more
- 32. What’s possible? context switch multi-platform product grids retrofits navigation images
- 33. Context switch ( adjust hierarchy or offer )
- 35. Prioritize content for mobile users
- 37. RT @gsterling: Marin: target users on mobile with device specific copy; 9%-14% increase in CTR from doing so #SMX #22C
- 39. A happy accident
- 40. Left column for Android Gmail users
- 41. Gmail
- 42. Different column on mobile (copy / urls / code)
- 43. Multi-platform “The world is going mobile, which means our customers are going mobile” – Cameron Nouri, Marketing Manager at Rackspace
- 45. redesign
- 46. 2 BB running Vr. 7.1 Bold & Curve (9900 / 9320)
- 49. Anchor tags
- 50. 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
- 51. Bigger text Bigger CTAs Swipeable areas Less copy Scroll cues Context: read later >Contrast Performance: few images
- 53. Tap :) Big swipeable areas
- 54. Read later flow
- 55. “Turns out customers like it! Over 10% of the clicks were for the read it later option” – Cameron Nouri, Marketing Manager at Rackspace
- 56. Copy 3x line height on mobile 3 lines 9 lines
- 57. 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 first Bad: Task last Good: Task first
- 59. Vote ( final draft )
- 60. “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
- 62. “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)
- 63. iPhone fluid iPhone responsive
- 64. BIG FONTS (OR WE’LL CHANGE IT FOR YOU!) style=”-webkit-text-size-adjust:none”
- 65. Before: Droid clipped + images blocked
- 66. After: Droid 1 column HTML text
- 67. iPhone fluid iPhone responsive
- 68. “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
- 69. retrofit: Is the desktop code clean? Clean but still incompatible? Touch friendly? Copy length Performance
- 71. 2 column to 1 column
- 72. 3 column to 1 column
- 73. 3 column to 2 column
- 74. No copy category title 3 words iPhone apps
- 75. 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.”
- 76. Living Social thru the years
- 77. Fits on 1 screen
- 78. 4 column to 2 column
- 79. Mash up + =?
- 80. Staggered grids encourage scrolling Masonry.desandro.com
- 81. Surface tablet with uneven grid
- 82. 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. ordered Scroll drop off Contrast
- 104. Overflow:hidden
- 111. Hook up to APIs Live video Context Know the location, weather, click activity, platform, time of day + can pull data from APIs.
- 112. What about tablets?
- 114. Context 7” increased mobility Multi-screen use Visit depth
- 116. Top locations for tablet email use – in bed or on couch
- 117. contrast
- 118. 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
- 120. Goggle “The New Multi-screen world” Aug 2012 Smartphones are the most frequent companion devices during simultaneous usage
- 121. Goggle “The New Multi-screen world” Aug 2012 Top activities performed during simultaneous screen usage
- 123. 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
- 124. “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/
- 125. iPad not a 'mobile' device? I call BS on that - everyone on the bus or the train is on one every day #aea @cbandes
- 127. Hendrick: Cheaper and more portable tablets will lead to broader user base. More 7inch tablets than 10inch soon #mobility13 @oliverw
- 129. 44x44(iOS) 83x58px
- 130. 34x34(WP)
- 131. spacing
- 132. iPad mini creative ~20% smaller
- 133. grip
- 134. grip
- 135. view
- 137. reach
- 138. “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…
- 139. “…so you can tap
- 140. …without having to stretch.”
- 141. Two handed 15% Cradled 36% One-handed 49% http://www.uxmatters.com/mt/archives/2013/ 02/how-do-users-really-hold-mobile-devices
- 142. Performance WIFI Retina images We heart CSS3
- 143. 3G network connections are currently 40% slower than desktop connections, and 4G/LTE network connections are 12% slower. http://wpdaily.co/responsive-server-side/
- 146. Tablet first Start with tablet build as its compatible with desktop users.
- 148. Performance ( mobile first responsive email design )
- 149. Mobile first #RED 20K 60K 100K Progressive enhancement
- 150. Mobile first #RED @media @media Poor @media support Progressive enhancement
- 151. Desktop first #RED 100K 100K 100K Graceful degradation
- 152. Lite desktop emails
- 153. Using display:none for mobile- last responsive design is like shoving shit into your closet before guests arrive at your house @grigs
- 155. Start by designing the mobile view Mobile 1st book
- 156. Prism no. of requests and weight http://prism.mobiforge.com/
- 157. mobitest average load time / weight & waterfall chart http://mobitest.akamai.com
- 158. iPhone, iPad and Nexus S http://mobitest.akamai.com
- 159. @media blind tactics (grrrr Android Gmail)
- 160. 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
- 161. BBZ10
- 162. Fixed fallback No @media Yes @media No min/max-width / @media support in Outlook Fixed-width default
- 164. Nexus 7 Clipped at ~570px Galaxy Nexus Clipped at ~370px
- 167. Galaxy Nexus & S2 (Gmail) sub lines / snippet text
- 168. 2 droids inbox on home screen (can customize)
- 170. Gmail
- 175. left rail
- 177. Vertical scroll bar Colored pre-header Styled ALT text
- 178. Android Gmail preview Android Gmail left rail Desktop creative designed for tablets and @media blind smartphones Touch friendly
- 179. Desktop 2 column Surface 1 column
- 180. testing
- 181. 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
- 182. Touch Ergonomics - if you're designing for touch it helps to be able to physically interact with the device.
- 183. QA Testing and debugging - it's fast and accurate. Some stuff is hard to debug via a static preview tool.
- 184. Speed Performance - can test download speeds. Wi-Fi at various locations, 3G & 4G.
- 185. 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?
- 186. #RED not #RWD