CSS3 Layouts for the Multi-screen World

FOWD London, 14th May 2013

Transcript

1. #FOWD LDN ’13
2. @stopsatgreen Peter Gasston rehabstudio
3. CSS3: Layouts for the Multi-screen World
4. 1. The web has changed 2. Our tools are outdated
5. What is CSS3 doing about it?
6. 1. The web has changed
8. 12 years ago…
9. By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
11. 2. 320x480 4. 768x1024 2106
12. http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
13. User-centric design, but device-centric development
14. Responsive Web Design
15. Future of Web Design = Knowing How to Code
16. Carpenter != Dendrologist
17. @media screen {…} @media screen and (min-width: 800px) {…} @media (orientation: portrait) {…} Media Queries
18. width / device-width height / device-height orientation aspect-ratio / device-aspect-ratio Media Queries
19. @media (min-resolution: 2dppx) {} Media Queries
20. Categories are obsolete. Parameters are the future.
21. script pointer hover luminosity Future* Media Queries * Possibly
22. @media (orientation: portrait) { … @media (max-width: 48em) { … } } Conditional Rules
23. <meta name="viewport" content="width=500, initial-scale=1, maximum-scale=2"> Device Adaptation
24. Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: 500px; }
25. Device Adaptation @viewport { width: device-width; } @media (max-device-width: 420px) { @viewport { width: 500px; } }
26. CSS3 has your back!
27. 2. Our tools are outdated
32. <table> float: left HTML & CSS1
33. position: absolute display: inline-block display: table CSS2
34. B A C B C A B C A The Three Stages of RWD
35. A product of its limitations (adjacent possible?)
36. New layout methods:
37. Inspired by 1000 years of printing…
38. … but purely digital.
40. Multi-columns article { column-count: 3; } article { column-width: 20em; }
43. A B .b { flow-from: 'foo'; } foo Regions .a { flow-into: 'foo'; }
44. B C D .b, .c, .d { flow-from: 'foo'; } foo Regions
45. Regions http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/
46. Flexbox .parent { display: flex; } .child { width: 30%; } .child { flex: 1; }
47. Flexbox A B .a { flex: 2; } .b { flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
48. Flexbox .parent { flex-direction: column; } .a { order: 2; } .b { order: 1; } A B B C A
49. “Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.” http://trentwalton.com/2011/07/14/content-choreography/
51. Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr; } .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }
52. Grid Layout A B .child { grid-column: 2; grid-row: 2; } .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }
54. .child { position: absolute; } Exclusions wrap-flow: both;
56. .child { shape-outside: circle(50%,50%, 400px); } Shaped Exclusions
58. .child { shape-inside: circle(50%,50%,400px); } Shaped Exclusions
59. CSS3 has your back!
60. … and much more to come.
61. With great power comes blah blah blah you know this by now.
62. In conclusion
63. 1. The web is everywhere
64. 2. Web design is constrained by the tools we have
65. 3. Better tools are on the way
66. 4. Start to think how you can make beautiful sites that work everywhere
67. Some of the CSS properties shown in this talk are experimental and subject to change. Check http://caniuse.com and http://html5please.com for latest implementation status. Peter Gasston @stopsatgreen