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
2. A talk about process, not code
4. Beautiful Accounting Software
5. Goal: Evolve the design
9. Problem: Different tech stacks
10. Goal: Responsive
11. Problem: Designers weren’t thinking “Responsive”
12. Let’s take a step back…
15. Responsive
18. Device-specific 
 design and development
19. A Designer saw a feature through all platforms
21. Goal: 
 Evolve the design
25. Monolithic app with accessible templates
26. Goal: Responsive
27. Ignored Mobile Web
28. Limited Mobile App
31. Each horizontal block is considered in the context of the viewport
35. Each page can be art directed individually
36. Web applications have components in multiple contexts needing to respond differently
39. A single page in a web application can have dozens of variations
40. With media queries, you have to know the possible interplay of all objects
41. With container queries, you only have to know the interplay within a single object
42. No spec for container queries
45. Declare in: CSS, HTML, or 
 JavaScript
46. https://github.com/ResponsiveImagesCG/cq-demos .element:media( min-width:500px ) {} https://github.com/tysonmatanich/elementQuery .element[min-width~=“500px"] { background-color: #eee; }
47. http://eqcss.github.io/eqcss/ @element ".element" and 
 (min-width: 500px) { .element { background: gold; } }
48. https://github.com/tysonmatanich/elementQuery .element[min-width~="400px"] { }
49. To parse CSS, either need to be on same domain or set up CORS
50. https://github.com/Snugug/eq.js data-eq-pts="small: 400, medium: 600, large: 900"
51. At HTML level, requires consistency of implementation across app
52. We chose JavaScript
53. elements = [ { "module": ".flex--2x1", "className":"responsiveClass", "minWidth": 768, "maxWidth": 1024 } ]
54. Due to resize debouncing, there’s a small but discernible delay in re-render
55. Going Responsive meant a consistent feature set across all devices
56. New features automatically have cross-device support
57. Went responsive in under a month†
59. Lessons Learned
60. It’s not about the properties, it’s about its purpose.
64. Tried to use grid classes for everything
65. Had to write extra classes just to define responsive story
66. Single purpose classes resulted in less edge cases (and less code!)
67. Gzip minimizes duplicate properties really well
68. Tables are difficult
71. Avoid too much on the horizontal axis
75. Product Design is a team sport
77. Goal: Evolve the design
78. Goal reframed: Allow anybody to make product-wide design changes quickly and easily
79. Problem: Different tech stacks
81. Make the right things easy and the wrong things hard
82. Problem: Designers weren’t thinking “Responsive”
83. Solution: 
 Education?
84. Lessons Learned
85. Container Queries enable faster development
86. Designers should think Responsive before they need to.
87. Thank you.
 http:/ /snook.ca/
 @snookca