Pro Yearly is on sale from $80 to $50! »

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. MODERN LAYOUTS Getting Out of Our Ruts THE WEB AHEAD

    thewebahead.net JEN SIMMONS @jensimmons
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  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. None
  15. None
  16. None
  17. None
  18. A C B A C B A C B A

    C B
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  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. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. The medium shapes the medium.

  48. ?

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

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. vogue.com

  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. Layout should serve the content.

  70. MAGAZINES

  71. 1.

  72. None
  73. None
  74. None
  75. None
  76. CSS Shapes

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

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

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

    Shapes, Level 1 March 20, 2014 w3.org/TR/css-shapes-1
  81. None
  82. None
  83. None
  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;
  85. labs.thewebahead.net

  86. github.com/jensimmons/thelayoutsahead

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

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

    border-radius: 100px; }
  89. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
  90. None
  91. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2

    — Later shape-inside: foo();
  100. None
  101. Vote for CSS Shapes! https://bugzilla.mozilla.org/ show_bug.cgi?id=1040714 https://wpdev.uservoice.com/forums/257854-internet- explorer-platform/suggestions/6263716-shapes

  102. 2.

  103. None
  104. None
  105. None
  106. None
  107. None
  108. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Exclusions, Level 1 Jan 15, 2015 w3.org/TR/css3-exclusions
  109. Use Absolute Positioning to place an item (or CSS Grid).

    Then add property wrap-flow: wrap-flow: both;
  110. None
  111. 3.

  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. main { transform: 
 rotate(-10deg); }

  119. h1 { transform:
 rotate(-90deg); }

  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%); }
  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); } }
  122. transform: rotate

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

    Transforms, Level 1 Nov 26, 2013 w3.org/TR/css-transforms-1
  124. None
  125. 4.

  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. Multiple Column Layout

  133. None
  134. None
  135. article { max-width: 500px; margin: 0 auto; }

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

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

  139. None
  140. None
  141. img { width: 100%; } article { column-width: 200px; column-gap:

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

    Multicolumn Layout April 12, 2011 w3.org/TR/css3-multicol
  143. None
  144. None
  145. None
  146. CSS Regions

  147. None
  148. None
  149. None
  150. None
  151. None
  152. None
  153. 5.

  154. None
  155. None
  156. None
  157. None
  158. None
  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>
  160. img { float: left; margin-right: 2em; width: 50%; } div

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

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

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

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

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

    6em; height: 100vh; } h1 { font-size: 10vw; margin-top: 0; text-align: center; }
  169. None
  170. None
  171. None
  172. Viewport Units

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

    Values and Units, Level 3 July 30, 2013 w3.org/TR/css3-values
  175. None
  176. None
  177. 6.

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

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

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

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

    display: flex; } h1 { font-size: 10vw; margin: auto; }
  183. None
  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; }
  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; }
  186. Flexbox

  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
  188. None
  189. None
  190. None
  191. None
  192. None
  193. None
  194. 7.

  195. None
  196. CSS Grid Layout

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

    Grid Layout, Level 1 March 17, 2015 w3.org/TR/css-grid-1
  198. None
  199. None
  200. None
  201. None
  202. Old School Floats

  203. Dynamic Grids

  204. None
  205. None
  206. None
  207. None
  208. None
  209. When?

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

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

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

    Browser?
  213. DoWebsitesNeedToLook
 ExactlyTheSameinEvery
 Browser.com

  214. None
  215. Progressive Enhancement

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

  219. Magazines and The Web

  220. None
  221. None
  222. None
  223. None
  224. None
  225. Translate.  Don’t Transfer.

  226. None
  227. None
  228. None
  229. (*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to

    Adaptive Content.)
  230. None
  231. None
  232. The most dangerous phrase in the language is ‘We’ve always

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

  234. None
  235. None
  236. None
  237. None
  238. ?

  239. THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you! Workshops.

    Consulting. Design. Come talk to me.