Designing Evolution: Elements

Talk for Responsive Day Out 2 in Brighton, June 2014

Transcript

1. Designing Evolution: Elements Dan Donald @hereinthehive Monday, 30 June 14
2. Monday, 30 June 14
3. What does it mean to be flexible? http://mrsnespysworld.blogspot.co.uk/2010/07/8-uses-for-rubber-band.html Monday, 30 June 14
4. Responsive web design is a recipe for managing and constraining the innate fluidity of the web. Monday, 30 June 14
5. Open to interpretation Monday, 30 June 14
6. Nature of breakpoints Monday, 30 June 14
7. Nature of breakpoints Device or content-oriented breakpoints? Monday, 30 June 14
8. Device agnostic http://pivotallabs.com/an-introduction-to-qa-at-xtreme-labs/ Monday, 30 June 14
9. Universality Monday, 30 June 14
10. What do we know? Monday, 30 June 14
11. What do we know? Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 http://wurfl.io Monday, 30 June 14
12. When do we know it? Monday, 30 June 14
13. What capabilities help us make good decisions? Monday, 30 June 14
14. Modularity http://sunrise-theme.myshopify.com/products/giant-lego-bricks Monday, 30 June 14
15. Atomic design http://patternlab.io @brad_frost Monday, 30 June 14
16. Monday, 30 June 14
17. Element queries? Media query Element query Monday, 30 June 14
18. What can my parent / containing element do? Monday, 30 June 14
19. • write normal CSS • minimal JS to calculate • use minimum values & ranges Go & follow @itsaljones! Spike work Monday, 30 June 14
20. CSS ‘Trigger Points’ [data-width~="20em"] [data-width~="30-40em"] Monday, 30 June 14
21. Runs on load, resize & orientation change Measures the parent of modules flagged to watch (could be the module itself) Javascript Monday, 30 June 14
22. Uses a regex to scrape the CSS for fuzzy selectors Adds ‘data-triggers’ to our mark-up Build Monday, 30 June 14
23. <div class="column-2" data-width="18em 24em 32em"> <div class="headlines" data-triggers="18,24,32,40-50"> automated build process javascript Monday, 30 June 14
24. [data-width~="32em"] .headlines { float:right; width:32%; } Monday, 30 June 14
25. .headlines[data-width~="32em"] { float:right; width:32%; } .headlines.w32em { float:right; width:32%; } Size of container or module? Monday, 30 June 14
26. Monday, 30 June 14
27. /** * 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 } Monday, 30 June 14
28. Monday, 30 June 14
29. Monday, 30 June 14
30. Start with the most primitive form Monday, 30 June 14
31. How could the layout of a module evolve? Monday, 30 June 14
32. Monday, 30 June 14
33. Monday, 30 June 14
34. Monday, 30 June 14
35. Monday, 30 June 14
36. Monday, 30 June 14
37. Monday, 30 June 14
38. Monday, 30 June 14
39. Monday, 30 June 14
40. • what are you trying to say? • would capabilities change this? • need more assets? • communication is everything Monday, 30 June 14
41. When do we look to the parent or the viewport? Monday, 30 June 14
42. @media all and (min-width: 30em) { [data-width~="32em"] .headlines { float:right; width:32%; } } Monday, 30 June 14
43. Progressive enhancement Monday, 30 June 14
44. ? So what’s interesting about element queries? Monday, 30 June 14
45. Positives http://uxrepo.com/icon/thumbs-up-by-font-awesome Monday, 30 June 14
46. Negatives http://uxrepo.com/icon/thumbs-down-by-font-awesome Monday, 30 June 14
47. Should we use them now? Monday, 30 June 14
48. We need to let go. Create ecosystems not pages. Monday, 30 June 14
49. As creators on the web, we shape the future of the web Monday, 30 June 14
50. Thanks @hereinthehive @fluxflexibility kippt.com/hereinthehive/ element-query-resources Monday, 30 June 14