How New CSS Is Changing Everything About Graphic Design on the Web

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
November 09, 2017

How New CSS Is Changing Everything About Graphic Design on the Web

Presented at the first W3C Publishing Summit, in San Francisco
https://www.w3.org/publishing/events/summit2017

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 09, 2017
Tweet

Transcript

  1. How New CSS Is Changing Everything About Graphic Design on

    the Web W3C Publishing Summit @jenSimmons
  2. @jensimmons

  3. Layout & The Web

  4. Stephen Waller at Enhance Conf expressing how BORED he is

    with web design today.
  5. None
  6. drawing by Dave Ellis novolume.co.uk

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. The web wasn’t always like this

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. What Happened?

  35. None
  36. None
  37. None
  38. None
  39. None
  40. CSS Floats

  41. None
  42. The Official Timeline of Web Page Layout The No-Layout Layout

    Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
  43. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms

    Object Fit Clip-path Masking Shape-outside Initial-letter Flow Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else in CSS
  44. This new CSS changes everything in web layout.

  45. None
  46. None
  47. None
  48. Hot metal composition: Pasteup :: Floats : CSS Grid

  49. labs.jensimmons.com

  50. 1.

  51. None
  52. None
  53. 2.

  54. None
  55. None
  56. None
  57. None
  58. None
  59. photo by Brad Frost, 2012, CC BY 2.0

  60. None
  61. 3.

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. 4.

  70. None
  71. None
  72. None
  73. None
  74. None
  75. 5.

  76. labs.jensimmons.com/2017/01-008.html

  77. labs.jensimmons.com/2017/01-008.html

  78. labs.jensimmons.com/2017/01-008.html

  79. Tools

  80. CSS Shapes

  81. None
  82. img { float: left; shape-outside: circle(); }

  83. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; }
  84. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  85. img { max-width: 600px; float: left; margin-left: -26%; shape-outside:polygon( nonzero,

    -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25% ); }
  86. None
  87. Initial Letter

  88. None
  89. None
  90. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; initial-letter: 4;

    }
  91. Viewport Units

  92. labs.jensimmons.com/2017/01-008.html

  93. None
  94. Viewport Units 50vmin 100vh

  95. Viewport Units 50vh 25vh 50vw 25vh 50vw !at dang “fold”

  96. Fixed Size

  97. Responsive Web Design

  98. The New CSS Layout

  99. Object Fit

  100. None
  101. None
  102. None
  103. None
  104. img { width: 50%; height: 400px; object-fit: cover; }

  105. None
  106. None
  107. Writing Mode

  108. None
  109. inline direction When I’m writing or reading this is the

    way the characters flow
  110. <p> <p> <p> <p> block flow direction

  111. Acharacter orientation

  112. block direction inline direction Acharacter orientation

  113. SYSTEMS LIKE LATIN block direction inline direction Acharacter orientation

  114. None
  115. HAN-BASED SYSTEMS block direction inline direction *Chinese, Japanese, Korean &

    more
  116. None
  117. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more
  118. THREE OPTIONS FOR WRITING-MODE writing-mode: vertical-lr; writing-mode: vertical-rl; toggle w/

    `dir` attribute in HTML + unicode writing-mode: horizontal-tb;
  119. TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE block direction inline direction

    writing-mode: sideways-lr; block direction inline direction writing-mode: sideways-rl; creates a horizontal typographic mode only A A
  120. chenhuijing.com/zh-type

  121. None
  122. h1:nth-child(2) { writing-mode: vertical-rl; }

  123. CSS Grid

  124. Grid

  125. .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows:

    1fr 1fr 1fr 1fr; } .item { grid-row: 1 / 3; grid-column: 2 / 4; } 1 2 3 4 1 2 3 4 5 grid-row: 1 / 3; grid-column: 2 / 4; 5
  126. Rows *and* Columns

  127. None
  128. ROWS!!!!!!!!!!!

  129. None
  130. White Space

  131. “ THE VIGNELLI CANON Great designs can be achieved without

    the use of the grid, but the grid is a very useful tool to guarantee results. Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.
  132. None
  133. The Vignelli Canon

  134. None
  135. None
  136. Overlap

  137. None
  138. None
  139. Tracks don’t have to all be the same size.

  140. None
  141. None
  142. None
  143. None
  144. from alistapart.com/article/content-out-layout

  145. The New Flexibility

  146. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px

    1fr minmax(40ch, 65ch)
  147. None
  148. “pixel perfect ”

  149. What happens when parts of the content / interface are

    ‘missing’? Or are shorter / longer than ‘ideal’?
  150. Design the flexibility model.

  151. For more…

  152. None
  153. nightly.mozilla.org

  154. labs.jensimmons.com

  155. jensimmons.com

  156. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

    Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
  157. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!