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

4. None

5. Beautiful Accounting Software

6. None
7. None
8. None

9. Goal #1 Evolve the design

10. Goal #2 Support Multiple Devices

11. let us take 
 a step back…

12. None
13. None

14. Goal #1 Evolve the design

15. Goal #2 Support Multiple Devices

16. Responsive

17. Responsive

18. None
19. None

20. Birth of SMACSS

21. Device-specific 
 design and development

22. Designers see a feature through all platforms

23. None

24. Goal #1 Evolve the design

25. Goal #2 Support Multiple Devices

26. None
27. None
28. None

29. Monolithic app with accessible templates

30. Ignored Mobile Web

31. Limited Mobile App

32. None
33. None

34. Each horizontal block is considered in the context of the

    viewport
35. None
36. None
37. None

38. Each page can be art directed individually

39. Web applications 
 have components in multiple contexts needing to

    respond differently
40. None
41. None

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

46. None
47. None

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†

60. None

61. How? How?! How?!?!

62. None

63. There’s a discernible delay in execution

64. It’s not about the properties, it’s about the purpose.

65. None
66. None
67. None

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

73. None
74. None

75. Avoid too much on the horizontal axis

76. None
77. None
78. None

79. Product Design is a team sport

80. None

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

85. None

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

87. None

88. Yahoo! still does a custom experience per device

89. Shopify is getting rid of Container Queries

90. None
91. None
92. None

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