Responsive Web Applications

At Squares Conf.

Transcript

1. Responsive Web Applications with Container Queries
2. A talk more about process than code
4. Beautiful Accounting Software
8. Goal #1 Evolve the design
9. Goal #2 Support Multiple Devices
13. Goal #1 Evolve the design
14. Goal #2 Support Multiple Devices
15. Responsive
16. Responsive
19. Device-specific 
 design and development
20. Designers see a feature through all platforms
22. Goal #1 Evolve the design
23. Goal #2 Support Multiple Devices
27. Monolithic app with accessible templates
28. Ignored Mobile Web
29. Limited Mobile App
32. Each horizontal block is considered in the context of the viewport
38. Each page can more easily be art directed
40. • No orders • One order • Less than one page of orders • Multiple pages of orders • Has Info Notifications • Tab overflow • Has Warning Notifications • Has limited access to features • Has different apps installed
41. And now consider all of those things for multiple viewports
42. A single page in a web application can have dozens of variations
43. A component-based site has components respondingly differently to multiple contexts
46. With media queries, you have to know the possible interplay of all objects
47. With container queries, you only have to know the interplay within a single object
48. No spec for container queries
51. Declare in: CSS, HTML, or 
 JavaScript
52. https://github.com/ResponsiveImagesCG/cq-demos .element:media( min-width:500px ) {} https://github.com/tysonmatanich/elementQuery .element[min-width~="500px"] { background-color: #eee; }
53. http://elementqueries.com/ @element ".element" and 
 (min-width: 500px) { .element { background: gold; } }
54. https://github.com/tysonmatanich/elementQuery .element[min-width~="400px"] { }
55. To parse CSS, either need to be on same domain or set up CORS
56. https://github.com/Snugug/eq.js data-eq-pts="small: 400, medium: 600, large: 900"
57. At HTML level, requires consistency of implementation 
 across app
58. We chose JavaScript
59. elements = [ { "module": ".flex--2x1", "className":"responsiveClass", "minWidth": 768, "maxWidth": 1024 } ]
60. Going Responsive meant a consistent feature set across all devices
61. New features automatically have cross-device support
63. Went responsive in under a month†
64. How the heck do you do that in a month?
66. There’s a discernible delay in execution
67. It’s not about the properties, it’s about the purpose.
71. Tried to use grid classes for everything
72. Had to write extra classes just to define responsive story
73. Single purpose classes resulted in less edge cases (and less code!)
74. Gzip minimizes duplicate properties really well
75. Tables are difficult
78. Avoid too much on the horizontal axis
82. Goal #1 Evolve the design
83. Goal #2 Support Multiple Devices
84. Goal #1 reframed: Allow anybody to make product-wide design changes quickly and easily
85. Problem: Different tech stacks
87. Make the right things easy and the wrong things hard
88. 10 5
89. Yahoo! still does a custom experience per device
90. Shopify is getting rid of Container Queries
94. <div class="two-columns"> <div class="col1"> … </div> <div class="col2"> … </div> </div>
95. .two-columns { display: flex; flex-wrap: wrap; } .col1, .col2 { flex-grow: 1; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }
97. <div class="media-body"> <div class="media-content"> </div> <div class="media-actions"> <a href="…"> Button </a> </div> </div>
98. .media-body { display: flex; flex-wrap: wrap; }
99. .media-content { flex-grow: 1; flex-basis: 400px; margin-right: 20px; }
100. .media-actions { align-self: center; margin: 20px 0; }
103. <div class="items"> <div class="box">…</div> <div class="box">…</div> <div class="box">…</div> </div>
104. .items { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
105. <div class="box"> <div class="box-image"> <img src="…" height="150" > </div> <div class="box-content">...</div> </div>
106. .box { display: flex; flex-wrap: wrap; }
107. .box-image { flex-grow: 1; flex-shrink: 0; flex-basis: 150px; } .box-image > img { width: 100%; object-fit: cover; }
108. .box-content { margin: 10px; flex-shrink: 1; flex-grow: 1; flex-basis: 60%; }
110. Designers should think Responsive before they need to.
111. Container Queries enable faster development
112. Use techniques to avoid media or container queries altogether
113. http://ricg.io
114. Thank you.
 http:/ /snook.ca/
 @snookca