Everything You Know About Web Design Just Changed

Everything You Know About Web Design Just Changed Jen Simmons View Source London October 2018

noti.st/jensimmons @jensimmons

Everything You Know About Web Design Just Changed & t u o y a L n g i s e D c i h p Gra Jen Simmons View Source London October 2018

2020 NOW 2015 2010 2005 2000 1995 THE WAY LAYOUT WORKS ON THE WEB

BEFORE RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

2020 NOW 2015 2010 2005 2000 1995

We need more art. Real graphic design.

That’s not how the web works.

2020 NOW 2015 2010 2005 2000 1995 Attempts to Solve Web Page Layout

Simple HTML It ’s !e web!

2020 NOW 2015 2010 2005 2000 1995 HTML

LESSON LEARNE Flow

We n"d a#! Tables for Layout

2020 NOW 2015 2010 2005 2000 1995 FLOW-ONLY HTML TABLES

Creating Killer Websites David Siegel, 1996

We n"d a#! Flash

2020 NOW 2015 2010 2005 2000 1995 FLOW-ONLY HTML TABLES FLASH

Flash Web Design Hillman Curtis, 2000

1984

The Web It ’s !e web!

CSS It ’s !e web!

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

Designing with Web Standards Jeffrey Zeldman, 2003

LESSON LEARNE Semantic Markup

LESSON LEARNE Separation of Concerns HTML = content + interface CSS = visual look & layout

Layout in CSS? It ’s !e web!

Absolute Positioning It ’s !e web!

1984

2020 NOW 2015 2010 2005 2000 1995 ABSPOS FLOW-ONLY HTML TABLES FLASH

Fluid Layouts using Floats It ’s !e web!

LESSON LEARNE Fluid Columns

2020 NOW 2015 2010 2005 2000 1995 ABSPOS FLOW-ONLY HTML TABLES FLASH FLUID

It ’s !e web! We n"d a#!

We n"d a#! Fixed-Width Layouts using Floats

2006-10

LESSON LEARNE Fixed-sized Content

FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID 2020 NOW 2015 2010 2005 2000 1995 FIXED

Responsive Web Design It ’s !e web!

2010 Ethan Marcotte AEA 2010

FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID FIXED ADAPTIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

LESSON LEARNE Fluid Images & Media Media Queries

drawing by Dave Ellis novolume.co.uk

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path Masking Shape-outside Initial-letter Flow Overflow Floats Block Inline Inline-block Display: table Margin Negative margins Padding Positioning & everything else in CSS

Flow (with writing modes) CSS Grid Flexbox Multicolumn

Flexbox CSS Grid Flow Multicolumn

CSS Grid

Responsive Web Design *now more better.

FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID FIXED 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

It ’s !e web! We n"d a#!

Intrinsic Web Design

“ intrinsic : belonging to the essential nature or constitution of a thing .” — Merriam-Webster

The new reality of Intrinsic Web Design

Contracting & Expanding Flexibility Viewport

Ways to Contract and Expand Space

Wrap & Reflow

Enlarge / Shrink

Add / Remove Whitespace

Slide / Overlap

Ways to Contract and Expand Space

Wrap & Reflow Enlarge / Shrink Add / Remove Whitespace Slide / Overlap

YOUTUBE.COM/ LAYOUTLAND

New Possibilities for Flexibility

Columns

Responsive Web Design everything shrinks and grows at the same rate

%

fixed min-content, max-content % FR units minmax() auto

FR units

min-content sizing

This is a sentence with words. wrapped content, shaped by container This is a sentence with words. max-content This is a sentence with words. min-content

This is a sentence with words. Set width in percent — 25% creates overflow

CSS is awesome

CSS is awesome 1fr track

fixed min-content, max-content % FR units minmax() auto

Rows

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

YOUTUBE.COM/ LAYOUTLAND

New Possibilities for Flexibility

Change in how we use the Viewport

Fluid Fixed Responsive ! d l o f o n !er e is

Intrinsic

vertical centering vertical viewport units grid rows

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

minmax(100px, 350px) auto auto 1fr 100vh 3fr

YOUTUBE.COM/ LAYOUTLAND

Change in how we use the Viewport

Intrinsic Web Design

It ’s !e web! We n"d a#!

THE BIG WEB SHOW #176 ZELDMAN.COM

SHOP TALK SHOW #328

YOUTUBE.COM/ LAYOUTLAND SUBSCRIBE BY EMAIL AT LAYOUT.LAND

LABS.JENSIMMONS.COM

Thanks! JENSIMMONS.COM @JENSIMMONS LAYOUT.LAND LABS.JENSIMMONS.COM