Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Layouts, Extended Version

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.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

October 14, 2015
Tweet

Transcript

  1. MODERN LAYOUTS Getting Out of Our Ruts THE WEB AHEAD

    thewebahead.net JEN SIMMONS @jensimmons October 2015
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  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
  18. None
  19. None
  20. None
  21. None
  22. A C B A C B A C B A

    C B
  23. None
  24. None
  25. None
  26. None
  27. drawing by Dave Ellis novolume.co.uk

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. The medium shapes the medium.

  53. ?

  54. There’s a world of Graphic Design older than the web.

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. vogue.com

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. Layout should serve the content.

  75. MAGAZINES

  76. 1.

  77. None
  78. None
  79. None
  80. None
  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
  86. None
  87. None
  88. None
  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; }
  95. None
  96. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2

    — Later shape-inside: foo();
  105. None
  106. 2.

  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  121. None
  122. Source order matters.

  123. None
  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;
  126. None
  127. 3.

  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  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
  140. None
  141. 4.

  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. Multiple Column Layout

  149. None
  150. None
  151. article { max-width: 500px; margin: 0 auto; }

  152. article { column-count: 2; column-gap: 2em; }

  153. None
  154. article { // column-count: 2; column-width: 200px; column-gap: 2em; }

  155. None
  156. None
  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
  159. None
  160. None
  161. None
  162. CSS Regions

  163. None
  164. None
  165. None
  166. 5.

  167. None
  168. None
  169. None
  170. None
  171. None
  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; }
  174. None
  175. img { float: left; margin-right: 2em; // width: 50%; height:

    100vh; } div { padding: 2em; }
  176. None
  177. img { float: left; margin-right: 2em; width: 50vw; height: 100vh;

    } h1 { font-size: 6vw; }
  178. None
  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; }
  182. None
  183. None
  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
  187. None
  188. 6.

  189. None
  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; }
  194. None
  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
  199. None
  200. None
  201. None
  202. None
  203. None
  204. None
  205. 7.

  206. None
  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
  209. None
  210. None
  211. None
  212. None
  213. Old School Floats

  214. Dynamic Grids

  215. None
  216. None
  217. None
  218. None
  219. None
  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

  225. None
  226. Progressive Enhancement

  227. None
  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

  231. None
  232. None
  233. None
  234. None
  235. None
  236. Translate.  Don’t Transfer.

  237. None
  238. None
  239. None
  240. (*From her incredible talk, Adapting Ourselves to Adaptive Content.) —

    Karen Mc rane
  241. None
  242. None
  243. The most dangerous phrase in the language is ‘We’ve always

    done it this way.’ 
 — Grace Hopper
  244. One Last Story

  245. None
  246. None
  247. None
  248. None
  249. ?

  250. THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you! Mozilla

    Designer Evangelist