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

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

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
September 25, 2015

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

Presented at Responsive Field Day, Portland Oregon.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

September 25, 2015
Tweet

Transcript

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

    thewebahead.net JEN SIMMONS @jensimmons Responsive Field Day 2015
  2. None
  3. None
  4. None
  5. None
  6. None
  7. 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
  8. None
  9. A C B A C B A C B A

    C B
  10. None
  11. None
  12. None
  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. The medium shapes the medium.

  28. ?

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

  30. None
  31. None
  32. Layout should serve the content.

  33. MAGAZINES

  34. 1.

  35. None
  36. None
  37. None
  38. CSS Shapes

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

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

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

    Shapes, Level 1 March 20, 2014 w3.org/TR/css-shapes-1
  43. None
  44. None
  45. None
  46. 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;
  47. labs.thewebahead.net

  48. github.com/jensimmons/thelayoutsahead

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

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

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  51. None
  52. None
  53. None
  54. None
  55. 2.

  56. None
  57. None
  58. None
  59. None
  60. None
  61. <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>
  62. img { float: left; margin-right: 2em; width: 50%; } div

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

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

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

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

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

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

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

    Values and Units, Level 3 July 30, 2013 w3.org/TR/css3-values
  76. None
  77. 3.

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

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

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

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

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

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

    Flexible Box Layout, Level 1 May 14, 2015 w3.org/TR/css-flexbox-1
  87. None
  88. None
  89. None
  90. 4.

  91. None
  92. CSS Grid Layout

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

    Grid Layout, Level 1 March 17, 2015 w3.org/TR/css-grid-1
  94. None
  95. None
  96. When?

  97. 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)
  98. Hardest part is changing our thinking, not our CSS.

  99. Reinventing Web Layout

  100. None
  101. None
  102. (*From her incredible talk, Adapting Ourselves to Adaptive Content.) —

    Karen McGrane
  103. None
  104. None
  105. The most dangerous phrase in the language is ‘We’ve always

    done it this way.’ 
 — Grace Hopper
  106. ?

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