Responsive Web Applications

How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?

With a focus on Container Queries, we’ll look at the approach the Shopify Admin team used, from design to development, to manage the intricate interactions between all the application’s components, pulling off a fully fluid responsive design in under a month.

Transcript

1. Responsive Web
   Applications
   with Container Queries
   

   View Slide

2. A talk about
   process, not code
   

   View Slide

3. View Slide

4. Beautiful
   Accounting
   Software
   

   View Slide

5. Goal:
   Evolve the design
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. Problem:
   Different tech
   stacks
   

   View Slide

10. Goal:
    Responsive
    

    View Slide

11. Problem:
    Designers
    weren’t thinking
    “Responsive”
    

    View Slide

12. Let’s take a step
    back…
    

    View Slide

13. View Slide

14. View Slide

15. Responsive
    

    View Slide

16. View Slide

17. View Slide

18. Device-specific 

    design and
    development
    

    View Slide

19. A Designer saw a
    feature through all
    platforms
    

    View Slide

20. View Slide

21. Goal: 

    Evolve the design
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Monolithic app with
    accessible templates
    

    View Slide

26. Goal:
    Responsive
    

    View Slide

27. Ignored Mobile Web
    

    View Slide

28. Limited Mobile App
    

    View Slide

29. View Slide

30. View Slide

31. Each horizontal block
    is considered in the
    context of the viewport
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. Each page can be art
    directed individually
    

    View Slide

36. Web applications have
    components in multiple
    contexts needing to
    respond differently
    

    View Slide

37. View Slide

38. View Slide

39. A single page in a web
    application can have
    dozens of variations
    

    View Slide

40. With media queries,
    you have to know the
    possible interplay of all
    objects
    

    View Slide

41. With container
    queries, you only have
    to know the interplay
    within a single object
    

    View Slide

42. No spec for
    container queries
    
    

    View Slide

43. View Slide

44. View Slide

45. Declare in:
    CSS,
    HTML, or 

    JavaScript
    

    View Slide

46. https://github.com/ResponsiveImagesCG/cq-demos
    .element:media( min-width:500px ) {}
    https://github.com/tysonmatanich/elementQuery
    .element[min-width~=“500px"] {
    background-color: #eee;
    }
    

    View Slide

47. http://eqcss.github.io/eqcss/
    @element ".element" and 

    (min-width: 500px) {
    .element {
    background: gold;
    }
    }
    

    View Slide

48. https://github.com/tysonmatanich/elementQuery
    .element[min-width~="400px"] { }
    

    View Slide

49. To parse CSS, either
    need to be on same
    domain or set up CORS
    

    View Slide

50. https://github.com/Snugug/eq.js
    data-eq-pts="small: 400, medium: 600,
    large: 900"
    

    View Slide

51. At HTML level, requires
    consistency of
    implementation across
    app
    

    View Slide

52. We chose JavaScript
    

    View Slide

53. elements = [
    {
    "module": ".flex--2x1",
    "className":"responsiveClass",
    "minWidth": 768, "maxWidth": 1024
    }
    ]
    

    View Slide

54. Due to resize
    debouncing, there’s a
    small but discernible
    delay in re-render
    

    View Slide

55. Going Responsive
    meant a consistent
    feature set across all
    devices
    

    View Slide

56. New features
    automatically have
    cross-device support
    

    View Slide

57. Went responsive in
    under a month†
    

    View Slide

58. View Slide

59. Lessons Learned
    

    View Slide

60. It’s not about the
    properties, it’s about
    its purpose.
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. Tried to use grid
    classes for
    everything
    

    View Slide

65. Had to write extra
    classes just to define
    responsive story
    

    View Slide

66. Single purpose
    classes resulted in
    less edge cases (and
    less code!)
    

    View Slide

67. Gzip minimizes
    duplicate properties
    really well
    

    View Slide

68. Tables are difficult
    

    View Slide

69. View Slide

70. View Slide

71. Avoid too much on
    the horizontal axis
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. Product Design is a
    team sport
    

    View Slide

76. View Slide

77. Goal:
    Evolve the design
    

    View Slide

78. Goal reframed:
    Allow anybody to
    make product-wide
    design changes
    quickly and easily
    

    View Slide

79. Problem:
    Different tech
    stacks
    

    View Slide

80. View Slide

81. Make the right
    things easy and the
    wrong things hard
    

    View Slide

82. Problem:
    Designers
    weren’t thinking
    “Responsive”
    

    View Slide

83. Solution: 

    Education?
    

    View Slide

84. Lessons Learned
    

    View Slide

85. Container Queries
    enable faster
    development
    

    View Slide

86. Designers should
    think Responsive
    before they need to.
    

    View Slide

87. Thank you.

    http:/
    /snook.ca/

    @snookca
    

    View Slide