Everything You Know About Web Design Just Changed

A presentation at An Event Apart Washington DC in July 2018 in Washington, DC, USA by Jen Simmons

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

RESPONSIVE BEFORE RESPONSIVE 1995 2000 2005 2010 2015 2020 NOW

We need more art.   R eal graphic design.

1995 2000 2005 2010 2015 2020 A/ empts to Solve   Web P age Layout NOW

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

Creating K iller Websites David Siegel, 1996

– David Siegal, 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.” “

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

F lash Web D esign H illman Curtis, 2 000

D esigning with Web Standards   Jeffrey Zeldman, 2 00 3 HTML
Table Layout   code HTML
web standards
for CSS

D esigning with Web Standards   Jeffrey Zeldman, 2 00 3

Separation of Concerns H TML = content + interface CSS = styling look & layout LESSON LEARNED

Abso l ut e Positionin g It ’ s ! e web!

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

Fl uid La youts
usin g Fl o a ts It ’ s ! e web!

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

F ixed-Width Layouts   using F loats We n " d a
!

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

Re sponsi ve We b De si g n It ’ s ! e web!

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

F luid Images & Media Media Q ueries LESSON LEARNED

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

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

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

F low (with writing modes)
CSS G rid F lexbox Multicolumn

Responsive Web Design   *now more better.

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

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

T he new reality of   Intrinsic Web D esign

Contracting & E xpanding 2. F lexibility 3. Viewport

Wrap & R eflow E nlarge / Shrink A dd / R emove Whitespace Slide / O verlap

F ixed-size F luid horizontally F luid vertically
Set width & height + O bject F it

Responsive Web Design everything shrinks and   grows at the same rate

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

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

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

minmax( 0 , 4 0 ch) 1fr 1fr auto 1fr 2fr auto 2 0 %

PRINT E D IT E M DI G IT A L R E PR E S E NT A TI O N

W E B P AGE BR O WS E R, US E R, C O NDITI O NS YO UR SU GGE STI O NS IN CSS

W E B P AGE BR O WS E R, US E R, C O NDITI O NS YO UR SU GGE STI O NS IN CSS L AY O UT A L GO RIT H M

F luid 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 abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

F ixed-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

F ixed R esponsive F luid !e r e i s
n o fo l d!

vertical centering vertical viewport units rows

auto 1fr minmax(1 00 px, 35 0 px) auto 3fr

P rogramming to   all four edges of   the Viewport

T HE BI G W E B S HO W #176 Z E LDM A N.C O M

YO UTUB E .C O M/ L AY O UTL A ND SUBSCRIB E BY EMAIL AT LAY O UT.LAND

J E NSIMM O NS.C O M @J E NSIMM O NS L AY O UT.L A ND L A BS.J E NSIMM O NS.C O M Th an k s !

Jen Simmons
@jensimmons

1 / 163

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.

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.

And now @jensimmons closes out the first day of #aeadc with a killer talk about intrinsic web design.
— I used to be a Ploaf apprentice… (@ploafmaster) July 30, 2018
New cool art + web thing via @jensimmons = #IntrinsicWebDesign!! Allows for: 1 contracting & expanding. 2 flexibility. 3 viewport. #aeadc pic.twitter.com/lj8azfRvuJ
— Kathleen Kenney (@kenneykv) July 30, 2018
Not empty, I just sold our design and product team on using grid, and all the new ways we can control layout. They took it literally and drew a bunch of actual squares.
— Colin Madison (@cadenzoid) July 30, 2018
I loved her talk. Sooooo much goodness!!
— Shaun Rashid (@shaunrashid) July 30, 2018
Mind blown after @jensimmons talk! Thanks for taking the time to chat with me. :) #aeadc pic.twitter.com/SzTSuqJBWt
— Stephanie (@greensteph) July 30, 2018
I hope this is recorded to view later. Especially since I am not there 😑
— Angel Velazquez (@AEVolucion) July 30, 2018
We want a video, Jeffrey! 😉
— Matthias Ott (@m_ott) July 30, 2018
We want things to be accessible and reusable and findable and in style systems and components, and we want art. Now we don’t have to compromise. The fight is over and now we get to play. https://t.co/i7jNkL4ql7 <— podcasthttps://t.co/5Gmap1jyXd has tons of labs#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
There are more videos on all fo these things back on https://t.co/qm2InDPpX9 - lots of demos. Recovering from the trauma of worrying about the fold! There will always be times things get cut off awkwardly but they’ll be fewer. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
People use vertical media queries to chunk from one layout to another to another. But we didn’t really do responsive in the vertical direction. Now with flexbox we can do complicated layouts with all 4 edges of the page. There are no columns, just using the grid for rows#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
We don’t always want to pay attention to the bottom, especially when the content is smaller. Vertical centering with flexbox and grid. Vertical viewport units on a containing block. Rows can be defined!#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
In fixed width only the top and left get paid attention to. If the right edge is off the screen well, scroll.

With responsive we started paying attention to both the left and the right edge. “there is no fold!”

Now we can react to the 4th edge. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
We’re programming a flexibility model.

3. The viewport!
In fluid design, content was upper left corner (no writing modes so that was the only option). Flow the content, scroll down. Top, left, right factor into the layout. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
“I need my red to be the same as the Pantone swatch!” Doesn’t work that way on the web.

Layout, we can still say “I want this to be 20% and on the left.” But soon we’ll be saying “Measure yourself and make the other thing twice as big as you are.” #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
What you tell CSS is really just a suggestion. It’ll do its best but the user and the browser and the network and assistive technology and CDNs could all change what we’re suggesting. We need them all to deliver a usable experience. Variations happen!#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
What you see on a computer screen is not what you’re going to get on the other end, in print, all the time. It takes a while to learn what the tricks are to get what you think you’re going to get. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
2. New possibilities for flexibility!
This is why many of us are having a reaction against bootstrap and foundation because we don’t want to just have to use a formula. No idea what designs we’re going to be doing in 3 years. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Experimenting and playing with prototypes and what people can do is the best way to learn some of these things.

Everything we just said about columns also work in rows. That’s weird because we’re not used to defining rows at all. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
A track sized with auto will take all the space it can get. Minmax and auto will hit their minimums at the exact same time if in the same grid. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If everything else is 1fr and 1 column is minmax, that column won’t shrink until all the others do. We can choose different stages of flexibility by choosing the method for the layout. And you can still use fixed pixels for a column if you have to. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Once the contents hit their smallest size, you get overflow for the group.

If you have 4 cols of 1fr, 2fr, 3fr, 4fr, they’ll all eventually go down to the min column size, but not at the same rate. The rate of change is curved. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
if we put a 1FR unit on a containing block, they’ll never get smaller than min-content size. Which is better than percentages, which will go down to zero.

1fr=minmax(min-content, 1fr)
Can instead use minmax (0, 1fr) if you want it to go to zero.#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If we say “this size” we get the content to fit the container
If we say “max content” the container fits the longest form of the content
If we say “min content” the container will wrap to the shortest version
We have lots of tools to do something about overflow now #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
With Grid we can define columns and rows:
Fixed
%
FR units
Minmax()
Auto

Bottom ones are dynamic sizing #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Responsive web design means everything shrinks or grows at the same rate as everything else. This is part of the nature of using percents. To the browser, percents are a fixed amount. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
New possibilities for flexibility!

Images were just fixed.
Then we made them resize based on the size of the container. But their dimensions were set.
Now if we use object-fit: cover I can mess around with the height and the width, the photo gets cropped #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Can make the amount of overlap change, or make the amount of overlap stay the same.

Wrap and reflow
Enlarge/shrink
Add/remove whitespace
Overlap #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
We can slide and overlap things in Grid. We couldn’t do this with table-based layouts so we had to slice things up into puzzle pieces back in the day. If nothing else, the overlap inside a grid fundamentally changes the problems in tables. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Two new ways to contract and expand space:
- Add/remove whitespace. Program whitespace in an intentional way. Whitespace is more than margins and padding. Flexblox gave us vertical centering. Grid allows empty rows. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
1. Ways to contract and expand space. Make it easy to expand and contract space.
- Wrap and reflow: if the space is narrow, reflow down.
- Enlarge/shrink: if the space is too small, make the image/text smaller
- Combining wrap and reflow with enlarge/shrink #aeadc
— Anne Gibson (@perpendicularme) July 30, 2018
Rest of the talk will focus on CSS Grid. It makes Responsive Web Design better and way easier. But it also isn’t responsive web design - it’s so different in what’s possible in design. A new era on the timeline? #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
It’s not “which one is better?” It’s “How do we nest these options inside of each other?”.

Use flexbox to layout each of a set of cards.
Then use Grid to layout the cards.
Next to that use some little things in multicolumn.
Flow the left nav.
Grid it all.
etc.
#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
What we have learned over the last 8 years @aneventapart #AEADC #WebDevelopment #WebDesign #ContentStrategy pic.twitter.com/PsUS50TzEe
— Keana Lynch (@keana_lynch) July 30, 2018
We have a ton of different ways to express ideas, graphic design, etc. in the web.

Thinking about layout, we have 4 major tools:
Flow (with writing modes)
CSS Grid
Flexbox
Multicolumn #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
There’s one content system to serve everyone regardless of where the content is going - mobile apps, websites, syndication places, etc. Similarly, one design system. Responsive images. Performance. All very important things. All of these aren’t over! #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Truncation is not a content strategy. (Hi @karenmcgrane! You got a shout out at #AEADC from @jensimmons!)
— Anne Gibson (@perpendicularme) July 30, 2018
Responsive web design wasn’t just about layout, it was about more. Most talks were about “one web”, no desktop vs mobile web. There is no mobile context. We don’t know the size of our user’s screen. We need to design and develop mobile first #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
And then along came Responsive Web Design: flexible grid, flexible images, and media queries. Gave the ability to provide a much less awkward fluid layout, so some fluid elements and some fixed-width elements #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Fixed-sized content: we understood why and when we wanted content to be a fixed size. Sometimes you just want the photo to be the sized you made it. We have the opportunity to think about that again. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Fixed-width layouts using floats came next. So everything was fixed pixel numbers which meant that left-right scroll or big white spaces were back, but at least we could center it with auto margins #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Big awkward spaces and long line lengths and weird images resulted in awkwardness in fluid web design. What we took was the idea of fluid columns: containing elements wrapped in containers that had percent widths on them. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Fluid layouts using Floats: that’s what we had so that’s what we did. It was buggy and it didn’t work very well, but it was a fluid layout. Overflow was a nightmare. Sidebars were to the right, and the images were as small as possible. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
But CSS was mostly the mental model of absolute positioning. But you’re responsible for positioning every piece of content. And what happens if the font size changes or the paragraph is too short? We need flow content! #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
CSS and Designing with Web Standards both hit the ground around 2003. CSS handled styling and layout. The content’s integrity is reflected in the quality of the HTML.

We still have to constantly re-teach semantic HTML and the separation of concerns. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Your website existed in this black Flash box that wasn’t actually the web. So we had to build our own scroll bars — which we sucked at. There were a series of reasons it died #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
The mental model was the mental model of MacDraw. You put something on the screen and it stays there — the computer did all the measuring. Same mental model as paste-up in the real world with a ruler and a drafting table. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Then we tried using Flash using for entire websites. (Ow ow ow.) One of the first things you had to do was set the size of the website (or “movie”) very precisely. Everything was programmed on Flash’s timeline.#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Technique: Open photoshop, draw what you want, use the crappiest code possible, provide website.

Websites were far more creative even if they had limited palettes or strange designs. Lots of image slicing. Very painful and fiddly. No browser compatibility.#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Everything about layout has changed.
Everything changed before “responsive web design”. And now it’s changed again.
But the truth is, layout is constantly changing.
Responsive has been around longer than most of those other attempts. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
We did have tables in HTML, and that was good for data. Then we tried to use tables for layout… and that was crying. Creating Killer Websites by David Siegel in 1996 explained why it was a good technique. “We felt like pirates.” #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
On one hand, there are folks and moments in time that say “We need more art. We want real graphic design. Let’s figure out how to do it.”
On the other hand, “That’s not how the web works. You can’t just do any horrible thing, consider the medium”#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Simple HTML was just HTML in 1995. Websites were a flow layout and things wrapped when the window was too small. Images forced left-right scroll if they were too big. Flow is still very heavily used. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Next up is @jensimmons talking about Everything You Know About Web Design Just Changed. She’s a developer evangelist for Mozilla, so she knows our pain. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You can’t just do any horrible thing you want on the web. You need to consider your audience, your medium ... @jensimmons #aeadc
— Erin Fike (@erin_fike) July 30, 2018
Porting some bootstrap 3 code to CSS Grid now and I'm thinking Rust developers must feel the same joy porting code from C++ as things start to magically look cleaner and finally start to make sense. ✨🌈❤️ Thank you @jensimmons @rachelandrew et al! 🙏
— Helder S Ribeiro (@hsribei) July 30, 2018
Sizing – the opposite of pixel-perfect.
— JavaScript Teacher (@js_tut) July 30, 2018
I love this Intrinsic Web Design presentation by @jensimmons so so so much. #AEADC
— zeldman (@zeldman) July 30, 2018
“should I use grid or flexbox?” You cannot compare them like Bootstrap vs Foundation. You can use both because they are CSS! - @jensimmons #aeadc
— Candi 💌📚 Lemoine (@candicodeit) July 30, 2018
Responsive was really “it’s the web” side of the argument but we’re back at the “we need art” — and we get “both” - or what @jensimmons calls Intrinsic Web Design
“Intrinsic: Belonging to the essential nature or constitution of a thing.” - Merriam-Webster#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Getting schooled on Intrinsic Web Design with @jensimmons @aneventapart #AEADC
— jess brown (@amperjess) July 30, 2018
Just one of the many benefits of CSS grid...fr units will never get smaller than min content size, whereas percentages will go all the way down to zero. @jensimmons #aeadc
— Christy Allison (@christymarie412) July 30, 2018
Now @jensimmons is showing an example of columns and rows at the same time and tweeting this will make my brain explode (because I can’t keep up) so, once again, come to the con if you want to see the results. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
#intrinsicwebdesign is my new mantra thanks to @jensimmons and #AEADC
— Tony Sciantarelli (@TSciant) July 30, 2018
#aeadc CSS to Browser: “If you could, please sir, download this beautiful font and display it on my webpage. But if not, that’s ok, they can still read it in Georgia, I guess.” :P @jensimmons
— Erin Fike (@erin_fike) July 30, 2018
Yes please! Aspect ratios in grid (and CSS in general) would be incredibly useful
— Shane Hudson (@ShaneHudson) July 30, 2018
With Intrinsic Web Design, we’re not so much designing a layout as programming an artificially intelligent flexibility model. @jensimmons #AEADC pic.twitter.com/opHvq4zB2t
— zeldman (@zeldman) July 30, 2018
The last slide of @jensimmons talk about intrinsic web design is how I feel about an entire day of learning about new technologies and standards #aeadc pic.twitter.com/D9tGZ31mLQ
— Natalie Forman (@nforman44) July 30, 2018

Everything You Know About Web Design Just Changed

Link for this presentation:

HTML code for embedding:

Share on social media:

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