Everything You Know About Web Design Just Changed

A presentation at View Source 2018 in October 2018 in London, UK by Jen Simmons

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 Attempts to Solve Web Page Layout

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

Creating Killer Websites David Siegel, 1996

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

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 Separation of Concerns HTML = content + interface CSS = visual look & layout

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

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

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

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

LESSON LEARNE Fluid Images & Media Media Queries

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

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

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

Contracting & Expanding Flexibility Viewport

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

Responsive Web Design everything shrinks and grows at the same rate

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

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

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

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

vertical centering vertical viewport units grid rows

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

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

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

Jen Simmons
@jensimmons

1 / 142

2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.

I can't believe this is the first time I'm watching @jensimmons speaking live 😍#ViewSource pic.twitter.com/w1M0cAqeo2
— HJ Chen (@hj_chen) October 26, 2018
The web was wild back in the 90s#ViewSource pic.twitter.com/Nf44nEJVar
— HJ Chen (@hj_chen) October 26, 2018
Before CSS layout, there were HTML tables, which we used for layout in really inventive ways. But there were a lot of problems.@jensimmons at #ViewSource pic.twitter.com/gTTw95l3dQ
— View Source Conf (@viewsourceconf) October 26, 2018
@jensimmons is making us all laugh at how many of us _used_ to do web design. Tables are fine, right? Flash? That was great. 😅 pic.twitter.com/EUQZR5Ggna
— Daniel 'Manual Json' Mason 🇪🇺🇬🇧 (@Gisleburt) October 26, 2018
"It’s almost like we’re fish swimming in water and now that we are growing legs and get on land, and we need to talk about CSS Grid and define what land is, but we also need to define what water is." - @jensimmons at #ViewSource talking about how we conceive of layout on the web
— View Source Conf (@viewsourceconf) October 26, 2018
Some key principles that will remain relevant on the web indefinitely, semantic markup and separation of concerns#ViewSource pic.twitter.com/BbMtSINmrc
— HJ Chen (@hj_chen) October 26, 2018
"I think we should remember when it’s a good idea to use fixed-size content. Sometimes it works out really well to have an image that’s just a fixed size." - @jensimmons talking about how we need to keep in mind the intended context of our layouts#ViewSource
— View Source Conf (@viewsourceconf) October 26, 2018
We've been stuck in this column rut for years now#ViewSource pic.twitter.com/DyWnOslp3v
— HJ Chen (@hj_chen) October 26, 2018
The war of the people who want to create art vs. the people who want to “respect” the medium, by @jensimmons at #ViewSource. The medium’s winning right now, but let’s see what comes next. 😜 pic.twitter.com/wN9UypsFl4
— right-click → View Source → 😱 (@SamirTalwar) October 26, 2018
“Flex & grid: the native layout framework of the web” - @jensimmons #viewsource
— Benjamin Read (@muzzlehatch_) October 26, 2018
All the components of css work TOGETHER to create awesome#ViewSource pic.twitter.com/1bf50nMJwC
— HJ Chen (@hj_chen) October 26, 2018
I'm rather glad to have missed out on some of the earlier eras of Web design. @jensimmons is reviewing the past, and plotting out the future: "Intrinsic Web Design" #ViewSource pic.twitter.com/FkxE4iquLc
— M💀 R🎃se (@mrjesslynnrose) October 26, 2018
.@jensimmons baptizes this new era of web layout as Intrinsic Web Design (flow, flexbox, grid and column) #ViewSource pic.twitter.com/TuLePCOP56
— What's on your mind, Claudio? (@claudiopro) October 26, 2018
The new era of web design calls for a different mindset#ViewSource pic.twitter.com/airL2Gr2aK
— HJ Chen (@hj_chen) October 26, 2018
Intrinsic Web Design: Design that takes into account all the capabilities of the tools that we have, not just the inflexible grids we've been using. It's based on a native conceptual philosophy of the design and layout tools of modern CSS.@jensimmons at #ViewSource pic.twitter.com/1NkNJOZPZR
— View Source Conf (@viewsourceconf) October 26, 2018
Woah. @jensimmons is calling it at @viewsourceconf: we're post response web design and we have entered the era of intrinsic web design. 🤯 pic.twitter.com/9kM8Ixl9yv
— Damned-iel Appelquist 🧟‍♂️ (@torgo) October 26, 2018
“That’s what good #webdesign is built on: beautiful white space.” @jensimmons #ViewSource #CSS #CSSGrid
— Michael R. Lorek (@m_lorek) October 26, 2018
We have an array of sizing options around free space and content#ViewSource pic.twitter.com/Y6pstGVuy3
— HJ Chen (@hj_chen) October 26, 2018
#ViewSource continuing to blow my mind with amazing CSS demos by @Mandy_Kerr @hj_chen and @jensimmons 😬 pic.twitter.com/CAv0oM7rSP
— Sophie Koonin 🎃 (@type__error) October 26, 2018
Contain your text however you want with CSS properties like max-width: https://t.co/ObPU4GQzzP @jensimmons at #ViewSource
— View Source Conf (@viewsourceconf) October 26, 2018
“Using Flexbox, CSS Grid, Flow or Multicolumn? It’s a combination”, @jensimmons explains. #ViewSource #webdesign #CSSGrid pic.twitter.com/ZDL5ONT2Dr
— Michael R. Lorek (@m_lorek) October 26, 2018
The rate of change of size is different depending on what units and values u apply#ViewSource pic.twitter.com/8eNGTXMdHu
— HJ Chen (@hj_chen) October 26, 2018
Want to experiment with minmax? The @MozDevNet docs for it are here: https://t.co/U9zT7HiByK @jensimmons at #ViewSource pic.twitter.com/oqtFVHvNm5
— View Source Conf (@viewsourceconf) October 26, 2018
“Everything You Know About Web Design Just Changed” as @jensimmons closing today’s keynote at @viewsourceconf💯. The next era is *Intrinsic Web Design*☝️. Check out the new CSS features and be creative. Love •writing-mode•✍️ pic.twitter.com/aa6ZgbncRI
— lei he (@leihe101) October 26, 2018
Do subscribe to #layoutland, a lot of good stuff there#ViewSource pic.twitter.com/ODP27R66G5
— HJ Chen (@hj_chen) October 26, 2018
The next step in web design? @jensimmons says it’s Intrinsic. #ViewSource pic.twitter.com/J5QdXnIAOK
— right-click → View Source → 😱 (@SamirTalwar) October 26, 2018
Regardless of the lock-down, the frontend developer _is_ going to finish the design - @jensimmons #viewsource
— Benjamin Read (@muzzlehatch_) October 26, 2018
The Variable Font Editor is now in Firefox!@jensimmons at #ViewSource pic.twitter.com/EvO0KbO6uu
— View Source Conf (@viewsourceconf) October 26, 2018
The Firefox dev tools features that @jensimmons is talking about might actually make me switch back to FF 😯 #ViewSource pic.twitter.com/HG07UZuQhr
— Sophie Koonin 🎃 (@type__error) October 26, 2018

Everything You Know About Web Design Just Changed

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Resources

Layout Land on YouTube

Layout.Land

jensimmons.com

@jensimmons

Firefox Nightly

Example 1, HTML Flow only

Example 2, Fluid Web Design

Example 2.5, Fluid Web Design

Example 3, Fixed Web Design

Example 4, Responsive Web Design

Example 5, Intrinsic Web Design

Example of Image Options

Stages of Squish

Nesting Contexts

Teaser card

Multiple Teaser Card nested in a Grid layout

Buzz and feedback