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

Revolutionize Your Page — early summer 2016

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
June 24, 2016

Revolutionize Your Page — early summer 2016

Demo, links and more at http://labs.jensimmons.com

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities. She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page — any page.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

June 24, 2016
Tweet

Transcript

  1. Revolutionize Your Page: Real Art Direction 
 on the Web

    Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons
  2. art direction

  3. None
  4. brand

  5. None
  6. conversation

  7. None
  8. None
  9. ART DIRECTION

  10. Art Direction

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. Art Direction

  19. Editorial Design

  20. “ ” The vast majority of editorial [design] has at

    its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
  21. “ ” The vast majority of editorial [design] has at

    its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
  22. None
  23. “ ” The vast majority of editorial [design] has at

    its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
  24. None
  25. None
  26. None
  27. None
  28. drawing by Dave Ellis novolume.co.uk

  29. None
  30. Stephen Waller at Enhance Conf expressing how BORED he is

    with web design today.
  31. None
  32. None
  33. div { width: 400px; padding: 25px; } What is the

    size of the <div> box? Internet Explorer: 400px Everyone else: 450px
  34. div { width: 400px; padding: 25px; } What is the

    calculated size of the box? Everyone: 400px
  35. None
  36. None
  37. None
  38. None
  39. Layout shouldn’t be a multiple choice question.

  40. Separate tooling needs from the design process.

  41. None
  42. Layout

  43. None
  44. None
  45. None
  46. None
  47. Amazing Future

  48. Amazing future! The No-layout Layout Table-based Layouts Hand-coded Float Layouts

    The Official Timeline of the Evolution of Web Page Layout 3rd-Party Framework Layouts
  49. labs.jensimmons.com

  50. Big Pieces & Little Pieces

  51. Initial Letter

  52. None
  53. None
  54. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4;

    initial-letter: 4; margin-top: 1em; // bug fix }
  55. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; margin-top: 1em;

    // bug fix -webkit-initial-letter: 4; initial-letter: 4; }
  56. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter

    { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; margin-top: 1em; // bug fix -webkit-initial-letter: 4; initial-letter: 4; } }
  57. Feature Queries

  58. @supports (property:value) { // a bunch of CSS }

  59. // layout using old-technology @supports (display:grid) { // overrides to

    undo old layout // layout using new-technology }
  60. Viewport Units

  61. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh;

    } h1 { margin: auto; }
  62. 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
  63. 25vw 50vh that dang “fold”

  64. Object Fit

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

    } h1 { font-size: 6vw; }
  68. None
  69. img { width: 50%; height: 400px; object-fit: cover; }

  70. None
  71. None
  72. Clip Path

  73. None
  74. None
  75. None
  76. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3%

    93%); }
  77. img { clip-path: polygon(24% 3%, 98% 4%, 80% 79%, 98%

    95%, 46% 100%, 3% 84%); }
  78. CSS Shapes

  79. img { float: left; shape-outside: circle(); }

  80. img.grapes { float: left; shape-outside: polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%,

    0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%); }
  81. None
  82. None
  83. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both

    Dimensions Sizing Based on Edges
  84. Big Pieces

  85. Flexbox CSS Grid

  86. None
  87. None
  88. None
  89. Flexbox

  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. Multicolumn

  99. None
  100. CSS Grid Layout

  101. None
  102. 1 2 3 4 5 7 6 8 9 10

    11 12 13 grid-auto-flow: dense;
  103. None
  104. None
  105. 1 2 3 4 5 6 grid-column: 1 / 2;

    grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;
  106. None
  107. None
  108. nightly.mozilla.org

  109. Behind a flag Chrome Chrome Canary Opera Opera Developer Safari

    Technical Preview Just Works Firefox Firefox 
 Dev Edition Firefox 
 Nightly IE Edge In Progress
  110. https://github.com/mozilla/css-grid-inspector

  111. None
  112. How Now?

  113. None
  114. Progressive Enhancement & The Nature of CSS

  115. 60% 40%

  116. 95% 5%

  117. 88% 12%

  118. 100% 0%

  119. None
  120. None
  121. None
  122. None
  123. www.layout.land

  124. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons