Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Applications

Responsive Web Applications

At Squares Conf.

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

April 27, 2017
Tweet

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