Everything About Web Design Just Changed

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
April 02, 2018

Everything About Web Design Just Changed

Presented at An Event Apart, Seattle, April 2, 2018.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

April 02, 2018
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 11.
  5. 12.
  6. 13.
  7. 14.
  8. 15.
  9. 17.
  10. 25.
  11. 26.
  12. 27.
  13. 28.
  14. 29.
  15. 31.
  16. 36.
  17. 37.
  18. 41.
  19. 45.
  20. 49.

    IMAGES BIG MOBILE STRATEGY M DOT WEBSITE? ONE WEB WHAT’S

    M? RESPONSIVE IMAGES M CONTEXT? NO SUCH THING THINK SINGLE COLUMN / M FIRST DESKTOP & MOBILE ORG BUT CONTENT WON’T FIT TRUNC REORG MANY SYSTEMS HEADLESS CMS SCREEN SIZE? UNKNOWN
  21. 50.

    IMAGES BIG MOBILE STRATEGY M DOT WEBSITE? ONE WEB WHAT’S

    M? RESPONSIVE IMAGES M CONTEXT? NO SUCH THING THINK SINGLE COLUMN / M FIRST DESKTOP & MOBILE ORG BUT CONTENT WON’T FIT TRUNC REORG MANY SYSTEMS HEADLESS CMS SCREEN SIZE? UNKNOWN YES.
  22. 57.

    Create set of layouts for different screens. Design a 


    flexibility model 
 for your system of content.
  23. 60.
  24. 62.
  25. 64.
  26. 66.
  27. 68.
  28. 69.
  29. 71.
  30. 74.
  31. 76.
  32. 80.

    This is a sentence with words. This is a sentence

    with words. This is a sentence with words. max-content wrapped content, shaped by container min-content
  33. 81.
  34. 82.
  35. 83.
  36. 84.
  37. 85.
  38. 100.
  39. 108.
  40. 112.
  41. 114.

    1. Fluid & fixed 2. Stages of Squishiness 3. Rows

    & Columns 4. Nested Contexts 5. Ways Expand & Contract 6. Media Queries, as needed
  42. 116.
  43. 117.

    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