Designing Imaginative Layouts (workshop)

With more and more websites following the same tired layout patterns, it’s time be bring imagination back to our digital products and websites. This workshop will teach you how to design inspired layouts, without compromising accessibility, responsiveness or user experience.

Transcript

2. Designing and developing imaginative layouts, Australia 2016 Designing imaginative layouts With Andy Clarke @malarkey
5. Speakerdeck https://speakerdeck.com/malarkey/ #inspireddesign
6. Designing and developing imaginative layouts, Australia 2016
7. Morning Designing imaginative layouts Systems Anatomy Types Ratios Compound Practical
8. Developing imaginative layouts Columns Shapes Practical Afternoon Flexible boxes Grid
9. Designing and developing imaginative layouts, Australia 2016 Inspiration
10. Alexey Brodovitch
11. Harpers Bazaar magazine 1934–1958
16. Designing and developing imaginative layouts, Australia 2016 Grid systems
36. Create units in multiples of three or four, with twelve as an ideal, because it is a multiple of three and four. ” Khoi Vinh in ‘Ordering Disorder,’ New Riders 2010
37. Designing and developing imaginative layouts, Australia 2016 Grid anatomy
47. Designing and developing imaginative layouts, Australia 2016 Grid types
58. Designing and developing imaginative layouts, Australia 2016 Ratios
60. Grids are fundamentally about proportions, the relationship between content and viewport. #inspireddesign
80. To be ‘rational,’ ratios must include whole numbers. Irrational ratios include fractions. #inspireddesign
81. Designing and developing imaginative layouts, Australia 2016 Gridset
99. Designing and developing imaginative layouts, Australia 2016 Inspiration
106. Grids help to bring order, but suprise and delight are key to maintaining interest. #inspireddesign
107. Designing and developing imaginative layouts, Australia 2016 Get creative
110. Example content https://goo.gl/PfyCQC
111. Designing and developing imaginative layouts, Australia 2016 Take a break
112. Designing and developing imaginative layouts, Australia 2016 Welcome back
114. Designing and developing imaginative layouts, Australia 2016 Symmetry
126. Designing and developing imaginative layouts, Australia 2016 Inspiration
131. Designing and developing imaginative layouts, Australia 2016 Compound grid
132. Pros Distinctive Flexible Compound grid Mathematics Cons
141. Designing and developing imaginative layouts, Australia 2016 Inspiration
143. Designing and developing imaginative layouts, Australia 2016 Modular grid
153. You don’t need to fill every grid module with content #inspireddesign
158. Designing and developing imaginative layouts, Australia 2016 Inspiration
162. Designing and developing imaginative layouts, Australia 2016 Get creative
163. Reading list
164. Designing and developing imaginative layouts, Australia 2016 Anything we missed?
166. Designing and developing imaginative layouts, Australia 2016 Developing imaginative layouts With Andy Clarke @malarkey
167. Designing and developing imaginative layouts, Australia 2016 Welcome
168. Developing imaginative layouts Columns Shapes Practical Afternoon Flexible boxes Grid
169. Speakerdeck https://speakerdeck.com/malarkey/ #inspireddesign
170. Today’s browsers Chrome Canary Firefox Nightly Safari Technology Preview https://goo.gl/hEOhjB https://goo.gl/MqX7eh https://goo.gl/SAeD4H
174. Drawbacks Complicated maths Vertical centering Float drops Float clearing Same height columns Shrink-to-fit containers Source order dependence
175. Vertical centring solved
176. Float drop & clearing solved
177. Equal height columns solved
178. Source order dependence helped
179. Designing and developing imaginative layouts, Australia 2016 Multiple columns
185. Advantages Improves readability
 Manages the measure
 Reduces purely presentational markup
189. Presentational HTML <div class="col"> <p>Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.</p> </div> <div class="col"> <p>His introduction of mechanical movable type printing to Europe started the Printing Revolution and is widely regarded as the most important invention of the second millennium.</p> </div>
190. Properties Column count Column width Column span Break after Column gap Column rule Break before
191. Markup <section> <p>Johannes Gensfleisch zur Laden zum Gutenberg was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe.</p> <p>His introduction of mechanical movable type printing to Europe started the Printing Revolution and is widely regarded as the most important invention of the second millennium.</p> </section>
192. section { column-width : 32em; } Column width -moz- and -webkit- prefixes may also be required
193. section { column-count : 2; } Column count -moz- and -webkit- prefixes may also be required
194. @media (min-width: 48rem) { section {
 column-count : 2; }
 } @media (min-width: 64rem) { section {
 column-count : 3; }
 } Column count -moz- and -webkit- prefixes may also be required
195. section { columns : 2 24em; } Columns -moz- and -webkit- prefixes may also be required
196. section { column-gap : 2vw; } Column gap -moz- and -webkit- prefixes may also be required
197. section { column-rule-width : 2px; column-rule-style : solid; 
 column-rule-color : #000; } Column rule -moz- and -webkit- prefixes may also be required
199. @media (min-width : 37.5em) { .sidebar ul { column-count : 2; column-gap : 4vw; } } @media (min-width : 48em) { .sidebar ul { column-count : 1; } } Columnised lists -moz- and -webkit- prefixes may also be required
200. @media (min-width : 37.5em) { .cols-figure figcaption { column-count : 2; column-gap : 4vw; } } Columnised captions -moz- and -webkit- prefixes may also be required
203. <section> <p>…</p> <figure class="column__span" >…</figure> <p>…</p> <h2 class="column__span">…</h2> … </section> Spanning columns
204. .cols__span { column-span : all; } Spanning columns Column-span is not supported in Firefox
208. h2 { break-before : column; break-after : avoid-column; 
 } Breaks -moz- and -webkit- prefixes may also be required
209. Support 1 Supported with -webkit- prefix 2 Supported with -moz- prefix 13 (IE 10) 52 (2 2 ) 51 (4 1 ) 37 (15 1 ) 9 (3.1 1 ) 2.1 1 9.2 (3.2 1 ) 53
210. Designing and developing imaginative layouts, Australia 2016 Inspiration
214. Feature query @supports (column-span:all) { section {
 column-count : 2; }
 }
215. Feature query @supports (column-span:all) { section {
 column-count : 2; }
 } @supports not (column-span:all) { section {
 padding : 0 4vw; }
 }
216. Feature query @supports (column-count:2) or (-webkit-column-count:2) { section {
 column-count : 2; }
 }
217. Feature query @supports (column-count:2) and (column-span:all { section {
 column-count : 2; } }
218. Designing and developing imaginative layouts, Australia 2016 Shapes
223. .shapes__circle { shape-outside : circle ( ); // Content will wrap around a shape } Shapes
224. circle () ellipse () box-values inset () polygon () Shapes Each shape is defined by a set of points.
225. Floated left or right 
 A shapes element must be floated to enable content to wrap around it. 
 Intrinsic size
 Intrinsic size (height and width dimensions) needed to establish a coordinate system on the element; the system will be used to position the shape functions’ points on the element. The intrinsic size doesn’t have to be set using absolute values (e.g pixels), you can use percentages, which means that the shaped element can be fully responsive. Conditions
226. img { float : left; shape-outside : circle (); } Circle
227. img { float : left; shape-outside : circle ();
 shape-margin : 22px; } Shape margin
228. img { float : left; shape-outside : ellipse ();
 } Ellipse
229. img { float : left; shape-outside : inset ();
 } Inset
230. img { float : left;
 background : url(gutenberg-press.png) 100% 100%; clip-path : polygon(…);
 shape-outside : polygon(…); } Polygon
239. Support 1 Supported with -webkit- prefix 37 24 7.1 1 52 8 1 53 4
240. Designing and developing imaginative layouts, Australia 2016 Get technical
241. Example content https://goo.gl/PfyCQC
242. Designing and developing imaginative layouts, Australia 2016 Break
243. Designing and developing imaginative layouts, Australia 2016 Welcome back
244. Designing and developing imaginative layouts, Australia 2016 Flexible boxes
245. Advantages More flexible layouts Visual content reordering Column height matching
246. Main & cross axis main axis cross axis
247. Applying flex .container { display : flex; } Turns container into a flex-container and doesn’t remove its block attributes
249. Applying flex .container { display : inline-flex; } Container will not fill available horizontal space
250. Applying flex <div class="item">
 <div class="item__img"> <img src="gutenberg.svg" alt="">
 </div> <div class="item__description">…</div> </div>
251. Flex direction .item { flex-direction : row; /* default */ } // row, row-reverse, column, column-reverse
252. Unless we’ve set the dir attribute to rtl, for right-to-left languages, 
 this flex starts on the left and ends on the right.
253. Reverse .item { flex-direction : row-reverse; }
254. Reversing the flex-direction changes this horizontal layout without altering the markup.
255. Column <figure class="figure--classic">
 <img src="gutenberg.svg" alt="">
 <figcaption>…</figcaption> </figure>
256. Column .figure--classic { flex-direction : column; }
258. Column <figure class="figure--reverse">
 <img src="gutenberg.svg" alt="">
 <figcaption>…</figcaption> </figure>
259. Column-reverse .figure--reverse { flex-direction : column-reverse; }
261. Figcaption .figure--reverse figcaption { max-width : 50%; 
 }
263. .container { flex-wrap : nowrap; /* default */ } Wrapping flex items
264. .container { flex-wrap : wrap; } Wrapping flex items
266. .container { flex-wrap : wrap-reverse; } Wrap-reverse
268. Flex-flow .container { flex-flow : row nowrap; }
270. Flex-grow // Boxes have equal width .box { flex-grow : 1; 
 }
271. The ability for a flex item to grow if necessary and dictates the amount 
 of available space an item should take.
272. The ability for a flex item to grow if necessary and dictates the amount 
 of available space an item should take.
273. Flex-grow .box--one { flex-grow : 1; 
 } .box--two { flex-grow : 2; // Twice available space as siblings
 } .box--three { flex-grow : 1;
 }
274. The ability for a flex item to grow if necessary and dictates the amount 
 of available space an item should take.
275. Flex <figure class="figure--horizontal">
 <img src="gutenberg.svg" alt="">
 <figcaption>…</figcaption> </figure>
276. Flex @media (min-width: 48rem) { .figure--horizontal { display : flex; } .figure--horizontal img { 
 flex : 4; } .figure--horizontal figcaption { 
 flex : 1; }
 
 }
278. Flex @media (min-width: 48rem) { .figure--horizontal-reverse { display : flex;
 flex-direction : row-reverse; } }
280. Flex-basis <section>
 <article>…</article> 
 <article>…</article> </section>
281. Flex-basis article { 
 flex-basis : 400px; 
 }
283. Flex-basis article:first-of-type { 
 flex-grow : 1; 
 }
285. Order Controls the order in which items appear visually in a flex container. <section>
 <article>…</article> 
 <article>…</article> <article>…</article> </section>
286. Order section { 
 display : flex; 
 flex-direction : column; }
288. Order article:last-of-type { 
 order : -1; 
 }
290. Order .item:nth-of-type(1) { 
 order : 3; } .item:nth-of-type(2) { 
 order : 4; } .item:nth-of-type(3) { 
 order : 1; } .item:nth-of-type(4) { 
 order : 2; }
292. Align-items flex-start: Items placed on the cross axis start line .content {
 align-items : flex-start; 
 }
294. Align-items flex-end: Items placed on the cross axis end line .content {
 align-items : flex-end; 
 }
296. Align-items center: items centered in the cross axis .content {
 align-items : center; 
 }
298. Align-items stretch (default): items stretch to fill container height .content {
 align-items : stretch; /* default */
 }
300. Align-items baseline: items aligned so that their baselines match .content {
 align-items : baseline;
 }
302. Align-items <figure>
 <img src="gutenberg.svg" alt="">
 <figcaption>…</figcaption> </figure>
303. Align-items @media (orientation:landscape) { figure {
 display : flex;
 align-items : flex-end; } img {
 flex : 2 0 360px; } figcaption {
 flex : 1; }
 }
305. Justify-content flex-start: Items placed on the main axis start line .content {
 justify-content : flex-start;
 }
307. Justify-content flex-end: Items placed on the main axis end line .content {
 justify-content : flex-end;
 }
309. Justify-content center: Items centered in the main axis .content {
 justify-content : center;
 }
311. Justify-content space-between: Items distributed in the line; first item on the start line, last on the end .content {
 justify-content : space-between;
 }
313. Justify-content space-around: Items distributed in the line with equal space around them .content {
 justify-content : space-around;
 }
315. Align-content flex-start: lines placed at the start of the container .content {
 align-content : flex-start;
 }
317. Align-content flex-end: lines placed at the end of the container .content {
 align-content : flex-end;
 }
319. Align-content center: lines placed at the center of the container .content {
 align-content : center;
 }
321. Align-content stretch (default): lines stretch to fill container height .content {
 align-content : stretch; /* default */
 }
323. Align-content space-between: Lines distributed in the container; first item on the start line, last on the end .content {
 align-content : space-between; 
 }
325. Align-content space-around: Lines distributed in the container with equal space around them .content {
 align-content : space-around; 
 }
327. Align-self align-self: Overrides for individual flex items .content {
 align-self : flex-end; 
 } /* auto|flex-start|flex-end|center|baseline|stretch */
330. Pinning elements <article> <img src="gutenberg.svg" alt="">
 <p>…</p>
 <a href="">Find out more</a> </article>
331. article { display : flex; flex-direction : column; } article > a { margin-top : auto; } Pinning elements
333. Support 1 Supported with -webkit- prefix 11 30 27 23 6.1 1 4.4 7.1 1 37
334. Legacy 10 2012 syntax with -ms- prefix 5.1 Old syntax with -webkit- prefix 414 Old syntax with -webkit- prefix 7 Old syntax with -webkit- prefix
335. .container { display : -webkit-box; display : -moz-box; display : -ms-flexbox; display : -webkit-flex; display : flex; 
 } Legacy syntax
336. @mixin flexbox() { display : -webkit-box; display : -moz-box; display : -ms-flexbox; display : -webkit-flex; display : flex; } .container { @include flexbox(); 
 } Flexbox Sass mixin @mixin flex($values) { -webkit-box-flex : $values; -moz-box-flex : $values; -webkit-flex : $values; -ms-flex : $values; flex : $values; } .box { @include flex(1 200px); 
 }
338. Modernizr Isolate Flexbox compatible and non-compatible files Modernizr adds flexbox, no-flexbox, and flexboxlegacy classes .no-flexbox .container { /* styles */ }
339. Designing and developing imaginative layouts, Australia 2016 Viewport units
342. vw
 Equal to 1% of the width of the viewport 
 vh
 Equal to 1% of the height of the viewport 
 vmin/vmax
 Equal to vw or vh, whichever is smaller/larger Viewport units
343. Viewport units .splash { min-height : 100vh; }
346. Designing and developing imaginative layouts, Australia 2016 Grid
347. Designing and developing imaginative layouts, Australia 2016 Inspiration
353. Turn on features chrome://flags/#enable-experimental-web- platform-features or opera://flags/#enable- experimental-web-platform-features and press “Enable” Grid works in Firefox Nightly. In Firefox Developer Edition go to about:config and enable layout.css.grid.enabled flag Turn on Grid support in the Develop Menu under Experimental Features
355. Markup <div class="row"> <div class="one column">…</div> <div class="eleven columns">…</div> </div> <div class="row"> <div class="one-half column">…</div> <div class="one-half column">…</div> </div>
356. Markup <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">…</div> <div class="col-xs-6 col-md-4">…</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">…</div> <div class="col-xs-6 col-sm-4">…</div> </div>
357. With CSS Grid we can finally stop describing our layout in markup. #inspireddesign
358. Applying grid section { display : grid; } Turns container into a grid container and doesn’t remove its block attributes
359. Applying grid section { display : inline-grid; } Container will not fill available horizontal space
360. Grid lines
361. Grid track
362. Grid track
363. Grid cell
364. Grid area
365. Markup <section>
 <article>…</article> 
 <article>…</article> <article>…</article> </section>
367. Columns section { grid-template-columns : 180px 600px 180px; }
369. Columns section { grid-template-columns : 25% auto 25%; }
371. Rows section { grid-template-rows : 300px 300px; }
373. Rows section { grid-template-rows : 300px; }
375. Auto rows section { grid-auto-rows : 200px; }
377. Column gap section { grid-column-gap : 20px; }
379. Row gap section { grid-row-gap : 20px; }
381. Grid gap section { grid-gap : 2vw 4vw; }
382. Fraction unit section { grid-template-columns : 1fr 1fr 1fr; }
384. Fraction unit section { grid-template-columns : 2fr 1fr 1fr; }
386. Mixed units section { grid-template-columns : 2fr 1fr 300px; }
388. Repeat section { grid-template-columns : repeat(6, 1fr); }
390. Outside repeat section { grid-template-columns : 60px repeat(6, 1fr); }
392. Outside repeat section { grid-template-columns : repeat(6, 1fr) 60px; }
394. Minmax section { grid-template-columns : minmax(100px,300px) 1fr 1fr; }
396. Auto-flow section { grid-auto-flow : column; } // column, row, dense, column dense, row dense
398. Order article:nth-child(3) { order : -1; 
 } Grid items have a default order of 0.
400. Order article:nth-child(4) { order : 1; 
 } Grid items have a default order of 0.
402. Auto-fill section { grid-template-columns : repeat(auto-fill, 100px); 
 } Grid items have a default order of 0.
404. Auto-fill section { grid-template-columns : repeat(auto-fill, minmax(100,1fr); 
 } Grid items have a default order of 0.
406. Auto-fit section { grid-template-columns : repeat(auto-fit, minmax(100,1fr); 
 } Grid items have a default order of 0.
407. Markup <ul>
 <li>…</li> 
 <li>…</li> <li>…</li> <li>…</li> 
 <li>…</li> <li>…</li> … </ul>
408. Auto-placement ul { display : grid; grid-template-columns : repeat(auto-fill,minmax(100px, 1fr)); grid-auto-rows : minmax(100px, auto); grid-gap : 2px; }
410. Spanning .span--2 { grid-column-end : span 2; grid-row-end : span 2; } .span--3 { grid-column-end : span 3; grid-row-end : span 3; }
413. Auto-placement ul { grid-auto-flow : dense; } // column, row, dense, column dense, row dense
416. Placement li:nth-child(1) { grid-row : 3; }
418. Placement li:nth-child(1) { grid-row : 3; grid-column : 1 / -1; }
420. Placement li:nth-child(1) { grid-row : 5; }
423. Markup <section> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </section>
424. Grid section { display : grid; grid-template-columns : repeat(6, 1fr); grid-template-rows : repeat(3, 300px); grid-gap : 2vw; }
426. article:nth-child(1) { grid-column : 1 / -1; 
 }
428. article:nth-child(2) { grid-column : 1 / 3; grid-row : 2;
 }
430. article:nth-child(3) { grid-column : 3 / 7; grid-row : 2;
 }
432. article:nth-child(4) { grid-column : 1 / 4; grid-row : 3; 
 } article:nth-child(6) { grid-column : 5 / 7; grid-row : 3; 
 }
435. Overlapping cells article:nth-child(5) { grid-column : 4 / 5; grid-row : 1 / 3; z-index : 2;
 }
437. Markup <body> <header>…</header> <aside>…</aside> <main>…</main> <footer>…</footer> </body>
438. body { display : grid; grid-template-columns : 2fr 4fr; grid-gap : 2vw; 
 } Named lines
439. body { display : grid; grid-template-columns : 2fr [content-start] 
 4fr [content-end]; grid-gap : 2vw; 
 } Named lines
440. body { display : grid; grid-template-columns : 2fr [content-start] 
 4fr [content-end]; grid-template-rows : auto [content-start] 
 auto [content-end]; grid-gap : 2vw; 
 } Named lines
441. main { grid-column : 2; grid-row : 2; } main { grid-column : content-start; grid-row : content-start; } Named lines
442. body { display : grid; grid-template-columns : [content-start] 1fr [content-end]; grid-template-rows : auto [content-start] 
 auto [content-end]; grid-gap : 2vw; 
 } @media (min-width: 48em) { grid-template-columns : 2fr [content-start] 
 4fr [content-end]; } Breakpoints
443. Nested grids <section>
 <article>…</article> 
 <article>…</article> <article>…</article> </section>
444. Nested grids section { display : grid; 
 } article:last-of-type { display : grid; 
 }
445. Designing and developing imaginative layouts, Australia 2016 Get technical
451. Designing and developing imaginative layouts, Australia 2016 Resources