Responsive Design Panel: Where, Why, and How

Devices are everywhere these days. Doing good business on all of them is so complex you don’t know where to begin. Take a deep breath. I’ll show you how I’ve helped companies form a plan, budget their resources, and invest in a future-friendly, multi-device strategy with sensational ROI.

This is a panel discussion between Gravity Department, Gorilla Group, and Lyons Consulting Group.

More info: http://gravitydept.com/blog/magento-imagine-2013-responsive-design-panel/

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

Transcript

1. Responsive Design Panel
   Where, Why, and How
   Las Vegas, Nevada
   April 9, 2013
   Magento Imagine Conference
   Strategic Marketing Track
   

   View Slide

2. Erin Tozour
   Magento
   Tonya Browning
   Magento
   Moderators
   David Barr
   Lyons Consulting Group
   Brendan Falkowski
   Gravity Department
   Bob Meyer
   Gorilla Group
   Panelists
   

   View Slide

3. Brendan Falkowski
   Founder
   Gravity Department
   Falkowski
   Good morning. I’m Brendan
   Falkowski.
   

   View Slide

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

   View Slide

5. Design Consulting For
   My work is split 50/50 between client services for companies like Skinny Ties and Angry
   Birds.
   

   View Slide

6. Acumen Theme
   • Used by 1200+ stores
   • 3 years of updates
   • Ready-to-launch frontend
   • Made for customization
   http://gravitydept.com/to/acumen-magento
   And product development like Acumen, a best-selling ready-to-launch Magento
   theme.
   

   View Slide

7. And MageFrontend: a responsive design toolkit for Magento
   Enterprise.
   

   View Slide

8. Magento Certification
   Advisory Board Member
   I’m also a member of Magento’s Advisory Board for certifying
   developers.
   

   View Slide

9. A day in the life
   Everything I do these days is multi-device in
   nature.
   

   View Slide

10. How much does
    responsive design cost?
    This is something almost everyone who contacts me wants to know. There are two
    answers.
    

    View Slide

11. $5,000?
    $20,000?
    $100,000?
    One answer is a number, and I’m guilty of this. Some clients want quotes or “just a
    ballpark”.
    

    View Slide

12. Design is not a commodity.
    Design is a process.
    But design is not service you buy off a commodities list. Good design — valuable design is a process. It’s an interest in gripping all the fragments, and synthesizing one outcome from many
    possibilities.
    

    View Slide

13. “I don’t know...yet.”
    The other answer is — and this is what I say now — “I don’t know...yet”. You and I need to explore this. Together we’ll answer the cost question, but it takes time. Let’s not believe we can
    scope out responsive design in a kickoff call.
    

    View Slide

14. Forming A Budget
    So what’s your budget? I will turn right around ask you this.
    For $10,000 we can’t work together for six months. Neither of us needs to be shooting in the dark.
    A good consultant can help you develop a needs assessment for responsive design by asking the right questions:
    

    View Slide

15. 1. Evaluate Your Position
    2.
    3.
    Are you catching up, consolidating, or future-
    proofing?
    

    View Slide

16. 1. Evaluate Your Position
    2. Set Goals and Ideals
    3.
    What’s your minimum acceptable outcome? What’s your dream
    scenario?
    

    View Slide

17. 1. Evaluate Your Position
    2. Set Goals and Ideals
    3. Make the Business Case
    What happens if you succeed or fail? What if you do nothing? Can you afford
    that?
    

    View Slide

18. Needs assessments help
    you budget realistically.
    If you can answer those questions, your budget situation will improve. Your company does not miraculously become richer, but it grounds you in reality. It sets a standard for your needs, and
    provides motivation to fulfill them.
    

    View Slide

19. What is responsive
    design’s value?
    But clients hate being told “it depends” and asked for their budget, so I invite them to ask a different question:
    What is responsive design’s value?
    And this is a lot more interesting to them because it flips the proposition.
    

    View Slide

20. Creating value beats
    avoiding cost.
    Value beats cost. We can talk about value immediately by comparing
    outcomes.
    

    View Slide

21. Device Spectrum
    3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″
    Smartphone Tablet Laptop Desktop
    Let’s plot the spectrum of screens we worry about
    today.
    

    View Slide

22. Resource Requirements
    Expensive
    Fixed
    Width
    Site
    Responsive Site
    And we’ll pick a frame of reference: the fixed-width site. We’ve been making them for years. A responsive site might require twice the
    resources.
    

    View Slide

23. 3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″
    Smartphone Tablet Laptop Desktop
    Responsive Site
    Fixed Width Site
    Within the realm of fixed-width sites, which is here, the responsive site has 50% efficiency. That’s expensive. But we’re discounting the intangibles responsive design also
    serves.
    

    View Slide

24. Economical
    Mobile
    Site
    Fixed
    Width
    Site
    Responsive Site
    Resource Requirements
    How about this: (desktop site + mobile app) vs (responsive
    site).
    

    View Slide

25. 3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″
    Smartphone Tablet Laptop Desktop
    Responsive Site
    Fixed Width Site
    Mobile Site
    Nearly the same resources now, but again see the intangibles. That’s looking rather
    economical.
    

    View Slide

26. High Value
    Mobile
    Site
    iPhone
    App
    Android
    App
    iPad
    App
    Fixed
    Width
    Site
    Responsive Site
    Resource Requirements
    Here’s the crazy example: (desktop site + mobile site + 2 mobile apps + tablet app) vs (responsive design). If you’re not Facebook, you’re in a lot of trouble. The devices served have nearly
    evened out,
    

    View Slide

27. 3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″
    Smartphone Tablet Laptop Desktop
    Responsive Site
    Fixed Width Site
    Mobile Site
    iPhone App
    Android App
    iPad App
    But your resources are extremely disproportionate. Responsive design moves into high-value territory.
    For a small company or startup, this illustrates why responsive design is a viable strategy, and why more established retailers are looking to downsize their footprint.
    

    View Slide

28. Should capabilities
    vary by context?
    For eCommerce applications, I think you should strive for continuity. That’s why responsive design is so well suited to
    eCommerce.
    

    View Slide

29. Content Parity:
    Access to the same information
    regardless of device.
    Two principles at work:
    Content Parity — Access to the same information regardless of device.
    

    View Slide

30. Functional Parity:
    Access to the same features
    regardless of device.
    Functional Parity — Access to the same features regardless of
    device.
    

    View Slide

31. Don’t limit access
    based on screen size.
    Neither should be limited for an arbitrary reason like screen size. If users can filter their search, write reviews, and track an order from their laptop you can bet they’ll do those things on their
    phone too.
    You can’t generalize behavior from device type. People use whatever is accessible. That means laptops on planes and phones on couches.
    

    View Slide

32. Resource Allocation
    Getting off the ground is tough though. I can’t off-hand quote you figures, but I can tell you what factors will change your resource allocation
    dramatically.
    

    View Slide

33. When should you invest in
    a multi-device frontend?
    If you have to ask, you’re already behind. I get the lion’s share of inquiries about responsive
    commerce.
    

    View Slide

34. 10% – 40%
    range of mobile visitors
    So I started pooling data from retailers I talked with and everyone had 10% to 40% of visits coming from
    mobile.
    

    View Slide

35. 20% – 25%
    average mobile visitors
    20-25% is normal. B2B is a little lower. Fashion and entertainment are higher.
    But it’s not ignorable for anyone because it’s cannibalizing traditional devices.
    

    View Slide

36. Which browsers / devices
    should you support?
    Let’s define
    support.
    

    View Slide

37. Support:
    Dedicating resources
    to a platform.
    Support means you dedicate resources to a
    platform.
    

    View Slide

38. Support is not:
    • Blocking unsupported platforms
    • Every platform is identical
    It doesn’t mean unsupported platforms are broken or blocked, and not everything has to look and work
    identically.
    

    View Slide

39. IE8 and Opera
    Not supported, still functional
    Skinny Ties is usable in browsers we don’t support like IE8 or Opera. We built the site with progressive enhancement for that reason, but we don’t chase down bugs if they
    exist.
    

    View Slide

40. Data ≠ Analysis
    Somebody usually points out that’s 10% of their users and faints dramatically.
    You can find that in Google Analytics, but having data is not the same as having done analysis. Compare these two segments:
    

    View Slide

41. Good + Widespread
    Browsers
    • Revenue majority
    • Expanding segment
    • High growth potential
    90%
    Good Browsers
    - Revenue majority
    - Expanding segment
    - High growth potential
    

    View Slide

42. Good + Widespread
    Browsers
    • Revenue majority
    • Expanding segment
    • High growth potential
    • Revenue minority
    • Shrinking segment
    • Low growth potential
    Bad + Underused
    Browsers
    90% 10%
    Bad Browsers
    - Revenue minority
    - Shrinking segment
    - Low growth potential
    

    View Slide

43. ROI from
    90% Loss of
    10%
    >
    I’m betting that if you dig into your data, you can make the case that investments made today will have higher ROI from the 90% than the loss of the
    10%.
    

    View Slide

44. Mobile is your
    biggest opportunity.
    Profit comes from where your users are and where they’re going — not where they’re exiting. Mobile territory is your biggest opportunity for growth. Don’t miss it to keep an old fraction
    “supported”.
    

    View Slide

45. Process Changes
    Responsive design requires a big shift in the way projects are completed and
    accepted.
    

    View Slide

46. Responsive
    Design Fundamentals
    Responsive
    Commerce
    12 months 6 months
    Overcoming the Skills Gap
    Internal teams or studios that haven’t done responsive work are at least a year behind in experience.
    Lacking specialization in responsive commerce adds another six months. The fundamental interactions for eCommerce are still being rethought and validated across devices.
    

    View Slide

47. Estimate: 3 months
    Timeline for Skinny Ties
    Actual: 8 months
    Long timelines are a barrier, but uncertainty is killer. Trust me I know. I scoped Skinny Ties as a 3 month project, and it took 8 months because approaching this work with high standards
    requires inventing practices as you go.
    

    View Slide

48. http://www.netmagazine.com/features/top-25-responsive-sites-2012
    When it launched there were just a handful of sites in the same league. When Net Magazine picked the top 25 responsive sites of 2012, Skinny Ties was on it for good reason among some
    massive companies.
    

    View Slide

49. Choose a design / frontend
    partner wisely.
    Few eCommerce studios are equipped for this type of work. The frontend skillset is not Magento-specific, so broader experience with responsive design and mobile design is a
    plus.
    

    View Slide

50. Case Study:
    Skinny Ties
    So let's talk about Skinny
    Ties.
    

    View Slide

51. http://skinnyties.com
    They're a small, family-run company operating in a very narrow and competitive niche. I helped re-imagine their business and technology strategies, and responsive design was at the
    core.
    

    View Slide

52. http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
    I published some overwhelmingly positive data in October when Skinny Ties launched. Since the project the kicked responsive commerce into the spotlight, we felt responsible for proving it
    wasn’t a fluke.
    

    View Slide

53. October 7
    Year Over Year Results
    March 25
    5 ½ months
    This is new data comparing the last two holiday seasons — with and without responsive design. It covers 5.5 months from October to March. That’s a long time, and a lot of interactions being
    measured.
    

    View Slide

54. Quantity
    78.0%
    Average Order
    Value
    20.8%
    Transactions
    57.8%
    Transactions increased by nearly 58%, and units sold by even more. That means average order value is up
    20.8%.
    

    View Slide

55. 90.6%
    Revenue
    Across all devices, Skinny Ties is collecting 90% more revenue than last
    year.
    

    View Slide

56. Revenue
    Phone + Tablet
    211.8%
    Revenue
    Laptop + Desktop
    77.6%
    Here’s the growth split between traditional computers and mobile devices. Mobile may be a smaller chunk of revenue today, but that’s changing
    fast.
    

    View Slide

57. Revenue
    iPad
    224%
    Revenue
    iPhone
    473%
    Revenue
    Android
    187%
    Here’s the revenue performance of Android phones, iPads, and iPhones. Nothing sells skinny ties like an
    iPhone.
    

    View Slide

58. 5.3x
    Value of iPhone vs
    Android shoppers
    They’re 5.3 times more valuable than Android
    users.
    

    View Slide

59. For the SEO Folks
    And for the SEO folks, just to prove how much Google loves responsive
    design:
    

    View Slide

60. Revenue from
    Organic Search
    73.4%
    Visits from
    Organic Search
    79.8%
    With almost 80% more targeted organic traffic they’re capitalizing on it hand over
    fist.
    

    View Slide

61. Sustained growth or a flash?
    So did responsive design create sustainable
    growth?
    

    View Slide

62. Quantity
    78.0%
    Average Order Value
    20.8%
    Transactions
    57.8%
    Revenue – iPad
    224%
    Revenue – iPhone
    473%
    Revenue – Android
    187%
    YOY Impact of Responsive Design
    for Skinny Ties
    Rounding up that data Skinny Ties has a very impressive new bottom line.
    Apps can't create this much impact in one swoop. I don’t know any other tactics that can either.
    

    View Slide

63. Conclusions
    It’s obvious to me and my clients that responsive design creates sustained
    growth.
    

    View Slide

64. Responsive design is not
    a novelty or trend.
    It’s not a novelty or a
    trend.
    

    View Slide

65. It’s good design and
    smart business.
    It’s good design and smart
    business.
    

    View Slide

66. Tomorrow, 11:15am
    Technical Track
    For more about responsive design, I’m also speaking tomorrow at 11:15am. The session is called “Mobile First, Responsive Design” and it’s part two of the talk I gave last year. If you’re a
    business person, I promise it won’t be too technical. I hope to see you there.
    

    View Slide

67. View Slide