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

Revolutionize Your Page: Real Art Direction on the Web

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
October 31, 2016

Revolutionize Your Page: Real Art Direction on the Web

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

October 31, 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. None
  34. None
  35. None
  36. Layout shouldn’t be a multiple choice question.

  37. Separate tooling needs from the design process.

  38. None
  39. Don’t make a framework out of CSS Grid. CSS Grid

    is a framework — built right into the browser.
  40. Layout Design

  41. None
  42. None
  43. None
  44. None
  45. None
  46. Amazing Future

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

  48. labs.jensimmons.com

  49. Big Pieces & Little Pieces

  50. Initial Letter

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

    initial-letter: 4; }
  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; }
  55. @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; } }
  56. Feature Queries

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

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

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

  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. None
  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. None
  77. None
  78. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3%

    93%); }
  79. CSS Shapes

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

  81. 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%); }
  82. None
  83. None
  84. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both

    Dimensions Sizing Based on Edges
  85. Big Pieces

  86. Flexbox Multicolumn CSS Grid

  87. None
  88. None
  89. None
  90. Flexbox

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

  100. None
  101. CSS Grid Layout

  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. css-tricks.com/snippets/css/a-guide-to-flexbox

  110. Alignment

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

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

  113. flexboxdefense.com flexboxfroggy.com

  114. None
  115. None
  116. Many Ways to Use 
 CSS Grid

  117. 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;
  118. None
  119. None
  120. None
  121. None
  122. None
  123. Place each item into a specific cell/area Let the browser

    place everything using autoplacement algorithm
  124. None
  125. None
  126. 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); }
  127. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

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

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

    3 4 12 grid-auto-flow: dense;
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  144. When? / Where?

  145. None
  146. 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
  147. IE old spec in IE10+ -ms-* prefix

  148. nightly.mozilla.org

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

  150. None
  151. Process

  152. Choose one of the following: B. C. A. D. E.

  153. 1. Organize Content.

  154. 2. Create HTML file, 
 set source order.

  155. 3. Sketch Ideas for Page Layout.

  156. 4. Design a 
 custom grid.

  157. None
  158. None
  159. None
  160. None
  161. 5. Apply CSS. Write your own layout.

  162. 1. Organize content. 2. Create HTML file, 
 set source

    order. 3. Sketch ideas for 
 page layout. 4. Design a custom grid. 5. Apply CSS. Write 
 your own layout code.
  163. How Now?

  164. None
  165. Works Doesn’t work

  166. Use It Don’t Use It

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

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

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

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

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

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

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

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

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

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

  177. 65% 35%

  178. 95% 5%

  179. 88% 12%

  180. 100% 0%

  181. 30-45% without 55-70% with CSS Grid Spring 2017

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

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

  184. LABS.JENSIMMONS.COM

  185. None
  186. www.layout.land

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