Designing Evolution

What does it really mean work with the flexibility we have through responsive web design; the interpretations of that recipe and how we can go so much further than just looking at viewport widths. In part that may be about 'element queries': what are they? Do we need them? How do they make us look differently at what we do?

Transcript

1. Designing Evolution @hereinthehive
3. What does it mean to be flexible?
4. We’re only getting started
7. Responsive web design is a recipe for managing and constraining the innate fluidity of the web.
8. Open to interpretation
9. Nature of breakpoints
10. Breakpoints describe change.
11. Design for content or devices?
12. Web native experiences not apps
13. Device-oriented breakpoints
14. 320px 480px 768px 1024px
15. Content oriented breakpoints
16. Device agnostic
17. There’s little to no correlation between viewport width alone and devices.
18. viewport dimensions + interaction method(s) + ?? = device type
19. Major & minor breakpoints
20. Breakpoint purpose mash-up
21. Cascading, ranges & stacking
22. @media screen only and (min-width:20em) { ... } @media screen only and (min-width:30em) and (max-width:40em) { ... } @media (min-width:40em) and (max-width:50em), (min-width:70em) and (max-width: 90em) { ... } Cascade Range Stack
23. The power! @media (min-width: 30em) and (max-width: 35em) and (max-device-width:800px), (min-width: 45em) and (max-width: 60em) and (orientation:landscape), print and (min-width:10cm) { ... }
24. We work in a world of assumptions
25. What do we know?
26. What can this device and/or browser do?
27. When do we know it?
28. Modularity
29. Atomic design http://patternlab.io @brad_frost
30. Element queries?
31. What can my parent element do?
32. Go & follow @itsaljones! Spike work
33. • write normal CSS • scrape with build process • minimal JS to calculate • use minimum values & ranges
34. CSS: ‘trigger points’ [data-width~="20em"] [data-width~="30-40em"]
35. Uses a regex to scrape the CSS for fuzzy selectors Adds ‘data-triggers’ to our mark-up Build
36. runs on load, resize & orientation change measures the parent of modules flagged to watch Javascript
37. [data-width~="32em"] .headlines { float:right; width:32%; }
38. <div class="region-2" data-width="18em 24em 32em"> <div class="headlines rm" data-triggers="18,24,32,40-50"> automated build process javascript
39. Container or module?
40. .headlines.w32em { float:right; width:32%; }
41. <div class="region-2"> <div class="headlines rm w18em w24em w32em" data-triggers="18,24,32,40-50"> automated build process javascript
42. Start with the most primitive form
43. • what are you trying to say? • would capabilities change this? • need more assets? • communication is everything
44. How could the layout of a module evolve?
45. When do we look to the parent or the viewport?
47. /** * Trigger Points **/ [data-width~="10em"] .mod_colours { background-color: red } [data-width~="20em"] .mod_colours { background-color: yellow } [data-width~="30em"] .mod_colours { background-color: pink } [data-width~="40em"] .mod_colours { background-color: lightgreen } [data-width~="50em"] .mod_colours { background-color: purple } [data-width~="60em"] .mod_colours { background-color: orange } [data-width~="70em"] .mod_colours { background-color: blue }
50. Capabilities: more than just width
51. Progressive enhancement
52. Positives
53. Negatives
54. backalleycoder.com/2014/04/18/ element-queries-from-the-feet-up
55. Should we use them now?
56. So what’s interesting about element queries?
57. Again... what do we know & when do we know it?
58. Do we want this?
59. xanthir.com/b4vg0 Are they likely to appear in browsers?
60. Find more? Tweet me @hereinthehive kippt.com/hereinthehive/ element-query-resources
61. Question your defaults
62. We need to let go.
63. Create ecosystems not pages
64. As creators on the web, we shape the future of the web
65. Thanks @hereinthehive kippt.com/hereinthehive/ element-query-resources