Modern Layouts, Extended Version

Presented online at UEI Virtual Seminar, http://aycl.uie.com/virtual_seminars/powerful_design_tools

We’re in a rut. Web design solves problem by mirroring what’s always been done. This means reusing the same layouts again and again. And again. But it doesn’t have to be this way! Jen Simmons rallies web professionals to take a fresh approach. She challenges us to solve problems in ways not considered possible on the web. She starts by showing us what’s wrong and ends on a high note: hope.

Web design today
* A closer look at that sidebar
* Responsive web design and moving sidebars

History of web design layout
* What layout?
* The medium shaped the medium

Layout should serve the content
* Vogue: measuring the site against the magazine
* What this approach could mean for ads

Translate, don’t transfer
* Emerging web technologies worth a deeper look
* Fresh ideas for layout innovation and principles to follow

Attend this seminar if you want to:
* Find inspiration beyond what already exists
* Use the ideas you had but didn’t think you could use on the web
* Shake up your layouts with tools available today
* Create something beautiful and fresh

Jen will take a walk through where we’ve been, where we might be going, and how we can design better by thinking bigger. This talk features practical examples of what's newly possible, along with access to a code repo to play with later.

Join Jen to get excited about the incredible power of the web and what we’re collectively inventing.

Transcript

1. MODERN LAYOUTS
   Getting Out of Our Ruts THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons October 2015
17. 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
22. A C B A C B A C B A C B
27. drawing by Dave Ellis novolume.co.uk
52. The medium shapes the medium.
53. ?
54. There’s a world of Graphic Design older than the web.
61. vogue.com
74. Layout should serve the content.
    
75. MAGAZINES
76. 1.
81. CSS Shapes
82. <h1>Jeremy Keith</h1> <img src=“jeremykeith.jpg"> <p>Jeremy Keith lives in Brighton, England where he makes websites with the splendid design agency Clearleft.</p>
83. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }
84. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle(); }
85. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Shapes, Level 1 March 20, 2014 w3.org/TR/css-shapes-1
89. shape-outside: circle(); shape-outside: ellipse(); shape-outside: border-box; shape-outside: inset(0px round
 120px) border-box; shape-outside: url(http://
 example.com/image.jpg); shape-margin: 30px;
90. labs.thewebahead.net
91. github.com/jensimmons/thelayoutsahead
92. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: ellipse(50% 50%); }
93. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; border-radius: 100px; }
94. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px; border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
96. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
104. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2 — Later shape-inside: foo();
106. 2.
122. Source order matters.
124. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Exclusions, Level 1 Jan 15, 2015 w3.org/TR/css3-exclusions
125. Use Absolute Positioning to place an item — or CSS Grid Layout. Then add the wrap-flow property. Example: wrap-flow: both;
127. 3.
134. main { transform: 
 rotate(-10deg); }
135. h1 { transform:
 rotate(-90deg); }
136. 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%); }
137. main { width: 300px; } @media (min-width: 500px) { main { background: red; transform: rotate(-10deg); } } @media (min-width: 700px) { main { background: green; transform: rotate(-20deg); } } @media (min-width: 900px) { main { width: 400px; background: blue; transform: rotate(-30deg); } }
138. transform: rotate
139. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Transforms, Level 1 Nov 26, 2013 w3.org/TR/css-transforms-1
141. 4.
148. Multiple Column Layout
151. article { max-width: 500px; margin: 0 auto; }
152. article { column-count: 2; column-gap: 2em; }
154. article { // column-count: 2; column-width: 200px; column-gap: 2em; }
157. img { width: 100%; } article { column-width: 200px; column-gap: 2em; column-rule: 
 1px solid #444; }
158. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Multicolumn Layout April 12, 2011 w3.org/TR/css3-multicol
162. CSS Regions
166. 5.
172. <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>
173. img { float: left; margin-right: 2em; width: 50%; } div { padding: 2em; }
175. img { float: left; margin-right: 2em; // width: 50%; height: 100vh; } div { padding: 2em; }
177. img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
179. <header> <h1>Full-height “Cover Sheets” are the new Splash Page</h1> </header> <p>Lorum ipsum article content…</p>
180. header { border: 20px solid #000; background: yellow; padding: 3em 6em; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
181. header { border: 20px solid #000; background: yellow; padding: 3em 6em; height: 100vh; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
184. Viewport Units
185. 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
186. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Values and Units, Level 3 June 11, 2015 w3.org/TR/css3-values
188. 6.
190. header { border: 20px solid #000; background: yellow; min-height: 100vh; padding: 3em 6em; } h1 { font-size: 10vw; margin: 0; text-align: center; }
191. header { border: 20px solid #000; background: yellow; min-height: 100vh; } h1 { font-size: 10vw; margin: 0; }
192. header { border: 20px solid #000; background: yellow; min-height: 100vh; display: flex; } h1 { font-size: 10vw; margin: auto; }
193. header { border: 20px solid #000; background: yellow; min-height: 100vh; display: flex; } h1 { font-size: 10vw; margin: auto; }
195. header { border: 20px solid #000; background: yellow; min-height: 100vh; display: flex; align-items: center; justify-content: center; } h1 { font-size: 10vw; // margin: auto; }
196. header { border: 20px solid #000; background: yellow; min-height: 100vh; display: flex; align-items: flex-end; justify-content: flex-end; } h1 { font-size: 10vw; margin: 0; }
197. Flexbox
198. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Flexible Box Layout, Level 1 May 14, 2015 w3.org/TR/css-flexbox-1
205. 7.
207. CSS Grid Layout
208. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS Grid Layout, Level 1 September 17, 2015 w3.org/TR/css-grid-1
213. Old School Floats
214. Dynamic Grids
220. When?
221. When Can I Use This in Production? (aka on a Real Website)
222. Why Did You Tell Me About 
 All This Stuff 
 I Totally Can’t Use Yet?
223. Do Websites Need To Look Exactly The Same in Every Browser?
224. DoWebsitesNeedToLook
 ExactlyTheSameinEvery
 Browser.com
226. Progressive Enhancement
228. When Can I Use This? Later Grid Layout Exclusions Shapes Level 2 Uncertain Regions More? Round Fragmentation Figures Overflow (???…) Last Fall Shapes Level 1 Flexbox Viewport Units 5 Years Ago Rotation Multicolumn Layout Dynamic Grids (odd numbers of columns, 
 ratio grids)
229. Hardest part is changing our thinking, not our CSS.
230. Magazines and The Web
236. Translate.
     Don’t Transfer.
240. (*From her incredible talk, Adapting Ourselves to Adaptive Content.) — Karen Mc rane
243. The most dangerous phrase in the language is ‘We’ve always done it this way.’ 
 — Grace Hopper
244. One Last Story
249. ?
250. THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you! Mozilla Designer Evangelist