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

Responsive Web Applications

Responsive Web Applications

How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?

With a focus on Container Queries, we’ll look at the approach the Shopify Admin team used, from design to development, to manage the intricate interactions between all the application’s components, pulling off a fully fluid responsive design in under a month.

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

May 11, 2016
Tweet

Transcript

  1. Responsive Web Applications with Container Queries

  2. A talk about process, not code

  3. None
  4. Beautiful Accounting Software

  5. Goal: Evolve the design

  6. None
  7. None
  8. None
  9. Problem: Different tech stacks

  10. Goal: Responsive

  11. Problem: Designers weren’t thinking “Responsive”

  12. Let’s take a step back…

  13. None
  14. None
  15. Responsive

  16. None
  17. None
  18. Device-specific 
 design and development

  19. A Designer saw a feature through all platforms

  20. None
  21. Goal: 
 Evolve the design

  22. None
  23. None
  24. None
  25. Monolithic app with accessible templates

  26. Goal: Responsive

  27. Ignored Mobile Web

  28. Limited Mobile App

  29. None
  30. None
  31. Each horizontal block is considered in the context of the

    viewport
  32. None
  33. None
  34. None
  35. Each page can be art directed individually

  36. Web applications have components in multiple contexts needing to respond

    differently
  37. None
  38. None
  39. A single page in a web application can have dozens

    of variations
  40. With media queries, you have to know the possible interplay

    of all objects
  41. With container queries, you only have to know the interplay

    within a single object
  42. No spec for container queries

  43. None
  44. None
  45. Declare in: CSS, HTML, or 
 JavaScript

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

    }
  47. http://eqcss.github.io/eqcss/ @element ".element" and 
 (min-width: 500px) { .element {

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

  49. To parse CSS, either need to be on same domain

    or set up CORS
  50. https://github.com/Snugug/eq.js data-eq-pts="small: 400, medium: 600, large: 900"

  51. At HTML level, requires consistency of implementation across app

  52. We chose JavaScript

  53. elements = [ { "module": ".flex--2x1", "className":"responsiveClass", "minWidth": 768, "maxWidth":

    1024 } ]
  54. Due to resize debouncing, there’s a small but discernible delay

    in re-render
  55. Going Responsive meant a consistent feature set across all devices

  56. New features automatically have cross-device support

  57. Went responsive in under a month†

  58. None
  59. Lessons Learned

  60. It’s not about the properties, it’s about its purpose.

  61. None
  62. None
  63. None
  64. Tried to use grid classes for everything

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

  66. Single purpose classes resulted in less edge cases (and less

    code!)
  67. Gzip minimizes duplicate properties really well

  68. Tables are difficult

  69. None
  70. None
  71. Avoid too much on the horizontal axis

  72. None
  73. None
  74. None
  75. Product Design is a team sport

  76. None
  77. Goal: Evolve the design

  78. Goal reframed: Allow anybody to make product-wide design changes quickly

    and easily
  79. Problem: Different tech stacks

  80. None
  81. Make the right things easy and the wrong things hard

  82. Problem: Designers weren’t thinking “Responsive”

  83. Solution: 
 Education?

  84. Lessons Learned

  85. Container Queries enable faster development

  86. Designers should think Responsive before they need to.

  87. Thank you.
 http:/ /snook.ca/
 @snookca