Modern Layouts: Getting Out of Our Ruts // CSS Dev Conf

In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we can better design for the true medium at hand. This talk features practical examples of what's newly possible, along with access to a code repo for you to play with later.

There's a live demo for you at: http://labs.thewebahead.net/thelayoutsahead/
All the code is at: https://github.com/jensimmons/thelayoutsahead

Feedback on this presentation: https://storify.com/jensimmons/modern-layouts-at-css-dev-conf

Transcript

1. Modern Layouts: Getting Out of Our Ruts @jensimmons Jen Simmons, The Web Ahead #modlayouts
13. The most prominent result from the new eyetracking studies is not actually new. We simply confirmed for the umpteenth time that banner blindness is real. —Jakob Nielsen, August 20, 2007, Banner Blindness: Old and New Findings
40. Graphic Design hasn’t always been like this.
47. vogue.com
59. Noise to Noise Ratio “Sure. There's definitely some excellent original work in there — in the middle of all those ads.” Merlin Mann
61. Let’s be more inventive with our layouts. Truly present the content.
62. MAGAZINE
63. 1.
68. CSS Shapes ( level 1 )
70. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }
71. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle(); }
72. labs.thewebahead.net
73. github.com/jensimmons/thelayoutsahead
74. follow @jensimmons to get these slides
75. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Shapes level 1 March 20, 2014 w3.org/TR/css-shapes
77. shape-outside: circle(); shape-outside: elipse(); shape-outside: border-box; shape-outside: inset(0px round 120px) border-box; shape-outside: url(http:// example.com/image.jpg); shape-margin: 30px;
78. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: ellipse(50% 50%); }
79. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; border-radius: 100px; }
80. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
81. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
89. 2.
95. main { transform: rotate(-10deg); }
96. h1 { transform: rotate(-90deg); }
97. h1 { float: left; padding-bottom: 200px; transform: rotate(-45deg); shape-outside: polygon(nonzero, -58px 80.55%, 75.95% -70px, 89.55% -33.65%, -13.4% 121.45%); }
98. transform: rotate
99. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Transforms Module level 1 Nov 26, 2013, “refining” w3.org/TR/css-transforms
101. 3.
107. <main role="main"> <img src="../images/GraceHopper.jpg"> <div> <h1>Grace Hopper</h1> <p>Grace Murray Hopper (December 9, 1906 – January 1, 1992) was an American computer scientist and United States Navy rear admiral. A pioneer in the field, she was one of the first programmers of the Harvard Mark I computer, and invented the first compiler for a computer programming language...</p> </div> </main>
108. img { float: left; margin-right: 2em; width: 50%; } div { padding: 2em; }
110. img { float: left; margin-right: 2em; // width: 50%; height: 100vh; } div { padding: 2em; }
112. img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
115. Viewport Units
116. Anyplace you might use em, rem, %, px you can instead use: vh viewport height vw viewport width vmin smaller viewport number vmax larger viewport number
117. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Values and Units Module level 3 July 30, 2013 w3.org/TR/css-values
118. Text
119. 4.
124. Multiple Column Layout
127. article { max-width: 500px; margin: 0 auto; }
128. article { column-count: 2; column-gap: 2em; }
130. article { // column-count: 2; column-width: 200px; column-gap: 2em; }
133. img { width: 100%; } article { column-width: 200px; column-gap: 2em; column-rule: 1px solid #444; }
134. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Multicolumn Layout Module April 12, 2011 w3.org/TR/css-multicol
136. Regions
143. 5.
147. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Exclusions Module Level 1 Oct 1, 2013 dev.w3.org/csswg/css-exclusions
148. 6.
149. Flexbox
153. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Flexible Box Layout Sept 25, 2014 w3.org/TR/css3-flexbox
155. Grid
156. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Grid Layout Module Level 1 May 13, 2014 w3.org/TR/css3-grid-layout
158. and more…
159. back to magazines
162. Translate, Don’t Transfer.
166. (*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to Adaptive Content. Search for it.)
169. one last story
173. Text 504-229-6828 with #modlayouts 5 Comment! Jen Simmons The Web Ahead thewebahead.net Follow @jensimmons to get these slides!