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

Responsive Web Applications with Container Queries

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
October 18, 2016

Responsive Web Applications with Container Queries

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

October 18, 2016
Tweet

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