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

Revolutionize Your Page (40min, Fall 2016)

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
September 23, 2016

Revolutionize Your Page (40min, Fall 2016)

All the links for more information, along with a video of this presentation, are at: http://jensimmons.com/presentation/revolutionize-your-page-real-art-direction-web

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

September 23, 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. Editorial Design

  12. “ ” 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
  13. “ ” 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
  14. None
  15. “ ” 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
  16. None
  17. None
  18. None
  19. None
  20. drawing by Dave Ellis novolume.co.uk

  21. None
  22. Stephen Waller at Enhance Conf expressing how BORED he is

    with web design today.
  23. None
  24. None
  25. None
  26. None
  27. None
  28. Layout shouldn’t be a multiple choice question.

  29. Separate tooling needs from the design process.

  30. None
  31. Layout Design

  32. None
  33. None
  34. None
  35. None
  36. None
  37. Amazing Future

  38. The Official Timeline of the Evolution of Web Page Layout

  39. labs.jensimmons.com

  40. Big Pieces & Little Pieces

  41. Initial Letter

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

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

    initial-letter: 4; }
  46. @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; -webkit-initial-letter: 4; initial-letter: 4; } }
  47. Feature Queries

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

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

    undo old layout // layout using new-technology }
  50. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

  51. Viewport Units

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

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

  55. Object Fit

  56. None
  57. None
  58. None
  59. None
  60. img { width: 50%; height: 400px; object-fit: cover; }

  61. Clip Path Masking CSS Shapes

  62. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3%

    93%); }
  63. img { float: left; shape-outside: circle(); }

  64. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both

    Dimensions Sizing Based on Edges
  65. Big Pieces

  66. Multicolumn Flexbox CSS Grid

  67. Flexbox

  68. None
  69. None
  70. None
  71. None
  72. None
  73. CSS Grid Layout

  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. Alignment

  81. css-tricks.com/snippets/css/a-guide-to-flexbox

  82. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align

  83. flexboxdefense.com flexboxfroggy.com

  84. None
  85. None
  86. Many Ways to Use 
 CSS Grid

  87. 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;
  88. None
  89. None
  90. None
  91. None
  92. None
  93. Place each item into a specific cell/area Let the browser

    place everything using autoplacement algorithm
  94. None
  95. None
  96. body { background: #F0F0F0; } main { display: grid; grid-template-columns:

    repeat(auto-fit, minmax(280px, 1fr)); } figure { margin: 0; } img { display: block; width: 100%; box-shadow: -1px 0px 0px rgba(0,0,0,0.06); }
  97. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  98. 11 8 9 10 7 6 5 1 2 3

    4 auto placement algorithm
  99. 13 11 8 9 10 7 6 5 1 2

    3 4 12 grid-auto-flow: dense;
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. When? / Where?

  115. None
  116. Behind a flag Just Works On Its Way Chrome Chrome

    Canary Opera Opera Developer Firefox Firefox 
 Dev Edition Safari Technical Preview Firefox 
 Nightly Edge Safari
  117. nightly.mozilla.org

  118. addons.mozilla.org/addon/css-grid-inspector

  119. None
  120. How Now?

  121. None
  122. Works Doesn’t work

  123. Use It Don’t Use It

  124. Works Doesn’t work Use It Don’t Use It

  125. Works Doesn’t work Use It Don’t Use It

  126. Works Doesn’t work Use It Don’t Use It

  127. Works Doesn’t work Use It Don’t Use It Fired.

  128. Works Doesn’t work Use It Don’t Use It Fired.

  129. Works Doesn’t work Use It Don’t Use It Fired. ✔

  130. Works Doesn’t work Use It Don’t Use It

  131. Works and Doesn’t Work Use It and Don’t Use It

    Don’t Use It
  132. X Works and Doesn’t Work Use It and Don’t Use

    It Don’t Use It
  133. Progressive Enhancement & The Nature of CSS

  134. 60% 40%

  135. 95% 5%

  136. 88% 12%

  137. 100% 0%

  138. jensimmons.com/ presentation/ progressing-our- layouts

  139. jensimmons.com/ presentation/ modern-layouts- getting-out-our- ruts

  140. jensimmons.com/ presentation/ revolutionize-your- page-real-art- direction-web

  141. LABS.JENSIMMONS.COM

  142. None
  143. www.layout.land

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