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

Responsive Web Applications with Container Queries

snookca
October 18, 2016

Responsive Web Applications with Container Queries

snookca

October 18, 2016
Tweet

More Decks by snookca

Other Decks in Programming

Transcript

  1. Responsive Web
    Applications
    with Container Queries

    View Slide

  2. #RWDQueries
    (504) 229-6828

    View Slide

  3. A talk more about
    process than code

    View Slide

  4. View Slide

  5. Beautiful
    Accounting
    Software

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. Goal #1
    Evolve the design

    View Slide

  10. Goal #2
    Support Multiple
    Devices

    View Slide

  11. let us take 

    a step back…

    View Slide

  12. View Slide

  13. View Slide

  14. Goal #1
    Evolve the design

    View Slide

  15. Goal #2
    Support Multiple
    Devices

    View Slide

  16. Responsive

    View Slide

  17. Responsive

    View Slide

  18. View Slide

  19. View Slide

  20. Birth of SMACSS

    View Slide

  21. Device-specific 

    design and
    development

    View Slide

  22. Designers see a
    feature through all
    platforms

    View Slide

  23. View Slide

  24. Goal #1
    Evolve the design

    View Slide

  25. Goal #2
    Support Multiple
    Devices

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. Monolithic app with
    accessible templates

    View Slide

  30. Ignored Mobile Web

    View Slide

  31. Limited Mobile App

    View Slide

  32. View Slide

  33. View Slide

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

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. Each page can be art
    directed individually

    View Slide

  39. Web applications 

    have components in
    multiple contexts
    needing to respond
    differently

    View Slide

  40. View Slide

  41. View Slide

  42. A single page in a web
    application can have
    dozens of variations

    View Slide

  43. With media queries,
    you have to know the
    possible interplay of all
    objects

    View Slide

  44. With container
    queries, you only have
    to know the interplay
    within a single object

    View Slide

  45. No spec for
    container queries

    View Slide

  46. View Slide

  47. View Slide

  48. Declare in:
    CSS,
    HTML, or 

    JavaScript

    View Slide

  49. https://github.com/ResponsiveImagesCG/cq-demos
    .element:media( min-width:500px ) {}
    https://github.com/tysonmatanich/elementQuery
    .element[min-width~="500px"] {
    background-color: #eee;
    }

    View Slide

  50. http://eqcss.github.io/eqcss/
    @element ".element" and 

    (min-width: 500px) {
    .element {
    background: gold;
    }
    }

    View Slide

  51. https://github.com/tysonmatanich/elementQuery
    .element[min-width~="400px"] { }

    View Slide

  52. To parse CSS, either
    need to be on same
    domain or set up CORS

    View Slide

  53. https://github.com/Snugug/eq.js
    data-eq-pts="small: 400, medium: 600,
    large: 900"

    View Slide

  54. At HTML level, requires
    consistency of
    implementation 

    across app

    View Slide

  55. We chose JavaScript

    View Slide

  56. elements = [
    {
    "module": ".flex--2x1",
    "className":"responsiveClass",
    "minWidth": 768, "maxWidth": 1024
    }
    ]

    View Slide

  57. Going Responsive
    meant a consistent
    feature set across all
    devices

    View Slide

  58. New features
    automatically have
    cross-device support

    View Slide

  59. Went responsive in
    under a month†

    View Slide

  60. View Slide

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

    View Slide

  62. View Slide

  63. There’s a discernible
    delay in execution

    View Slide

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

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Tried to use grid
    classes for
    everything

    View Slide

  69. Had to write extra
    classes just to define
    responsive story

    View Slide

  70. Single purpose
    classes resulted in
    less edge cases (and
    less code!)

    View Slide

  71. Gzip minimizes
    duplicate properties
    really well

    View Slide

  72. Tables are difficult

    View Slide

  73. View Slide

  74. View Slide

  75. Avoid too much on
    the horizontal axis

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. Product Design is a
    team sport

    View Slide

  80. View Slide

  81. Goal #1
    Evolve the design

    View Slide

  82. Goal #2
    Support Multiple
    Devices

    View Slide

  83. Goal #1 reframed:
    Allow anybody to make
    product-wide design
    changes quickly and easily

    View Slide

  84. Problem:
    Different tech
    stacks

    View Slide

  85. View Slide

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

    View Slide

  87. View Slide

  88. Yahoo! still does a
    custom experience
    per device

    View Slide

  89. Shopify is getting rid
    of Container Queries

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide





  93. View Slide

  94. .two-columns {
    display: flex;
    flex-wrap: wrap;
    }
    .col1, .col2 { flex-grow: 1; }
    .col1 {
    flex-basis: 66%;
    min-width: 360px;
    }
    .col2 {
    flex-basis: 33%;
    }

    View Slide

  95. Demo Time

    View Slide

  96. For Xero…
    time will tell.

    View Slide

  97. Designers should
    think Responsive
    before they need to.

    View Slide

  98. Container Queries
    enable faster
    development

    View Slide

  99. Use techniques to
    avoid media or
    container queries
    altogether

    View Slide

  100. http://ricg.io

    View Slide

  101. Thank you.

    http:/
    /snook.ca/

    @snookca

    View Slide