Responsive eCommerce: Design Once, Sell Everywhere

Mobile usage is exploding, and redefines how people shop in retail and digital spaces. Understanding the difference between mobile vs small screen strategy, native vs web applications, and fixed vs responsive design is critical to creating joyous, profitable user experiences.

This presentation compares the methods and tools available today, how they fit customer needs, and the effect on your business strategy with respect to all devices.

More info: http://gravitydept.com/blog/responsive-ecommerce/

Conference: Magento Imagine 2012
Speaker: Brendan Falkowski @ http://gravitydept.com
Location: Las Vegas, USA
Date: April 25, 2012

Transcript

1. Design Once, Sell Everywhere Responsive eCommerce Brendan Falkowski april 25, 2012 Magento imagine conference Las Vegas, Nevada
2. Good afternoon! Good afternoon!
3. Brendan Falkowski @Falkowski I’m Brendan Falkowski. Today I’m going to talk about mobile first, responsive design for eCommerce.
4. But first, let me briefly explain what I do.
5. GravityDept.com I founded a small web strategy and design studio called Gravity Department.
6. “ Mr. Lightyear Brendan, now I’m curious...what does a Space Ranger Gravity Department actually do? http://xfinity.comcast.net/slideshow/entertainment-animatedanimals/15/ Rex Most people at the conference have asked me what does a Gravity Department actually do?
7. GravDept’s projects Client Work 50% Products 50% My work is split 50/50 between client services and products, like Acumen.
8. acumen-magento.gravdept.com 740+ stores rely on Acumen 24 months of steady development Updated for every stable Magento release Which is the best-selling Magento front-end on an open marketplace.
9. Many hats: User Experience Interaction Design Graphic Design Identity / Branding Usability Accessibility Front-End Dev Back-End Dev Business Advisory Technology Advisory Web Strategy Marketing Analytics Data Modeling Social Media Search Optimization That means I wear a lot of hats on any given day, but this is the sweet spot.
10. Trifecta: User Experience Interaction Design Graphic Design Identity / Branding Usability Accessibility Front-End Dev Back-End Dev Business Advisory Technology Advisory Web Strategy Marketing Analytics Data Modeling Social Media Search Optimization The majority of my job is finding design problems and inefficiencies, thinking about how to improve them for users, and then building those solutions. These days I’m thinking about mobile.
11. Mobile Matters Mobile usage is exploding, and redefines how people shop in retail and digital spaces. Understanding the difference between mobile vs small screen strategy, native vs web applications, and fixed vs responsive design is critical to creating joyous, profitable user experiences. This presentation compares the methods and tools available today, how they fit customer needs, and the effect on your business strategy with respect to all devices.
12. BILLION $194 United States online sales estimate for 2011 http://www.census.gov/retail/mrts/www/data/pdf/ec_current.pdf It’s 2012. eCommerce went mainstream fifteen years ago, and it’s still a huge opportunity that few businesses have fully capitalized. Total U.S. online sales are estimated at $194 billion for 2011. eCommerce can beat retail channels in key aspects of the shopping experience: selection, pricing, convenience, and service. It’s still growing, but it’s also changing shape.
13. http://derek.broox.com/photos/closet-cleaning/19356/ Five years ago, no phones had the full web. They weren’t very smart.
14. http://en.wikipedia.org/wiki/File:Tablet.jpg Two years ago, tablets were a laughable at best. Bulky hardware. Bloated software.
15. Quick Poll Quick audience poll. Please raise your hand and keep it raised. Who owns an iPhone? iPad? iPod Touch? Android phone? Android tablet? Blackberry? Kindle? Any other smart device? That’s a lot of hands.
16. Mobile isn’t emerging. Mobile isn’t emerging.
17. It’s invading. It’s already here. It’s ubiquitous, and it’s not slowing down. Mobile devices are selling significantly faster the desktop computers did.
18. > iOS devices sold in: 2011 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 Macs sold in: Apple sold more iOS devices in 2011 than all the Macs it sold in its first 28 years combined.
19. A normal day near the end of 2011 Let’s look at a 24 hour span near the end of 2011:
20. Children born per day 371thousand This is the number of children born.
21. iPhones sold per day 378thousand iPhones sold.
22. 184thousand Other iOS devices (iPod + iPad) sold per day Other iOS devices sold.
23. Android devices activated per day 700thousand Android devices activated.
24. Nokia smartphones sold per day 200thousand Nokia smartphones sold.
25. Blackberries sold per day 143thousand Blackberries sold.
26. On Earth per day 0 375,000 750,000 1,125,000 1,500,000 Children Born Mobile Devices Sold 1,400,000 371,000 That’s 371 thousand children vs. 1.4 Million mobile devices. Every day.
27. 90% of people on Earth live within mobile network access today 90% of the world lives within mobile network access today.
28. Web access by mobile phones will overtake PCs in 2013. In 2013, Gartner forecasts mobile phones will overtake PCs as the most common web-access device worldwide.
29. one billion will own smartphones by 2016 By 2016, Forrester estimates 1 billion people will own smartphones.
30. one billion will own smartphones 350 Million will use smartphones at work by 2016 350 million workers will use smartphones daily.
31. one billion will own smartphones 350 Million will use smartphones at work 200 million will take their device to work by 2016 And 200 million will take their own device to work.
32. Mobile commerce growth Mobile commerce is growing just as fast.
33. 37% of U.S. smartphone owners have purchased a product on their device in last 6 months 37% of U.S. smartphone owners have purchased a product on their device in the last 6 months.
34. Amazon sales from mobile devices in 2010 $1billion Amazon’s revenue from mobile devices was over 1 Billion dollars in 2010.
35. $0B $1B $2B $3B $4B 2009 2010 2011 $4.00B $0.70B $0.35B PayPal mobile payments PayPal mobile payments topped 4 Billion dollars in 2011.
36. $0B $2B $3B $5B $6B 2009 2010 2011 $5.00B $2.00B $0.60B eBay GMV from mobile eBay’s Gross Merchandise Volume from mobile topped 5 Billion dollars.
37. 40% of eBay transactions came from its mobile app And 40% of their online transactions came from its 1-year-old mobile app.
38. (Too) many form factors What is a mobile device? The landscape is becoming increasingly diverse. Let’s define some device classes.
39. Feature Phones Feature phones. Nearly everything pre-iPhone. Limited to no third-party apps. Limited web browser. Often not graphical. Still the most common device worldwide.
40. Smartphones http://www.intomobile.com/wp-content/uploads/2011/04/smartphones.jpg Smartphones Smartphones. iPhone. Tons running Android. Windows 7 Phone. Blackberry. Nokia.
41. Portable Media Players Portable Media Players. iPod Touch. Android-based media players. Sony PS Vita. Nintendo DS.
42. eReaders eReaders. Amazon Kindles. Barnes & Noble Nook. Sony Reader.
43. Tablets Tablets. iPad. Android. Kindle Fire. Blackberry Playbook. HP TouchPad.
44. Computers Computers. Desktops. Laptops. Netbooks.
45. Other Screens Other screens. Internet enabled TV. Game consoles. Refrigerators. Contact lenses. The US Army is commissioning them.
46. “@brad_FROST Why you should never rely on device dimensions: https://twitter.com/#!/brad_frost/status/172081637021065216 Sounds complex, right? It’s tempting to generalize mobile as smartphones and tablets. Cover them and your mobile strategy is in the bag. Not quite.
47. “ https://twitter.com/#!/samwe11er/status/171744811915821056 @samwe11er: Our app has been exposed to more than 500 different resolutions in the past 30 days. Mobile devices and platforms are extremely fragmented with literally hundreds of variations. Start thinking of mobile devices a continuous spectrum rather than distinct groups.
48. One does not simply support mobile. One does not simply support mobile. Not with 10,000 developers could you do this.
49. It is folly. It is folly.
50. Small Screen vs. Mobile Strategy So we know mobile devices matter. How do you define a strategy? Well, that depends. Do you need a Small Screen Strategy or a Mobile Strategy?
51. daishō The pairing of long and short swords. Literally: big and small. Small Screen Strategy is optimizing access for mobile device form factors. Small Screen Strategy is like daishō in feudal Japan.
52. daishō Daishō is the pairing of long and short swords. Each sword is designed for a specific constraint.
53. tachi (long sword) tachi (long sword) for open-field battle on horseback and tantō...
54. tantō (short sword) tantō (short sword) for close-quarters combat on foot.
55. Different sizes. Same objective. Different size. Same objective.
56. daishō for websites tantō tachi Apply the daishō principle to websites and you have a Small Screen Strategy. Tachi is desktop access, and tantō is small screen access.
57. Different sizes. Same objective. Together they cover specific needs.
58. Don’t assume user goals are identical on mobile devices. Don’t assume your user’s context or goals are identical on mobile devices though.
59. “Businesses should stop thinking about [mobile] as a small Web site on a tiny computer, and start thinking about mobile as being deeply embedded systems of engagement. That turns out to have huge implications. http://bits.blogs.nytimes.com/2012/02/13/get-ready-for-1-billion-smartphones-by-2016-forrester-says/ Ted Schadler @ Forrester You should stop thinking about mobile as a small web site on a tiny computer. Mobile is a deeply embedded system of engagement that has huge implications.
60. Mobile Strategy is determined by user goals in a mobile context, and not solely the device’s size. Mobile Strategy is determined by user goals in a mobile context, and not solely the device’s size.
61. Hypothetical Example Mark walks into Megamart. An ideal mobile application knows he has bought baseball gear in the past. When he passes the sporting goods section, it notifies him about a new baseball glove. Only one left! Mark scans the barcode, and checks himself out. He can order one for his brother on the same transaction and Megamart delivers it.
62. Enhance the shopping experience with behaviors available on mobile devices. Mobile Strategy enhances the shopping experience with new behaviors. It’s facilitated by a constant presence of mobile devices with advanced sensors.
63. “ #macys doesn't get it. Clicked a link on an email from my phone #mcommerce https://twitter.com/royrubin05/status/178512565876428800 @royrubin05 Magento, General Manager The technology is falling into place, but for some reason we’re not there yet. Instead we have this:
64. Mobile devices are not always used in a mobile context. Keep in mind, the opposite is true also: mobile devices are not always used in a mobile context.
65. 6% of iPad sessions use cellular networks Only 6% of iPad sessions come from cellular networks
66. 94% use WiFi leaving 94% of access over WiFi.
67. Small Screen & Mobile Strategy are good partners. You shouldn’t be choosing between Small Screen Strategy and Mobile Strategy though. They aren’t mutually exclusive. The best applications will draw strengths from both approaches.
68. Building applications for many devices What can you build? Let’s explore our options:
69. Desktop Website You already have one of these I hope. It’s probably designed for 1024 by 768 screens and up.
70. Threadless.com Positives are it’s a “do nothing” strategy. Mobile browsers automatically scale websites to fit available width.
71. New York Times on iPhone Negative Bad user experience. Hard to read. Hard to interact with. Constant pinch/zoom required. Mis-taps are common — buttons are too small and too close.
72. Mobile Website Mobile Website Traverse a hierarchy of pages with full page refreshes. Behaves like a desktop website with but presentation is optimized for a specific “device class” — typically smartphones with Grade-A browsers.
73. Desktop Site Mobile Site Positive Opportunity for a very good user experience is high. Familiar development model and tools. Excellent platform support — Magento can easily run multiple frontends from the same backend installation.
74. Desktop Site Mobile Site Negative Mobile websites aren’t a true flexible solution. They’re a one device strategy. Just like desktop sites. They exclude the majority of the device landscape.
75. Mobile Web App Mobile Web App Single-page model where the browser loads a container and uses asynchronous requests to load additional content based on the user’s context. Magento announced its first mobile web app yesterday.
76. Common for large scale apps Twitter’s mobile web app is a great example. Positive Rich media and tailored experience. Asynchronous content loading improves apparent speed. Familiar development model and tools. Negative Requires tight platform integration. Prone to bad assumptions: limiting functionality based on device size.
77. Native apps Native apps are written for a specific mobile operating system. Magento Mobile has iOS and Android apps. Or you could write custom apps.
78. Good user experiences Positive Native apps can have better usability than the mobile web today.
79. ...and the bad Negative Apps are prohibitively expensive to develop for many devices. Mismatched expectations: users get new devices. Your app doesn’t support it. His perceived value of the device is lowered. You lose the sale. App Stores are middlemen between you and users. Review processes slow you down. Exposure is hard: featured and top 10 lists are extremely competitive.
80. Native Apps with Web UI Native apps can also simply be a wrapper for a mobile web app.
81. Native app is a wrapper for the web Positive Familiar development. Avoids deploying custom code for different mobile operating systems. Relatively inexpensive compared to multiple native apps. Negative Still producing sites for single device sizes. This thinking is unsustainable.
82. All fall short. These strategies are all incomplete.
83. “The mobile web is the only long- term commercially viable content platform for mobile devices. http://mobiledesign.org/the_ubiquity_principle Brian Fling The mobile web is the only long-term commercially viable content platform for mobile devices. But I’m not advocating mobile-specific sites.
84. Responsive Web Design What we really need is an alternative approach: flexible and ubiquitous. We need Responsive Web Design.
85. http://www.flickr.com/photos/roboppy/251526872/ The Web is like water. Water adapts to the shape of its container naturally. Our design language and principles are derived from the canvas: a space with fixed dimensions. We imposed these constraints on the Web to exercise control and familiarity. We did this against the Web’s nature.
86. “We should embrace the fact that the web doesn’t have [print’s] constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things”. http://www.alistapart.com/articles/dao/ JOHN Allsop Twelve years ago John Allsopp wrote “A Dao of Web Design” suggesting we “accept the ebb and flow of things”. This rings truer today. Screens are getting smaller and larger simultaneously. Our artificial constraints break the Web, rather than embracing its fluidity. Responsive Web Design is a philosophy and methodology to design a flexible Web. Not simply fluid for the container, but adaptive to the content and user’s context.
87. http://www.flickr.com/photos/drewm/5736754615/ Ethan Marcotte = Responsive Web Design It was delineated by Ethan Marcotte.
88. http://www.abookapart.com/products/responsive-web-design If I convince you of anything, read his treatise: Responsive Web Design. I’ll give it a glancing summary.
89. Responsive Components ๏ Fluid Grids ๏ Flexible Images ๏ Media Queries The foundations of responsive design spring from three core elements: Fluid grids Flexible images Media queries
90. Fluid Grids
91. http://en.wikipedia.org/wiki/Grid_(page_layout) The grid is a graphic design tool for creating layouts with consistent line, space, and rhythm.
92. http://en.wikipedia.org/wiki/Grid_(page_layout) They originate from the content and are bound by the page’s dimensions. On the web you see grid frameworks in use every day without even realizing it. But, as I’ve noted, the web is inherently flexible and fixed-width grids don’t embrace this. So the first charge of responsive web design is constructing fluid grids.
93. http://960.gs/demo.html Let’s start with a simple 960px grid having twelve 60 pixel columns and 20 pixel gutters.
94. <div class=”blog”> <div class=”main”> Main content </div> <div class=”sidebar”> Sidebar content </div> </div> We’re designing a layout with a main content area 620 pixels wide and a sidebar 300 pixels wide. Our markup probably looks like this:
95. .blog { overflow:hidden; width:960px; margin:0 auto; } .blog > div { float:left; margin:0 10px; } .blog .main { width:620px; } .blog .sidebar { width:300px; } And let’s add some very basic CSS. That’s a good start, but it’s still rigid. We need to define our grid dimensions in relative terms to maintain the proportions in our design across differently sized browsers.
96. target ÷ context = result Marcotte provides the formula: target / context = result
97. .blog { overflow:hidden; width:960px; margin:0 auto; } .blog > div { float:left; margin:0 10px; } .blog .main { width:620px; } .blog .sidebar { width:300px; } Starting with the “main” class, the target width is 620px. The context width is its parent container’s width (.blog) which is 960px. So we have:
98. 620 px ÷ 960 px = 0.6458333333 620 divided by 960 = a really long decimal
99. 0.6458333333 × 100 = 64.58333333 % Convert this value to a percentage by multiplying by 100.
100. BEFORE: .blog { overflow:hidden; width:960px; margin:0 auto; } .blog > div { float:left; margin:0 10px; } .blog .main { width:620px; } .blog .sidebar { width:300px; } AFTER: .blog { overflow:hidden; max-width:960px; margin:0 auto; } .blog > div { float:left; margin:0 1.041666667%; /* 10/960 */ } .blog .main { width:64.58333333%; /* 620/960 */ } .blog .sidebar { width:31.25%; /* 300/960 */ } Compare the fixed and relative CSS. Notice I changed the width on .blog to max-width:960px; to prevent the container from becoming awkwardly large. That’s it. Now our grid is fluid and proportional.
101. Flexible Images Fluid grids work great for textual content, but what about images? On a narrow screen they can easily overflow their container, which is poor form. We can instruct the browser to flexibly scale images with one rule:
102. img { max-width:100%; } If the image is too wide, this will scale it down with its parent container. max-width can be applied to many media elements including img, embed, object, and video. It’s well supported in modern browsers — including IE7 and up — but there are performance considerations. I’ll touch on them later.
103. Wait, that’s just liquid layout. By now you might be thinking: “That’s just liquid layout.” like Wikipedia.
104. http://en.wikipedia.org/wiki/Charlie_Chaplin_filmography And it becomes unusable at the extremes.
105. http://en.wikipedia.org/wiki/Charlie_Chaplin_filmography The glue in responsive web design is media queries.
106. Media Queries Media queries let us write conditional rules to control the inheritance, fallback, and re- definition of CSS. This is incredibly powerful. We can adjust a site’s layout and style to create the best experience for whatever size the user’s device is. Media queries use technology every front-end developer is familiar with and have widespread adoption in the latest browsers.
107. width height device-width device-height orientation aspect-ratio device-aspect-ratio device-pixel-ratio color color-index monochrome resolution scan grid http://www.w3.org/TR/css3-mediaqueries/ They extend the media type functionality with expressions to match particular media features. I won’t go into detail on every media feature. Many can use min/max prefixes to create ranges. Primarily you’ll be working with width, height, and device-pixel-ratio.
108. <link href=”style.css” rel=”stylesheet” media=”screen and (min-width:480px)” /> The syntax is pretty straightforward and builds on CSS2 media types.
109. @media screen { body { font-size:14px; } } @media screen and (min-width:480px) { body { font-size:16px; } } @media screen and (min-width:1024px) { body { font-size:18px; } } It can also be referenced inline. In this example, I’m setting a font-size of 14px for all screen sizes. The absence of a media query is the first media query. You can use this intelligently to define baseline styles without layout. If the screen is larger than 480 pixels and later 1024 pixels, then the font-size is bumped up. Browsers re-render the layout instantly as the viewport changes size.
110. Viewport Scaling By default, smartphones and tablets will scale down websites that are wider than the screen’s device-width value. Pinching and zooming requires a substantial amount of additional input though, and isn’t ideal.
111. <meta name=”viewport” content=”initial-scale=1.0, width=device-width” /> We can set a baseline viewport for these devices that prevents them from scaling. For example, on the iPhone 4S, this changes the viewport width from 980px to 320px, and lets us easily use width-based media queries to alter layout.
112. ๏ Internet Explorer 9+ ๏ Chrome 4+ ๏ Firefox 3.5+ ๏ Opera 9.5+ ๏ iOS 3.2+ ๏ Android 2.1+ Browser Support http://caniuse.com/css-mediaqueries Browser and mobile device support is good, but it presents some problems for older versions of Internet Explorer. Thankfully there are some JS polyfills.
113. Polyfills https://github.com/scottjehl/Respond Respond.js http://code.google.com/p/css3-mediaqueries-js/ css3-mediaqueries-js Respond.js is a fast and lightweight polyfill for min/max-width media queries in IE 6-8. I use this in most projects because it covers the primary use cases. A more robust (but heftier) solution is css3-mediaqueries-js:
114. Mobile First In the eCommerce world, mobile almost always comes after the desktop site. It’s not necessarily an afterthought, but desktop has been the dominant access method. So a lot of major enterprises are invested and entrenched in their desktop site. If you’re building a Responsive website, then scaling down your desktop site is a big mistake. You should be thinking Mobile First.
115. http://www.flickr.com/photos/localcelebrity/6022720655/ Luke Wroblewski = Mobile First It’s a methodology put forth by Luke Wroblewski suggesting that experiences should start at the mobile scale, and ramp up to bigger, more capable devices.
116. http://www.abookapart.com/products/mobile-first Like Marcotte, he’s written a book on the subject which is worth every penny.
117. Mobile is the frontier I wager everyone in this room has a dozen competitors whose website has feature and content parity. It’s really hard to stand out. By comparison, good mobile web experiences are far and few between. Mobile is Manifest Destiny. You need to stake a claim before the frontier is settled.
118. Small form factor = priorities Mobile First means embracing the constraints of a small screen. Think about the must-haves of a desktop eCommerce site: Nice, prominent logo Multi-tiered navigation Search Account links Sidebars Facebook widgets
119. 6 square inches Now squeeze all that into 6 square inches. Oh, I forgot. We didn’t mention any actual content yet: Product names Photography Description Details Reviews Configurable options Related products Call to action
120. Narrow your focus. Prioritize user needs. Big screens have made us lazy, and we caved in. Most websites are an assault on the user’s senses. Designing for the mobile experience first narrows your focus and prioritizes user needs.
121. Ripe for innovation Contexts in which mobile devices are used is much more varied than traditional computers. New capabilities and sensors native to these devices enable innovative experiences not possible or relevant to desktops. When’s the last time you pulled out your laptop in the grocery store?
122. Methodology for responsive design In development, applying the mobile first methodology to responsive design is logical and produces more maintainable code.
123. “ We’re just now starting to get into mobile first and web second for a lot of our products . . . it’s actually teaching us a lot about how to design back to the desktop. http://www.lukew.com/ff/entry.asp?1226 Kate Aronowitz Facebook, Director of design Starting with simple semantic markup and CSS leads to a clean foundation for progressive enhancement, and it can help you design better desktop sites.
124. RWD Examples So what does it actually look like? Responsive design is hard to demonstrate without a few devices or at least a browser to resize. The following examples show screenshots of sites at various breakpoints to demonstrate their adaptation to the available space.
125. Responsive These designs use the full gamut of responsive techniques.
126. alistapart.com/articles/responsive-web-design/ This is Ethan Marcotte’s canonical responsive design example from May 2010.
127. BostonGlobe.com The Boston Globe was the first high-profile site to fully embrace these techniques.
128. BarackObama.com Obama does it.
129. SmashingMagazine.com Online publishers do it.
130. MediaQueri.es There are hundreds of examples cataloged at the Media Queries site.
131. Adaptive Adaptive sites use media queries to adjust the layout at specific breakpoints, but aren’t necessarily 100% fluid in between those breakpoints.
132. 8faces.com 8faces is limited-run book publisher.
133. CiscoLondon2012.com Cisco’s site for the London 2012 Olympics is adaptive.
134. Responsive eCommerce There are surprisingly few examples of eCommerce sites utilizing responsive design. A few responsive themes for Shopify, OpenCart, and WordPress eCommerce are popping up, but they’re not exemplary of the approach’s potential. Several bespoke implementations are heading in the right direction though:
135. Nuts.com Nuts.com has a deep catalog and information architecture, but doesn’t require separate mobile sites.
136. Nuts.com product view The content reacts to the viewport size and adapts to fit best. It’s one of the few complex implementations of responsive eCommerce currently.
137. WearYouBelong.com The first wave will be small shops like Wear You Belong with limited amounts of content and functionality.
138. What’s holding eCommerce back? Why haven’t major brands published responsive storefronts? It’s complicated.
139. Mobile disrupts selling Combining mobile and commerce is disruptive. The issue is bigger than websites and apps. The minute customers started carrying the Internet in their pocket retailing became more exponentially more competitive and multi-faceted. Organizational structures and business practices need to adapt to reflect the new environment.
140. It’s a major investment The MF/RWD approach requires a major reinvestment to rebuild the front-end system using modern techniques. Likewise, re-architecting content entrenched in legacy infrastructure is expensive and difficult. New enterprises have a significant advantage in starting fresh, and this is where responsive eCommerce will appear first.
141. You need stakeholder buy-in Navigating these strategic constraints is not only complex, but it usually requires a champion in a C-suite position.
142. Partner processes need to change Technology partners need to adapt too. Many eCommerce agencies are factories. Salesmen, project managers, designers, and engineers work in silos passing the project down the line. Their process isn’t structured for cross-functional teams, exploration, prototyping, and iterative design/development.
143. Small teams will get there first Smaller, agile teams are best equipped to define the vision and execute the process that responsive eCommerce requires.
144. Demo: SkinnyTies.com Skinny Ties is a company I’ve been working on a major branding and design realignment with over the last year. We’re about 80% complete, but I’d like to show you a functional prototype of their new Magento-powered site that’s fully responsive.
145. Techniques There is no perfect toolkit. You’ll need a myriad of approaches for different projects. These are kickstarters to get you off on the right foot.
146. Responsive Content
147. FitText is a jQuery plugin for scaling text.
148. FitVids is a jQuery plugin for maintaining the proportion in scaled video.
149. jQuery Anystretch is plugin to dynamically resize background images.
150. High-res displays & image assets Devices like the iPhone 4, 4S, iPad 3, and some newer Android phones have high resolution displays that are more than double the pixel density of computer displays. To serve crisp images, your assets need to be 2x or 1.5x depending on the platform. This has a big impact on performance. You don’t want a iPhone user wait for 3 megabytes of product photos to download over 3G. And you don’t want a desktop user to download larger assets than their hardware can display.
151. There are several approaches managing this. Retina JS is mimics Apple’s pattern of loading the smallest usable image first. In the background, the script begins downloading the hi-res assets after the page has finished loading. They’re swapped in as soon as they’re ready. In total bandwidth, this technique is expensive but the perceived speed is fast because users aren’t waiting on large assets.
152. Adaptive Images uses a server side callback to determine the screen size, then scale, cache, and deliver the appropriately sized asset. Neither of these methods is perfect. There isn’t a standard, reliable method for designating alternate resolution images in markup but a proposal is being primed for W3C review.
153. Responsive Testing Test on real devices. Buy a tablet or two. Get a cheaper Android phone. There is no substitute or emulator that can simulate the dexterity of touch gestures.
154. Responsive.is is one of my go-to tools for testing common device breakpoints.
155. Matt Kersley built an iframe previewer.
156. Screenfly is like Responsive.is on steroids with profiles for dozens of devices.
157. Aptus is a Mac app designed specifically for responsive testing. It lets you set the specific breakpoints necessary and quickly scale to them.
158. CSS Pre-Processors Pre-processors enable a super-set of CSS with features like variables and functions. They drastically reduce the effort in using vendor-prefixed properties, and help you write more flexible, readable stylesheets.
159. LESS is a library that can run on the client or server-side.
160. SASS is an alternative library, and my weapon of choice because the open-source Compass framework runs on it.
161. Compass is basically a bundle of shortcuts and pre-defined mixins that make authoring complex CSS simpler.
162. Frameworks Responsive frameworks are a good way to wet your feet. They provide markup, reusable design patterns, and generic examples to learn from.
163. HTML5 Mobile Boilerplate
164. 320 and Up
165. Twitter Bootstrap
166. and Skeleton
167. Responsive Grid Systems Responsive grid systems serve the same purpose as frameworks.
168. Less
169. 1140 CSS Grid
170. Gridpak for generating your own grids.
171. And Gridset for complex grids.
172. Assumptions / Pitfalls These are some common traps in responsive/mobile thinking.
173. Content for multiple contexts is the same. Content for multiple contexts is the same.
174. Content for multiple contexts is the same. I can’t tell you ‘users want X on smartphones and Y on desktops’. You can’t guess it either or copy from your competitors. Analytics data and user testing are invaluable and inexpensive tools to uncover how people use your site.
175. Cost per KB to the user is minimal or non-existent. Cost per kilobyte to the user is minimal or non-existent.
176. Cost per KB to the user is minimal or non-existant. Over 3G mobile websites frequently take over 10 seconds to load. Front-end optimization is critical. Compress, cache, and modularize resources whenever possible. Use tools like YSlow to grade performance and identify weaknesses. Minimizing HTTP requests and using a CDN can significantly reduce page load times.
177. Persistent and high-speed network access is available. Persistent and high-speed network access is available.
178. Persistent and high-speed network access is available. Even with highly performant websites, we’ve all experienced dead zones and reverting to 2G networks. Quality and strength of cellular connections vary widely. New HTML5 APIs can provide some relief through offline web applications, web storage, and indexed databases.
179. Mobile browsers are smart and will support the same standards consistently. Mobile browsers are smart and will support the same standards consistently.
180. Mobile browsers are smart and will support the same standards consistently. WebKit dominates iOS and Android but it’s not the only mobile browser. Opera Mobile, Firefox Mobile, Windows Phone 7 IE9, BlackBerry browser, etc. are all in the wild. Even within WebKit standards are evolving. When the iPad launched it supported the ‘orientation’ media query, but the iPhone OS wasn’t updated with this addition until months later.
181. Technology comes before user needs. Technology comes before user needs.
182. Technology comes before user needs. This is a thorny area and getting more complex. It’s tempting to buy into a solution provider’s “package” and throw technology at users. Don’t do this. Start with user goals and work backwards. You’ll discover mistakes faster and create better experiences.
183. Best practices When designing for small screens be prepared to validate every assumption made for desktop websites.
184. Lead with content Scaling the complex information architecture of eCommerce websites to small screens can be challenging. Always lead with content rather than navigation.
185. Nav first Content first Browser chrome, navigation, search, and account info eat up valuable screen space. Collapse them using overlays or show the site’s architecture in the page footer so users see content first.
186. Super-sized touch targets Touch targets need to be large. Easy to see. Easy to tap. Compared to normal web buttons, on mobile devices buttons can seem toylike. You need to test on real devices to get a feel for what works.
187. 44 px width 56 px height Practical minimum: 44 x 30 iOS Human Interface Guidelines suggest a minimum of button size of 44x44 pixels (about 1/4”). The iPhone’s keyboard breaks this suggestion out of necessity. The practical minimum size for any tap target is 44 x 30. At least one dimension should hit the minimum value. Tighter spacing requires bigger buttons to prevent mis-taps. If possible try to separate alternative actions to reduce mis-taps.
188. Tablets Tablets fill an odd space. They’re significantly smaller than desktop screens, but often have comparable or greater resolutions.
189. http://www.apple.com/ipad/features/ 10 inch tablets like the iPad usually work great desktop-scale sites.
190. http://www1.pcmag.com/media/images/271407-amazon-kindle-fire-cnn.jpg 6 to 8 inch tablets like the Kindle Fire straddle the line between mobile and desktop scale though, and both present awkward user experiences. Mobile designs look comically huge on them, while desktop sites are crunched too much for comfort. Yet, they’re strong enough to provide good usability with non-linearized content when some care is given to designing for the 7-inch form factor.
191. Be user-centered Follow user-centered design principles.
192. Never limit user’s capabilities based on their device. Never limit user’s capabilities based on their device. Context is not determined by the device.
193. Context ‑ Action Context is based on action.
194. Action ‑ Goals Action stems from goals.
195. Goals ‑ Needs Goals are a manifestation of needs.
196. Needs are the root of context. Needs are the root of a user’s context. Website content should be published once, and devices should be smart enough to know what to render. Adaptive content is a real solution to device-centric experiences.
197. “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. http://mobiledesign.org/do_nothing w3c One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.
198. “However, it does not mean that exactly the same information is available in exactly the same representation across all devices. http://mobiledesign.org/do_nothing W3c However, it does not mean that exactly the same information is available in exactly the same representation across all devices.
199. Think about what users need and expect. Think about what users need and expect.
200. Why offer guest checkout? Why offer guest checkout?
201. An account isn’t necessary to buy. Signing up for an account isn’t always necessary. It delays the first transaction.
202. What’s your TPS? Let’s look at another example. What’s your TPS?
203. Not Lumbergh’s TPS. Not Lumbergh’s TPS.
204. TPS = Time Pre-Shopping TPS = Time Pre-Shopping
205. 1. Visit the app store 2. Search for the app 3. Authenticate 4. Download 5. Downloading... 6. Downloading... 7. Downloading... 8. Downloading... 9. Install 10. Browse APP 3 minutes For a native app, users have a three minute delay before they can start shopping.
206. 1. Click link 2. Browse Website 1. Visit the app store 2. Search for the app 3. Authenticate 4. Download 5. Downloading... 6. Downloading... 7. Downloading... 8. Downloading... 9. Install 10. Browse APP 3 minutes 3 seconds For a website, their delay is 3 seconds.
207. Mobile Commerce has expectations rooted in eCommerce. Mobile Commerce has expectations rooted in eCommerce. Users shouldn’t need another account to make a purchase, and they shouldn’t need an app to make a purchase.
208. Don’t add friction. Delivering the app is a barrier. Delivering app updates is a barrier. Apps increase friction in a way you can’t negate. The web has continuous deployment baked in. It’s not a strength you want to give up, and you can deliver comparable experiences using standardized web technologies.
209. Be future friendly Be future friendly.
210. Jakob Nielsen = Usability Expert http://www.useit.com/jakob/photos/ This is Jacob Nielsen. He’s been writing about web usability for 17 years. Business Week has called him one of the “world’s most influential designers”.
211. “Mobile apps currently have better usability than mobile sites... http://www.useit.com/alertbox/mobile-sites-apps.html jakob Nielsen He says: Mobile apps currently have better usability than mobile sites. But...
212. “Mobile sites will win over mobile apps in the long term. http://www.useit.com/alertbox/mobile-sites-apps.html jakob Nielsen Mobile sites will win over mobile apps in the long term.
213. Why? Expenses increase rapidly when developing for more platforms to the point where minimal ROI makes further development unsustainable for new platforms. The web is one platform, and it benefits from full integration with the rest of the web.
214. Raise your hand if you... ๏ Send email to customers ๏ Participate in social media ๏ Optimize for search engines ๏ Advertise online Please raise you hand and keep it raised if any of these apply to you. Send email to customers. Participate in social media. Optimize for search engines. Advertise online. Actually, nevermind. Raise your hand if you do none of those things.
215. Links don’t open apps. Links don’t open apps. The predominant marketing efforts are based on links. It doesn’t matter what device you’re using. Links open the web.
216. “The only native application that matters is the browser. http://mobiledesign.org/the_ubiquity_principle Brian Fling The only native application that matters is the browser.
217. “ Anyone who’s betting against the Web right now is an idiot. http://mobiledesign.org/the_ubiquity_principle daniel applequist co-chair W3C Mobile web initiative Anyone who’s betting against the web right now is an idiot.
218. Your Strategy Now let’s put it all together.
219. Start with your business goals Start with your business goals. How can a mobile presence help you achieve them? Will it improve your current reach? Will it open up new opportunities?
220. Study users and talk to them Study users and talk to them. How do they use mobile devices? What tasks do they perform? When do they use mobile vs tablet vs desktop? Where? What info is most valuable to them? What influences their decisions?
221. Define your target device classes Define your target device classes. Use your analytics data to determine which device classes matter to your business, and set the baseline experience you will deliver. Progressively enhance and iterate. The latest and greatest device is not necessarily the most relevant. Don’t be afraid to abandon legacy browsers. Your return may be higher from devoting resources to the sum of growing devices than a single old browser.
222. Study and leverage best practices Study and leverage best practices. Some of your competitors are already active in mobile. Explore what has been done and identify best practices and failures. Look outside your industry for innovation at big and small companies. Identify what your users are accustomed to. Clarify and make the experience unique.
223. Simplify tasks. Don’t limit features. Simplify tasks. Don’t limit features. Mobile behavior includes frequent, short dips but also long, sustained dives. Focus on removing barriers and distractions so people can get in/out easily, but also have reason to stay. Drive this thinking to large-screen experiences.
224. Don’t assume you know the user’s context. Don’t assume you know the user’s context. Start with user goals and work backwards. You’ll uncover assumptions faster, avoid costly mistakes and rewrites, and create better experiences.
225. Test on real devices. Test on real devices. Resizing browsers and running device emulators aren’t an effective stand-in or representative of touch/gesture interfaces.
226. Engage designers and engineers in strategic discussions. Engage designers and engineers in strategic discussions. They are experts in user experience, information architecture, usability, interaction design, performance, and optimization. Delivering responsive design requires a lattice-work of ideas and collaboration across disciplines. Leave silos and titles at the door.
227. Think future friendly. Think future friendly. Initially everyone will struggle to adapt to new processes, workflows, and methodologies. Don’t settle for an outmoded strategy that aims for a new sliver. Responsive design is the whole pie.
228. Thank you. I want to thank Magento for inviting me to speak. And thank you all for listening and making the conference a pleasure.
229. Questions Questions. Please queue in the aisle so you can use the microphone.
230. Get in touch. ๏ Web: GravityDept.com ๏ Email: hello@gravitydept.com ๏ Twitter: @GravityDept (propaganda) ๏ Twitter: @Falkowski (intelligence) I’d love to hear from you if you’re working on these problems too, or would like me to help you solve them.