Everything You Know About Web Design Just Changed Jen Simmons An Event Apart Chicago August 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

1996

Creating Killer Websites David Siegel, 1996

“ Like the painters of Russia’s avant grade in the ‘20s, we felt like pirates. I received flaming threats from people who said I didn’t understand the Web, I was ruining the information… because I didn’t understand the power of the medium. I fired back with more pages. I made it clear we were not going to go away. If the Puritans wanted a fight, we would give it to them.” – David Siegal, 1996

Creating Killer Websites David Siegel, 1996

Creating Killer Websites David Siegel, 1996

Creating Killer Websites David Siegel, 1996

We n"d a#! Flash

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

2000

Flash Web Design Hillman Curtis, 2000

1984

CSS It ’s !e web!

2003

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 = styling look & layout

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!

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

LESSON LEARNE Fluid Columns

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

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

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

2010 Ethan Marcotte AEA 2010

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

One Web. No desktop v mobile web. There is no mobile context. Unknown / infinite sizes of screens. Design / develop Mobile first. Truncation is not a content strateg One content system to serve all. One design system to serve all. Responsive images. Performance.

One Web. No desktop v mobile web. There is no mobile context. Unknown / infinite sizes of screens. Design / develop Mobile first. Truncation is not a content strateg One content system to serve all. One design system to serve all. Responsive images. Performance. YES.

Let’s do talk about layout.

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

  1. New Possibilities for Flexibility

Images

Fixed Images

Fluid Images

Fluid, vertically

Set the width & height

Object Fit

object-fit: cover;

YOUTUBE.COM/ LAYOUTLAND

Fixed-size Fluid horizontally Fluid vertically Set width & height + Object Fit

Columns

Responsive Web Design everything shrinks and grows at the same rate

%

fixed % FR units minmax() auto

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

1fr = minmax(min-content, 1fr) can instead use minmax(0,1fr)

fixed % FR units minmax() auto

Rows

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

YOUTUBE.COM/ LAYOUTLAND

  1. New Possibilities for Flexibility

Programming Flexibility Model

PAINTING

DIGITAL REPRESENTATIO N PRINTED ITEM

YO UR SUGGESTIO NS IN CSS BRO WSER, USER, CO NDITIO NS WEB PAGE

LAYO UT ALGO RITHM YO UR SUGGESTIO NS IN CSS BRO WSER, USER, CO NDITIO NS WEB PAGE

Programming Flexibility Model

  1. Change in how we use the Viewport

Fluid abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefg hijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcd efghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyza bcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefg hijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcd efghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyza bcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

Fixed-width abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

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

Intrinsic

vertical centering vertical viewport units rows

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

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

YOUTUBE.COM/ LAYOUTLAND

  1. Change in how we use the Viewport

  1. Programming to all four edges of the Viewport

Intrinsic Web Design

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

THE BIG WEB SHOW #176 ZELDMAN.COM

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

LABS.JENSIMMONS.COM

LABS.JENSIMMONS.COM

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