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
   

   View Slide

2. Good afternoon!
   Good afternoon!
   

   View Slide

3. Brendan
   Falkowski
   @Falkowski
   I’m Brendan Falkowski. Today I’m going to talk about mobile first, responsive design for
   eCommerce.
   

   View Slide

4. But first, let me briefly explain what I do.
   

   View Slide

5. GravityDept.com
   I founded a small web strategy and design studio called Gravity Department.
   

   View Slide

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?
   

   View Slide

7. GravDept’s projects
   Client Work
   50%
   Products
   50%
   My work is split 50/50 between client services and products, like Acumen.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

13. http://derek.broox.com/photos/closet-cleaning/19356/
    Five years ago, no phones had the full web. They weren’t very smart.
    

    View Slide

14. http://en.wikipedia.org/wiki/File:Tablet.jpg
    Two years ago, tablets were a laughable at best. Bulky hardware. Bloated software.
    

    View Slide

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.
    

    View Slide

16. Mobile isn’t
    emerging.
    Mobile isn’t emerging.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

19. A normal day near
    the end of 2011
    Let’s look at a 24 hour span near the end of 2011:
    

    View Slide

20. Children
    born per day
    371thousand
    This is the number of children born.
    

    View Slide

21. iPhones
    sold per day
    378thousand
    iPhones sold.
    

    View Slide

22. 184thousand
    Other iOS devices (iPod + iPad)
    sold per day
    Other iOS devices sold.
    

    View Slide

23. Android devices
    activated per day
    700thousand
    Android devices activated.
    

    View Slide

24. Nokia smartphones
    sold per day
    200thousand
    Nokia smartphones sold.
    

    View Slide

25. Blackberries
    sold per day
    143thousand
    Blackberries sold.
    

    View Slide

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.
    

    View Slide

27. 90%
    of people on Earth live within
    mobile network access today
    90% of the world lives within mobile network access today.
    

    View Slide

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.
    

    View Slide

29. one
    billion
    will own
    smartphones
    by 2016
    By 2016, Forrester estimates 1 billion people will own smartphones.
    

    View Slide

30. one
    billion
    will own
    smartphones
    350
    Million
    will use
    smartphones
    at work
    by 2016
    350 million workers will use smartphones daily.
    

    View Slide

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.
    

    View Slide

32. Mobile commerce
    growth
    Mobile commerce is growing just as fast.
    

    View Slide

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.
    

    View Slide

34. Amazon sales from
    mobile devices in 2010
    $1billion
    Amazon’s revenue from mobile devices was over 1 Billion dollars in 2010.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

37. 40%
    of eBay transactions
    came from its mobile app
    And 40% of their online transactions came from its 1-year-old mobile app.
    

    View Slide

38. (Too) many form
    factors
    What is a mobile device? The landscape is becoming increasingly diverse.
    Let’s define some device classes.
    

    View Slide

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.
    

    View Slide

40. Smartphones
    http://www.intomobile.com/wp-content/uploads/2011/04/smartphones.jpg
    Smartphones
    Smartphones.
    iPhone. Tons running Android. Windows 7 Phone. Blackberry. Nokia.
    

    View Slide

41. Portable Media Players
    Portable Media Players.
    iPod Touch.
    Android-based media players.
    Sony PS Vita.
    Nintendo DS.
    

    View Slide

42. eReaders
    eReaders.
    Amazon Kindles.
    Barnes & Noble Nook.
    Sony Reader.
    

    View Slide

43. Tablets
    Tablets.
    iPad.
    Android.
    Kindle Fire.
    Blackberry Playbook.
    HP TouchPad.
    

    View Slide

44. Computers
    Computers.
    Desktops.
    Laptops.
    Netbooks.
    

    View Slide

45. Other Screens
    Other screens.
    Internet enabled TV.
    Game consoles.
    Refrigerators.
    Contact lenses. The US Army is commissioning them.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

48. One does not simply support mobile.
    One does not simply support mobile.
    Not with 10,000 developers could you do this.
    

    View Slide

49. It is folly.
    It is folly.
    

    View Slide

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?
    

    View Slide

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.
    

    View Slide

52. daishō
    Daishō is the pairing of long and short swords. Each sword is designed for a specific
    constraint.
    

    View Slide

53. tachi
    (long sword)
    tachi (long sword) for open-field battle on horseback and tantō...
    

    View Slide

54. tantō (short sword)
    tantō (short sword) for close-quarters combat on foot.
    

    View Slide

55. Different sizes.
    Same objective.
    Different size. Same objective.
    

    View Slide

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.
    

    View Slide

57. Different sizes.
    Same objective.
    Together they cover specific needs.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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:
    

    View Slide

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.
    

    View Slide

65. 6%
    of iPad sessions use
    cellular networks
    Only 6% of iPad sessions come from cellular networks
    

    View Slide

66. 94%
    use WiFi
    leaving 94% of access over WiFi.
    

    View Slide

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.
    

    View Slide

68. Building
    applications for
    many devices
    What can you build? Let’s explore our options:
    

    View Slide

69. Desktop Website
    You already have one of these I hope. It’s probably designed for 1024 by 768 screens and up.
    

    View Slide

70. Threadless.com
    Positives are it’s a “do nothing” strategy. Mobile browsers automatically scale websites to fit
    available width.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

78. Good user experiences
    Positive
    Native apps can have better usability than the mobile web today.
    

    View Slide

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.
    

    View Slide

80. Native Apps with
    Web UI
    Native apps can also simply be a wrapper for a mobile web app.
    

    View Slide

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.
    

    View Slide

82. All fall short.
    These strategies are all incomplete.
    

    View Slide

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.
    

    View Slide

84. Responsive
    Web Design
    What we really need is an alternative approach: flexible and ubiquitous. We need Responsive
    Web Design.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

87. http://www.flickr.com/photos/drewm/5736754615/
    Ethan Marcotte
    =
    Responsive
    Web Design
    It was delineated by Ethan Marcotte.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

90. Fluid Grids
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

93. http://960.gs/demo.html
    Let’s start with a simple 960px grid having twelve 60 pixel columns and 20 pixel gutters.
    

    View Slide

94. 
    
    Main content
    
    
    Sidebar content
    
    
    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:
    

    View Slide

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.
    

    View Slide

96. target ÷ context
    = result
    Marcotte provides the formula:
    target / context = result
    

    View Slide

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:
    

    View Slide

98. 620 px ÷ 960 px
    = 0.6458333333
    620 divided by 960 = a really long decimal
    

    View Slide

99. 0.6458333333 × 100
    = 64.58333333 %
    Convert this value to a percentage by multiplying by 100.
    

    View Slide

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.
     

     View Slide

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:
     

     View Slide

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.
     

     View Slide

103. Wait, that’s just
     liquid layout.
     By now you might be thinking: “That’s just liquid layout.” like Wikipedia.
     

     View Slide

104. http://en.wikipedia.org/wiki/Charlie_Chaplin_filmography
     And it becomes unusable at the extremes.
     

     View Slide

105. http://en.wikipedia.org/wiki/Charlie_Chaplin_filmography
     The glue in responsive web design is media queries.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

108. href=”style.css”
     rel=”stylesheet”
     media=”screen and (min-width:480px)”
     />
     The syntax is pretty straightforward and builds on CSS2 media types.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

111. 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.
     

     View Slide

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.
     

     View Slide

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:
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

116. http://www.abookapart.com/products/mobile-first
     Like Marcotte, he’s written a book on the subject which is worth every penny.
     

     View Slide

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.
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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.
     

     View Slide

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?
     

     View Slide

122. Methodology for
     responsive design
     In development, applying the mobile first methodology to responsive design is logical and
     produces more maintainable code.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

125. Responsive
     These designs use the full gamut of responsive techniques.
     

     View Slide

126. alistapart.com/articles/responsive-web-design/
     This is Ethan Marcotte’s canonical responsive design example from May 2010.
     

     View Slide

127. BostonGlobe.com
     The Boston Globe was the first high-profile site to fully embrace these techniques.
     

     View Slide

128. BarackObama.com
     Obama does it.
     

     View Slide

129. SmashingMagazine.com
     Online publishers do it.
     

     View Slide

130. MediaQueri.es
     There are hundreds of examples cataloged at the Media Queries site.
     

     View Slide

131. Adaptive
     Adaptive sites use media queries to adjust the layout at specific breakpoints, but aren’t
     necessarily 100% fluid in between those breakpoints.
     

     View Slide

132. 8faces.com
     8faces is limited-run book publisher.
     

     View Slide

133. CiscoLondon2012.com
     Cisco’s site for the London 2012 Olympics is adaptive.
     

     View Slide

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:
     

     View Slide

135. Nuts.com
     Nuts.com has a deep catalog and information architecture, but doesn’t require separate
     mobile sites.
     

     View Slide

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.
     

     View Slide

137. WearYouBelong.com
     The first wave will be small shops like Wear You Belong with limited amounts of content and
     functionality.
     

     View Slide

138. What’s holding
     eCommerce back?
     Why haven’t major brands published responsive storefronts? It’s complicated.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

146. Responsive
     Content
     

     View Slide

147. FitText is a jQuery plugin for scaling text.
     

     View Slide

148. FitVids is a jQuery plugin for maintaining the proportion in scaled video.
     

     View Slide

149. jQuery Anystretch is plugin to dynamically resize background images.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

154. Responsive.is is one of my go-to tools for testing common device breakpoints.
     

     View Slide

155. Matt Kersley built an iframe previewer.
     

     View Slide

156. Screenfly is like Responsive.is on steroids with profiles for dozens of devices.
     

     View Slide

157. Aptus is a Mac app designed specifically for responsive testing. It lets you set the specific
     breakpoints necessary and quickly scale to them.
     

     View Slide

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.
     

     View Slide

159. LESS is a library that can run on the client or server-side.
     

     View Slide

160. SASS is an alternative library, and my weapon of choice because the open-source Compass
     framework runs on it.
     

     View Slide

161. Compass is basically a bundle of shortcuts and pre-defined mixins that make authoring
     complex CSS simpler.
     

     View Slide

162. Frameworks
     Responsive frameworks are a good way to wet your feet. They provide markup, reusable
     design patterns, and generic examples to learn from.
     

     View Slide

163. HTML5 Mobile Boilerplate
     

     View Slide

164. 320 and Up
     

     View Slide

165. Twitter Bootstrap
     

     View Slide

166. and Skeleton
     

     View Slide

167. Responsive
     Grid Systems
     Responsive grid systems serve the same purpose as frameworks.
     

     View Slide

168. Less
     

     View Slide

169. 1140 CSS Grid
     

     View Slide

170. Gridpak for generating your own grids.
     

     View Slide

171. And Gridset for complex grids.
     

     View Slide

172. Assumptions
     / Pitfalls
     These are some common traps in responsive/mobile thinking.
     

     View Slide

173. Content for
     multiple contexts is
     the same.
     Content for multiple contexts is the same.
     

     View Slide

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.
     

     View Slide

175. Cost per KB to the
     user is minimal or
     non-existent.
     Cost per kilobyte to the user is minimal or non-existent.
     

     View Slide

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.
     

     View Slide

177. Persistent and
     high-speed
     network access is
     available.
     Persistent and high-speed network access is available.
     

     View Slide

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.
     

     View Slide

179. Mobile browsers
     are smart and will
     support the same
     standards
     consistently.
     Mobile browsers are smart and will support the same standards consistently.
     

     View Slide

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.
     

     View Slide

181. Technology comes
     before user needs.
     Technology comes before user needs.
     

     View Slide

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.
     

     View Slide

183. Best practices
     When designing for small screens be prepared to validate every assumption made for desktop
     websites.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

188. Tablets
     Tablets fill an odd space. They’re significantly smaller than desktop screens, but often have
     comparable or greater resolutions.
     

     View Slide

189. http://www.apple.com/ipad/features/
     10 inch tablets like the iPad usually work great desktop-scale sites.
     

     View Slide

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.
     

     View Slide

191. Be
     user-centered
     Follow user-centered design principles.
     

     View Slide

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.
     

     View Slide

193. Context
     ‑
     Action
     Context is based on action.
     

     View Slide

194. Action
     ‑
     Goals
     Action stems from goals.
     

     View Slide

195. Goals
     ‑
     Needs
     Goals are a manifestation of needs.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

199. Think about what
     users need and expect.
     Think about what users need and expect.
     

     View Slide

200. Why offer guest
     checkout?
     Why offer guest checkout?
     

     View Slide

201. An account isn’t
     necessary to buy.
     Signing up for an account isn’t always necessary. It delays the first transaction.
     

     View Slide

202. What’s your TPS?
     Let’s look at another example.
     What’s your TPS?
     

     View Slide

203. Not Lumbergh’s TPS.
     Not Lumbergh’s TPS.
     

     View Slide

204. TPS =
     Time Pre-Shopping
     TPS = Time Pre-Shopping
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

209. Be future
     friendly
     Be future friendly.
     

     View Slide

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”.
     

     View Slide

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...
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

218. Your Strategy
     Now let’s put it all together.
     

     View Slide

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?
     

     View Slide

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?
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

229. Questions
     Questions. Please queue in the aisle so you can use the microphone.
     

     View Slide

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.
     

     View Slide