Everything You Know About Web Design Just Changed

Everything You Know About Web Design Just Changed Jen Simmons An Event Apart Seattle April 2018

– Jen Simmons ”Everything about web design   just changed.” W T F ?

We need more art.   Real graphic design.

That’s not how the web works.

Creating Killer Websites David Siegel, 1996

Changing Approaches
to Web Page Layout

Simple HTML It’s the web!

Flow

Tables for Layout We n " d a

!

1996

Creating Killer Websites   David Siegel, 1996

Flash We n " d a

!

1984

2000

CSS It ’ s ! e web!

2003

Designing with Web Standards   Jeffrey Zeldman, 2003 HTML
Table Layout   code HTML
web standards
for CSS

Semantic Markup

Designing with Web Standards   Jeffrey Zeldman, 2003

Fluid Layouts It ’ s ! e web!

Fluid Columns

We n " d a

! It ’ s ! e web!

Fixed-Width Layouts We n " d a

!

Fixed-sized Content

Responsive Web Design It ’ s ! e web!

2010 Ethan Marcotte AEA 2010

Fluid Images & Media Media Queries

2010 Ethan Marcotte AEA 2010

Responsive Web Design   has been about so much more than layout.

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 PERFORMANCE BUDGET SPEED

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 PERFORMANCE BUDGET SPEED YES.

But let’s do   talk about

layout.

1995 2000 2005 2010 2015 2020 Flow-only HTML Tables Flash Fluid Fixed Responsive Intrinsic Abspos

Intrinsic Web Design

Flexible Images Flexible images

or Fixed images,   your choice

Flexible (Faux) Column Grid Real Grid Rows & Columns   Fixed, fluid, content-sized

Media Queries Media Queries, as needed

Create set of layouts for different screens. Design a   flexibility model   for your system of content .

Intrinsic Web Design

Mix Fluid with Fixed

Images

Fixed Images,   like pre-RWD

Fluid Images,   like RWD

Fluid, vertically

Set width & height

Tracks

Better way to squish fluid grids

main { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 0 2rem; }

img { width: 300px; }

Mix fixed and fluid

Four Stages of Squish

Fixed Fluid & Adaptive & Responsive

fixed FR units minmax() auto

min-content sizing

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

fixed FR units minmax() auto

Four Stages of Squish

Truly 2-D Layout

Rows and columns

200px minmax() 2fr 1fr auto auto 1fr 2fr 100px

White space

200px minmax() 2fr 1fr auto auto 1fr 2fr 100px

youtube.com/layoutland

Can set heights
and widths

Setting heights…

Truly 2-D Layout

Nested Contexts

Flow
Flexbox formatting context

Grid formatting context

Multicolumn formatting context

Flow
block formatting context

Flexbox formatting context

Grid formatting context

Multicolumn formatting context

nightly.mozilla.org

Nested Contexts

Ways to Contract   and Expand

Shrink / Grow (aka, Squish)

Wrap, reflow

Add / remove whitespace

Slide one thing
behind another. Overlap.

minmax(0, 40ch ) 1fr 1fr auto 1fr 2fr 1fr auto 20%

Ways to Contract   and Expand

Media Queries,   as needed

Intrinsic Web Design

Fluid & fixed 2. Stages of Squishiness

Rows & Columns 4. Nested Contexts 5. Ways Expand & Contract 6. Media Queries, as needed

We n " d a

! It ’ s ! e web!

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

labs.jensimmons.com

youtube.com / layoutland

jensimmons.com

@jensimmons layout.land

labs.jensimmons.com Thanks!