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

Modern Layouts: Getting Out of Our Ruts // AEA Seattle 2015

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
March 31, 2015

Modern Layouts: Getting Out of Our Ruts // AEA Seattle 2015

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 may be 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.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

March 31, 2015
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

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

    thewebahead.net JEN SIMMONS @jensimmons An Event Apart Seattle 2015
  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. The medium shapes the medium.

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

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. vogue.com

  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. Layout should serve the content.

  68. MAGAZINES

  69. 1.

  70. None
  71. None
  72. None
  73. None
  74. CSS Shapes

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

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

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

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

  84. github.com/jensimmons/thelayoutsahead

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

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

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

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

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  90. None
  91. None
  92. None
  93. None
  94. Vote for CSS Shapes! https://wpdev.uservoice.com/forums/257854-internet- explorer-platform/suggestions/6263716-shapes https://bugzilla.mozilla.org/show_bug.cgi? id=1040714

  95. None
  96. None
  97. 2.

  98. None
  99. None
  100. None
  101. None
  102. None
  103. Working Draft Last Call Candidate
 Recommendation Proposed
 Recommendation Recommendation CSS

    Exclusions Module Level 1 Oct 1, 2013 dev.w3.org/csswg/css-exclusions
  104. Use Grid or Absolute Positioning to place an item. Then

    add property wrap-flow. wrap-flow: both;
  105. None
  106. None
  107. 3.

  108. None
  109. None
  110. None
  111. None
  112. None
  113. main { transform: 
 rotate(-10deg); }

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

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

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

    Transforms Module level 1 Nov 26, 2013, “refining” w3.org/TR/css-transforms
  118. None
  119. 4.

  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. Multiple Column Layout

  127. None
  128. None
  129. article { max-width: 500px; margin: 0 auto; }

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

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

  133. None
  134. None
  135. img { width: 100%; } article { column-width: 200px; column-gap:

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

    Multicolumn Layout Module April 12, 2011 w3.org/TR/css-multicol
  137. None
  138. Regions

  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. 5.

  147. None
  148. None
  149. None
  150. None
  151. None
  152. <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>
  153. img { float: left; margin-right: 2em; width: 50%; } div

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

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

    } h1 { font-size: 6vw; }
  158. None
  159. None
  160. Viewport Units

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

    Values and Units Module level 3 July 30, 2013 w3.org/TR/css-values
  163. Text

  164. 6.

  165. Flexbox

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

    Flexible Box Layout Sept 25, 2014 w3.org/TR/css3-flexbox
  167. None
  168. None
  169. None
  170. None
  171. None
  172. None
  173. Grid

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

    Grid Layout Module Level 1 May 13, 2014 w3.org/TR/css3-grid-layout
  175. None
  176. None
  177. None
  178. None
  179. Old School Floats

  180. None
  181. None
  182. None
  183. None
  184. None
  185. Big changes to the underlining technology are coming…

  186. Magazines and The Web

  187. None
  188. None
  189. None
  190. Translate,  Don’t Transfer.

  191. None
  192. None
  193. None
  194. None
  195. (*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to

    Adaptive Content.)
  196. None
  197. None
  198. The most dangerous phrase in the language is ”We’ve always

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

  200. None
  201. None
  202. None
  203. THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thanks!