Responsive Web Applications

Transcript

1. Responsive Web Applications with Container Queries

2. A talk more about process than code

3. None

4. Beautiful Accounting Software

5. None
6. None
7. None

8. Goal #1 Evolve the design

9. Goal #2 Support Multiple Devices

10. None
11. None
12. None

13. Goal #1 Evolve the design

14. Goal #2 Support Multiple Devices

15. Responsive

16. Responsive

17. None
18. None

19. Device-specific 
 design and development

20. Designers see a feature through all platforms

21. None

22. Goal #1 Evolve the design

23. Goal #2 Support Multiple Devices

24. None
25. None
26. None

27. Monolithic app with accessible templates

28. Ignored Mobile Web

29. Limited Mobile App

30. None
31. None

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

    viewport
33. None
34. None
35. None
36. None
37. None

38. Each page can more easily be art directed

39. None

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

44. None
45. None

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

49. None
50. None

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

62. None

63. Went responsive in under a month†

64. How the heck do you do that in a month?

65. None

66. There’s a discernible delay in execution

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

68. None
69. None
70. None

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

76. None
77. None

78. Avoid too much on the horizontal axis

79. None
80. None
81. None

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

86. None

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

91. None
92. None
93. None

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%; }
96. None

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; }

101. None
102. None

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%;

     }
109. None

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