CSS3: Layouts for the Multi-screen World

A look at how the way we access the web has changed, and how CSS is evolving to meet new challenges. Given at Making Web conference #mwconf, Oslo, October 2013.

Transcript

1. CSS3: Layouts for the Multi-screen world #mwconf 10/13
2. @stopsatgreen Peter Gasston rehabstudio
4. 1. The web has changed 2. Our tools are outdated
5. How is CSS evolving to meet these problems?
6. 1. The web has changed
7. 1. The way we access the web has changed
9. 13 years ago...
10. By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
12. 2. 320x480 3. 768x1024 1913
14. Use of mobile as first screen 0 13 25 38 50 35+ 18-34 http://weve.com/mobile-eclipsing-tv-as-the-first-screen-for-consumers
15. http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
16. User-centric design + device-centric development.
17. Responsive Web Design
18. Being a web designer = understanding code
19. Carpenter != Dendrologist
20. @media screen {…} @media screen and (min-width: 800px) {…} @media (orientation: portrait) {…} Media Queries
21. width / device-width height / device-height orientation aspect-ratio / device-aspect-ratio Media Queries
24. Judging the capabilities of a device by the resolution of its screen is like judging the height of a person by the colour of their shoes.
25. Categories are obsolete. Parameters are the future.
26. @media (min-resolution: 2dppx) {…} Media Queries
27. Future* Media Queries * Possibly @media (script: 0) {…} @media (hover: 1) {…} @media (pointer: coarse) {…} @media (luminosity: dim) {…}
28. Conditional Rules @supports (height: 1vh) {…}
29. Conditional Rules @media (orientation: portrait) { /* Rules */ @media (max-width: 48em) { /* Rules */ } }
30. Device Adaptation <meta name="viewport" content="width=device-width, initial-scale=1"> @viewport { width: 100vw; zoom: 1; }
31. Device Adaptation @viewport { width: 100vw; } @media (max-device-width: 420px) { @viewport { width: 320px auto; } }
32. CSS is on the case.
33. 2. Our tools are outdated
38. HTML & CSS1 <table> float: left
39. CSS2 position: absolute display: inline-block display: table
40. B A C B C A B C A The Three Stages of RWD
41. A product of its limitations.
42. New layout methods:
43. Inspired by 1000 years of printing...
44. ... but purely digital.
46. Multi-columns article { column-count: 3; } article { column-width: 20em; }
49. A B .b { flow-from: 'foo'; } foo Regions .a { flow-into: 'foo'; }
50. B C D .b, .c, .d { flow-from: 'foo'; } foo Regions
51. http://adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src/
52. Regions http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/
53. Flexbox .parent { display: flex; } .child { width: 30%; } .child { flex: 1; }
54. Flexbox A B .a { flex: 2; } .b { flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
55. Flexbox A B B C A .parent { flex-direction: column; } .a { order: 2; } .b { order: 1; }
56. “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/
57. Flexbox .parent { align-items: center; justify-content: center; } A B .parent { flex-direction: column; } .a { flex: 1; } .b { flex: 0; }
60. Grid Layout .parent { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 10em auto 40px; }
61. Grid Layout B .child { grid-column: 2; grid-row: 2; } .a { grid-column: 1 3; } .b { grid-area: 2 2 4 4; } A
62. Grid Layout /* Grid A */ @media (min-width: 600px) { /* Grid B */ } @media (min-width: 1200px) { /* Grid C */ }
64. .child { position: absolute; wrap-flow: both; } Exclusions
65. .child { shape-outside: circle(50%,50%,50px); } Shaped Exclusions
67. Shaped Exclusions .child { shape-inside: circle(50%,50%,400px); }
68. Shaped Exclusions
69. CSS has your back!
70. ... and there’s much more to come.
71. With great power comes blah blah blah you know this by now.
72. In conclusion:
73. 1. The web is everywhere
74. 2. Web design is constrained by the current tools
75. 3. Better tools are on the way
76. 4. Let’s start to think *really* differently
77. 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
78. takk!
79. FAQ: Browser Share
80. FAQ: IE Share