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

Everything About Web Design Just Changed

Jen Simmons
April 02, 2018

Everything About Web Design Just Changed

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

Jen Simmons

April 02, 2018
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. 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
  2. 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.
  3. Create set of layouts for different screens. Design a 


    flexibility model 
 for your system of content.
  4. 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
  5. 1. Fluid & fixed 2. Stages of Squishiness 3. Rows

    & Columns 4. Nested Contexts 5. Ways Expand & Contract 6. Media Queries, as needed
  6. 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