Responsive Web Applications with Container Queries

Transcript

1. Responsive Web Applications with Container Queries
2. #RWDQueries (504) 229-6828
3. A talk more about process than code
5. Beautiful Accounting Software
9. Goal #1 Evolve the design
10. Goal #2 Support Multiple Devices
11. let us take 
 a step back…
14. Goal #1 Evolve the design
15. Goal #2 Support Multiple Devices
16. Responsive
17. Responsive
20. Birth of SMACSS
21. Device-specific 
 design and development
22. Designers see a feature through all platforms
24. Goal #1 Evolve the design
25. Goal #2 Support Multiple Devices
29. Monolithic app with accessible templates
30. Ignored Mobile Web
31. Limited Mobile App
34. Each horizontal block is considered in the context of the viewport
38. Each page can be art directed individually
39. Web applications 
 have components in multiple contexts needing to respond differently
42. A single page in a web application can have dozens of variations
43. With media queries, you have to know the possible interplay of all objects
44. With container queries, you only have to know the interplay within a single object
45. No spec for container queries
48. Declare in: CSS, HTML, or 
 JavaScript
49. https://github.com/ResponsiveImagesCG/cq-demos .element:media( min-width:500px ) {} https://github.com/tysonmatanich/elementQuery .element[min-width~="500px"] { background-color: #eee; }
50. http://eqcss.github.io/eqcss/ @element ".element" and 
 (min-width: 500px) { .element { background: gold; } }
51. https://github.com/tysonmatanich/elementQuery .element[min-width~="400px"] { }
52. To parse CSS, either need to be on same domain or set up CORS
53. https://github.com/Snugug/eq.js data-eq-pts="small: 400, medium: 600, large: 900"
54. At HTML level, requires consistency of implementation 
 across app
55. We chose JavaScript
56. elements = [ { "module": ".flex--2x1", "className":"responsiveClass", "minWidth": 768, "maxWidth": 1024 } ]
57. Going Responsive meant a consistent feature set across all devices
58. New features automatically have cross-device support
59. Went responsive in under a month†
61. How? How?! How?!?!
63. There’s a discernible delay in execution
64. It’s not about the properties, it’s about the purpose.
68. Tried to use grid classes for everything
69. Had to write extra classes just to define responsive story
70. Single purpose classes resulted in less edge cases (and less code!)
71. Gzip minimizes duplicate properties really well
72. Tables are difficult
75. Avoid too much on the horizontal axis
79. Product Design is a team sport
81. Goal #1 Evolve the design
82. Goal #2 Support Multiple Devices
83. Goal #1 reframed: Allow anybody to make product-wide design changes quickly and easily
84. Problem: Different tech stacks
86. Make the right things easy and the wrong things hard
88. Yahoo! still does a custom experience per device
89. Shopify is getting rid of Container Queries
93. <div class="two-columns"> <div class="col1"> … </div> <div class="col2"> … </div> </div>
94. .two-columns { display: flex; flex-wrap: wrap; } .col1, .col2 { flex-grow: 1; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }
95. Demo Time
96. For Xero… time will tell.
97. Designers should think Responsive before they need to.
98. Container Queries enable faster development
99. Use techniques to avoid media or container queries altogether
100. http://ricg.io
101. Thank you.
 http:/ /snook.ca/
 @snookca