Modern Layouts: Getting Out of Our Ruts

Modern Layouts: Getting Out of Our Ruts

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 are 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

Presented at:

2015
An Event Apart, Seattle
An Event Apart, San Diego
An Event Apart, DC
An Event Apart, Chicago
An Event Apart, Austin
An Event Apart, San Francisco
Future of Web Design, San Francisco
Future of Web Design, New York
Ampersand, Brighton
Responsive Field Day, Portland
HOW Interactive, Boston
Push Conference, Munich
SFHTML5 Meetup, San Francisco
UIE Virtual Seminar, online
Responsive Web Design Summit, online

2014
Generate, New York
Blend Conf, Charlotte
CSS Dev Conf, New Orleans, Winner of Best Conference Presentation

Response to this talk: https://storify.com/jensimmons/

Interested in having me present this talk at your conference or company? Ping me at http://thewebahead.net/contact. Video available on request, for your consideration.

I am also creating a one- or two-day workshop version. Ask me about it.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

June 09, 2015
Tweet

Transcript

  1. 1.

    MODERN LAYOUTS Getting Out of Our Ruts THE WEB AHEAD

    thewebahead.net JEN SIMMONS @jensimmons
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.

    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
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 19.
  19. 20.
  20. 21.
  21. 22.
  22. 23.
  23. 24.
  24. 25.
  25. 26.
  26. 27.
  27. 28.
  28. 29.
  29. 30.
  30. 31.
  31. 32.
  32. 33.
  33. 34.
  34. 35.
  35. 36.
  36. 37.
  37. 38.
  38. 39.
  39. 40.
  40. 41.
  41. 42.
  42. 43.
  43. 44.
  44. 45.
  45. 46.
  46. 48.

    ?

  47. 50.
  48. 51.
  49. 52.
  50. 53.
  51. 54.
  52. 55.
  53. 56.
  54. 57.
  55. 58.
  56. 59.
  57. 60.
  58. 61.
  59. 62.
  60. 63.
  61. 64.
  62. 65.
  63. 66.
  64. 67.
  65. 68.
  66. 70.
  67. 71.

    1.

  68. 72.
  69. 73.
  70. 74.
  71. 75.
  72. 77.

    <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>
  73. 81.
  74. 82.
  75. 83.
  76. 84.

    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;
  77. 89.

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

    border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
  78. 90.
  79. 91.

    img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  80. 92.
  81. 93.
  82. 94.
  83. 95.
  84. 96.
  85. 97.
  86. 98.
  87. 100.
  88. 102.

    2.

  89. 103.
  90. 104.
  91. 105.
  92. 106.
  93. 107.
  94. 108.
  95. 109.

    Use Absolute Positioning to place an item (or CSS Grid).

    Then add property wrap-flow: wrap-flow: both;
  96. 110.
  97. 111.

    3.

  98. 112.
  99. 113.
  100. 114.
  101. 115.
  102. 116.
  103. 117.
  104. 120.

    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%); }
  105. 121.

    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); } }
  106. 123.
  107. 124.
  108. 125.

    4.

  109. 126.
  110. 127.
  111. 128.
  112. 129.
  113. 130.
  114. 131.
  115. 133.
  116. 134.
  117. 137.
  118. 139.
  119. 140.
  120. 141.

    img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 
 1px solid #444; }
  121. 142.
  122. 143.
  123. 144.
  124. 145.
  125. 147.
  126. 148.
  127. 149.
  128. 150.
  129. 151.
  130. 152.
  131. 153.

    5.

  132. 154.
  133. 155.
  134. 156.
  135. 157.
  136. 158.
  137. 159.

    <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>
  138. 161.
  139. 163.
  140. 165.
  141. 167.

    header { border: 20px solid #000; background: yellow; padding: 3em

    6em; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
  142. 168.

    header { border: 20px solid #000; background: yellow; padding: 3em

    6em; height: 100vh; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
  143. 169.
  144. 170.
  145. 171.
  146. 173.

    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
  147. 174.
  148. 175.
  149. 176.
  150. 177.

    6.

  151. 178.
  152. 179.

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

    padding: 3em 6em; } h1 { font-size: 10vw; margin: 0; text-align: center; }
  153. 181.

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

    display: flex; } h1 { font-size: 10vw; margin: auto; }
  154. 182.

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

    display: flex; } h1 { font-size: 10vw; margin: auto; }
  155. 183.
  156. 184.

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

    display: flex; align-items: center; justify-content: center; } h1 { font-size: 10vw; // margin: auto; }
  157. 185.

    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; }
  158. 186.
  159. 187.

    Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Flexible Box Layout, Level 1 May 14, 2015 w3.org/TR/css-flexbox-1
  160. 188.
  161. 189.
  162. 190.
  163. 191.
  164. 192.
  165. 193.
  166. 194.

    7.

  167. 195.
  168. 198.
  169. 199.
  170. 200.
  171. 201.
  172. 204.
  173. 205.
  174. 206.
  175. 207.
  176. 208.
  177. 209.
  178. 211.

    Why Did You Tell Me About 
 All This Stuff

    
 I Totally Can’t Use Yet?
  179. 214.
  180. 216.
  181. 217.

    When Can I Use This? Later Shapes Level 2 Exclusions

    Grid Layout Maybe Never Regions What Was That 
 You Mumbled? Fragmentation Figures Overflow (???…) Now Shapes Level 1 Flexbox Viewport Units 5 Years Ago Rotation Multicolumn Layout Dynamic Grids (odd numbers of columns, 
 ratio grids)
  182. 220.
  183. 221.
  184. 222.
  185. 223.
  186. 224.
  187. 226.
  188. 227.
  189. 228.
  190. 230.
  191. 231.
  192. 232.

    The most dangerous phrase in the language is ‘We’ve always

    done it this way.’ 
 — Grace Hopper
  193. 234.
  194. 235.
  195. 236.
  196. 237.
  197. 238.

    ?