Modern Layouts: Getting Out of Our Ruts (40 mins)

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
October 23, 2015

Modern Layouts: Getting Out of Our Ruts (40 mins)

Presented at Push Conference in Munich, Future of Web Design NYC, Future of Web Design San Francisco, HOW Interactive in Boston, and Ampersand in Brighton UK.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

October 23, 2015
Tweet

Transcript

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

    thewebahead.net JEN SIMMONS @jensimmons Fall 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. 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
  16. None
  17. None
  18. None
  19. A C B A C B A C B A

    C B
  20. None
  21. None
  22. None
  23. None
  24. drawing by Dave Ellis novolume.co.uk

  25. None
  26. None
  27. None
  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. The medium shapes the medium.

  41. ?

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

  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. vogue.com

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. Layout should serve the content.

  60. MAGAZINES

  61. 1.

  62. None
  63. None
  64. None
  65. CSS Shapes

  66. <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>
  67. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

  68. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle();

    }
  69. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Shapes, Level 1 March 20, 2014 w3.org/TR/css-shapes-1
  70. None
  71. None
  72. None
  73. 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;
  74. labs.thewebahead.net

  75. github.com/jensimmons/thelayoutsahead

  76. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: ellipse(50% 50%); }
  77. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  78. 1

  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2

    — Later shape-inside: foo();
  86. None
  87. 2.

  88. None
  89. None
  90. None
  91. Multiple Column Layout

  92. article { column-width: 200px; column-gap: 2em; }

  93. None
  94. img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 
 1px solid #444; }
  95. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Multicolumn Layout April 12, 2011 w3.org/TR/css3-multicol
  96. None
  97. 3.

  98. None
  99. None
  100. None
  101. None
  102. <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>
  103. img { float: left; margin-right: 2em; width: 50%; } div

    { padding: 2em; }
  104. None
  105. img { float: left; margin-right: 2em; // width: 50%; height:

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

    } h1 { font-size: 6vw; }
  108. None
  109. <header> <h1>Full-height “Cover Sheets” are the new Splash Page</h1> </header>

    <p>Lorum ipsum article content…</p>
  110. header { border: 20px solid #000; background: yellow; padding: 3em

    6em; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
  111. header { border: 20px solid #000; background: yellow; padding: 3em

    6em; height: 100vh; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
  112. None
  113. None
  114. Viewport Units

  115. 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
  116. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Values and Units, Level 3 July 30, 2013 w3.org/TR/css3-values
  117. None
  118. 4.

  119. None
  120. header { border: 20px solid #000; background: yellow; min-height: 100vh;

    padding: 3em 6em; } h1 { font-size: 10vw; margin: 0; text-align: center; }
  121. header { border: 20px solid #000; background: yellow; min-height: 100vh;

    padding: 3em 6em; } h1 { font-size: 10vw; margin: 0; text-align: center; }
  122. header { border: 20px solid #000; background: yellow; min-height: 100vh;

    } h1 { font-size: 10vw; margin: 0; }
  123. header { border: 20px solid #000; background: yellow; min-height: 100vh;

    display: flex; } h1 { font-size: 10vw; margin: auto; }
  124. header { border: 20px solid #000; background: yellow; min-height: 100vh;

    display: flex; } h1 { font-size: 10vw; margin: auto; }
  125. None
  126. header { border: 20px solid #000; background: yellow; min-height: 100vh;

    display: flex; align-items: center; justify-content: center; } h1 { font-size: 10vw; // margin: auto; }
  127. 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; }
  128. Flexbox

  129. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Flexible Box Layout, Level 1 May 14, 2015 w3.org/TR/css-flexbox-1
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. 5.

  137. None
  138. CSS Grid Layout

  139. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Grid Layout, Level 1 March 17, 2015 w3.org/TR/css-grid-1
  140. None
  141. from gridbyexample.com

  142. None
  143. Old School Floats

  144. Dynamic Grids

  145. None
  146. None
  147. None
  148. None
  149. None
  150. When?

  151. When Can I Use This in Production? (aka on a

    Real Website)
  152. Why Did You Tell Me About 
 All This Stuff

    
 I Totally Can’t Use Yet?
  153. Do Websites Need To Look Exactly The Same in Every

    Browser?
  154. DoWebsitesNeedToLook
 ExactlyTheSameinEvery
 Browser.com

  155. None
  156. Progressive Enhancement

  157. None
  158. 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)
  159. Hardest part is changing our thinking, not our CSS.

  160. Reinventing Web Layout

  161. None
  162. None
  163. None
  164. None
  165. None
  166. Translate.  Don’t Transfer.

  167. None
  168. None
  169. None
  170. (*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to

    Adaptive Content.)
  171. None
  172. None
  173. The most dangerous phrase in the language is ‘We’ve always

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

  175. None
  176. None
  177. None
  178. None
  179. ?

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

    Designer Advocate