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

Modern Layouts: Getting Out of Our Ruts // Blend Conf

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
September 12, 2014

Modern Layouts: Getting Out of Our Ruts // Blend Conf

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.

Live demo: http://labs.thewebahead.net/thelayoutsahead/
Code repo: https://github.com/jensimmons/thelayoutsahead

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

September 12, 2014
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Modern Layouts: Getting Out of Our Ruts @jensimmons Jen Simmons,

    The Web Ahead
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. 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
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  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. Text

  39. None
  40. Graphic Design hasn’t always been like this.

  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. vogue.com

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. Noise to Noise Ratio “Sure. There's definitely some excellent original

    work in there — in the middle of all those ads.” Merlin Mann
  60. None
  61. Of course, people problems.

  62. Truly present the content. Be more inventive with your layouts.

  63. MAGAZINE

  64. None
  65. None
  66. None
  67. None
  68. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

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

    }
  70. CSS Shapes ( level 1 )

  71. None
  72. shape-outside: circle(); shape-outside: elipse(); shape-outside: border-box; shape-outside: inset(0px round 120px)

    border-box; shape-outside: url(http:// example.com/image.jpg); shape-margin: 30px;
  73. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

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

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

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

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  77. None
  78. None
  79. None
  80. github.com/jensimmons/thelayoutsahead

  81. labs.thewebahead.net

  82. follow @jensimmons to get these slides

  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. main { transform: rotate(-10deg); }

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

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

  93. None
  94. None
  95. None
  96. None
  97. <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>
  98. img { float: left; margin-right: 2em; width: 50%; } div

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

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

    } h1 { font-size: 6vw; }
  103. None
  104. None
  105. Viewport Units

  106. 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
  107. Text

  108. None
  109. None
  110. None
  111. None
  112. Multiple Column Layout

  113. None
  114. None
  115. article { max-width: 500px; margin: 0 auto; }

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

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

  119. None
  120. None
  121. img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 1px solid #444; }
  122. None
  123. Flexbox

  124. None
  125. None
  126. None
  127. None
  128. Regions

  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. Grid

  136. None
  137. and more…

  138. None
  139. Translate, Don’t Transfer.

  140. None
  141. None
  142. None
  143. None
  144. one last story

  145. None
  146. None
  147. None
  148. Thanks! Jen Simmons The Web Ahead thewebahead.net Follow @jensimmons to

    get these slides!