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

Revolutionize Your Page — View Source Conf

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
September 14, 2016

Revolutionize Your Page — View Source Conf

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 new CSS properties can be combined together to revolutionize how you approach the page — any page.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

September 14, 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. Amazing Future

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

  25. labs.jensimmons.com

  26. Initial Letter

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

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

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

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

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

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

  36. Viewport Units

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

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

  40. Object Fit

  41. None
  42. None
  43. None
  44. None
  45. img { width: 50%; height: 400px; object-fit: cover; }

  46. Multicolumn Flexbox CSS Grid

  47. CSS Grid Layout

  48. None
  49. None
  50. None
  51. None
  52. css-tricks.com/snippets/css/a-guide-to-flexbox

  53. Alignment

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

  55. None
  56. None
  57. Many Ways to Use 
 CSS Grid

  58. None
  59. None
  60. None
  61. None
  62. None
  63. Place each item into a specific cell/area Let the browser

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

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

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

    3 4 12 grid-auto-flow: dense;
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. When? / Where?

  84. None
  85. 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
  86. nightly.mozilla.org

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

  88. None
  89. How Now?

  90. None
  91. Works Doesn’t work

  92. Use It Don’t Use It

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

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

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

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

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

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

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

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

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

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

  103. 95% 5%

  104. 88% 12%

  105. 100% 0%

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

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

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

  109. LABS.JENSIMMONS.COM

  110. None
  111. www.layout.land

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