Modern Layouts: Getting Out of Our Ruts // Blend 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.

Live demo: http://labs.thewebahead.net/thelayoutsahead/
Code repo: https://github.com/jensimmons/thelayoutsahead

Transcript

1. Modern Layouts: Getting Out of Our Ruts @jensimmons Jen Simmons, The Web Ahead
12. 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
38. Text
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. Of course, people problems.
62. Truly present the content. Be more inventive with your layouts.
63. MAGAZINE
68. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }
69. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle(); }
70. CSS Shapes ( level 1 )
72. 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;
73. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: ellipse(50% 50%); }
74. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; border-radius: 100px; }
75. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
76. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
80. github.com/jensimmons/thelayoutsahead
81. labs.thewebahead.net
82. follow @jensimmons to get these slides
89. main { transform: rotate(-10deg); }
90. h1 { transform: rotate(-90deg); }
91. 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%); }
92. transform: rotate
97. <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>
98. img { float: left; margin-right: 2em; width: 50%; } div { padding: 2em; }
100. img { float: left; margin-right: 2em; // width: 50%; height: 100vh; } div { padding: 2em; }
102. img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
105. Viewport Units
106. 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
107. Text
112. Multiple Column Layout
115. article { max-width: 500px; margin: 0 auto; }
116. article { column-count: 2; column-gap: 2em; }
118. article { // column-count: 2; column-width: 200px; column-gap: 2em; }
121. img { width: 100%; } article { column-width: 200px; column-gap: 2em; column-rule: 1px solid #444; }
123. Flexbox
128. Regions
135. Grid
137. and more…
139. Translate, Don’t Transfer.
144. one last story
148. Thanks! Jen Simmons The Web Ahead thewebahead.net Follow @jensimmons to get these slides!