April 2 @ 4:30pm
An Event Apart Seattle 2018
Writing this talk was REALLY HARD for her… like, really? She’s gonna stand up there are say that EVERYTHING we know has changed? But she really does believe we are at a inflection point with graphic design and web layout…
Each of these times we’ve adopted a way to do layout and graphic design and we’ve evolved that approach and done a lot of testing and sharing and teaching, and it’s evolved, and then we’ve gotten rid of it and switched to a new thing.
Why have we done this 5 times int eh last 25 years? This would be the 6th. We’re having this weird fight where we think we know what we want and then we realize we’re frustrated and really not happy with it so we try again.
We used to only have FLOW LAYOUT back when HTML was the only way to do graphic design.
1) Then we landed in a ‘tables for layout’ era…
The book Creating Killer Websites by David Siegel in 1996 was sort of the start of this era… which involved chopping images into a lot of pieces and putting those pieces into a table to create a visual layout. It also involved spacer GIFs to move things around… Basically, a ton of hacks. But the result was a more beautiful web.
2) Then Flash seemed like an amazing change to start over.
Flash Web Design in 2000 (by Hillman)
The first thing you do is decide how big your ‘stage’ / canvas is going to be, you had a timeline, you created your scrollbar… we did a lot of things that the browser already did! You either go the entire experience of that website or none of that website.
Then we went back to CSS – designing with web standards by Jeffrey Zeldman in 2003. Semantic Markup became a thing – ‘hey y’all we have to have standards!’
Jen remembers was so excited that you could just have clean HTML and then apply CSS, and if you couldn’t do everything you wanted with the design, that’s ok.
3) So now we’re in the era of Fluid Layouts – hey, let’s have a fluid website where it’s gonna be the width of the browser window. We have this idea of fluid columns, and if you put them next to each other it looks like a grid…
But the fight continued because it was kind of ugly so we decided WE NEED ART!
4) So then we approach the period of Fixed-Width Layouts! In that era one of the things that we cherished was fixed-sized content where you could have a bit more control over teh design / the layout of a specific piece of content because it was a fixed size. And there ARE benefits to that which we’ve kind of given up but it’s good for us to remember.
5) Responsive Design – Ethan Marcotte
We’ve got a flexible image squishing as the viewport / browser window gets smaller, and we’re back to fluid layouts and then we use a media query to adjust the layouts when needed. Fluid images & media + media queries was a bit radical because up until that point we were saying ‘make your images as small as they can be file size wise and only make the viewer download the file size they actually needed’… so the idea of having an image file and resizing it with CSS was a bit radical.
It’s not JUST about layout. Responsive web design was a whole response to the advent of the mobile phone. And it’s true, responsive web design over the last 8 years has been so much more than layout.
Mobile Strategy became thing, and then we had to understand what mobile means, whether we should have a separate mobile site (noooo), what screen sizes there are (infinite), what the context is for using mobile (no such thing), reorganizing the web strategy and then usually also the entire organization at the same time (lol), so a lot has been business related.
ALL OF THE AN EVENT APART TALKS OVER THE PAST 8 YEARS has been put under this umbrella term called Responsive. Yeah, that’s just kind of what the web IS now.
But let’s DO talk about layout.
Because we got so tied up in that other stuff we maybe didn’t talk about layout as much as we should have.
For a while it was Fluid vs. Fixed, and what about Flash, but then the last 8 years it’s been quiet. ‘Yes, responsive, probably with a framework, so let’s go back to talking about business strategies and content strategies.’ But she thinks this IS a new day and ti’s time to move on from the ideas of responsive layout, and what that is, and to think about what’s next.
SO WHAT’S NEXT?
6) Intrinsic Web Design
So why a new name? Why bother?
The dynamics of the battle between ‘art and web’ has changed and it’s a new thing.
So what are some of the differences between Responsive and Intrinsic Web Design? (Refer to Slides)
It’s the nature of the web in 2018. Mixing fluid and fixed together.
IMAGES:
Fixed images like in pre-responsive web design. The live on a page in their actual size, and in some instances overflow outside its container(s).
Fluid images like in responsive web design are on the page and resize along with the window.
You can also make images fluid in a vertical direction which we just don’t do a lot because it makes it impossible to deal with the other stuff on the page.
Let’s go ahead and set both the height and the width… you get an image that gets squished and stretched. That’s why we’ve avoided doing this for 20 years. But there is a line of code now that you can apply to set the image to object-fit: cover; that makes this now less gross / more possible.
PARTS OF INTRINSIC WEB DESIGN
- Mix fluid and fixed.
You can do both at the same times. There are better ways to squish fluid grids.
So many of the bugs we had in the past are just sort of gone.
There is a way that even the fluid columns can become fixed if that is helpful.
- Four Stages of Squishiness:
-
- Fixed
- FR units
- minmax (min, max)
- auto
We’ve had fixed columns (adaptive) and fluid columns where all of those columns shrink and grow together (responsive).
She put up several examples of how we not have this gradient flexibility from using grid and fr units and min-content widths. When you use fr for some columns and minmax for others, the fr unit columns grow and shrink first, while the minmax columns shrink after the fr columns down to their min and grow first but only until their max. And if you set a fixed width column it just stays that size no matter what. When you add an auto width column, it just takes up all the available space that there is. The fr tracks (columns) are automatically min-content width because there’s an auto width column taking up ‘all available space.’
There are these different options and you can combine them however you want. This is a powerful set of tools that may take us another 8 years to figure out how best to use.
- Truly 2-D Layouts
Whitespace isn’t just about margins or padding. It’s about being able to define intentional amounts of space (especially in the vertical) and doing thing with them.
You can set heights and widths. We’re used to setting widths but allowing height to be affected by everything else. Now there are good ways to set heights.
- Nested Contexts
You don’t have to go all in with a page with one layout… you’re just handling an element and its direct children. You can use Flow with Flexbox with Grid with Multicolumn layouts. You can design the ‘flexibility model’ for your site any way you want.
Formatting context is the idea that there are these rules about how things work. So you’re in Flexbox and you have certain rules, and then you switch to a Grid formatting context and there are different rules to how things work.
With Flow, floats do not create a new formatting context, you just have blocks.
She went into lots of visual aids about using Firefox Nightly’s grid inspector (nightly.mozilla.org)
- Ways to Contract and Expand
-
- Shrink / Grow (aka Squish)
- Wrap, reflow (so you have text and it starts to wrap, or you’ve got a gallery and the number of images in a row is reduced and they bump to the next line / reflowing)
- Add / remove whitespace (there are all kinds of ways you can distribute white space today where the content doesn’t have to expand or unfurl and you can decide how the whitespace can be distributed in order to have a bigger and smaller layout.
- Overlap (slide one thing behind another)
You can do a lot now that will adjust to screen size changes without media queries.
- Media Queries as needed
Suddenly this 25 year fight is over as quickly as toddlers in a sandbox stop fighting. We’ve been in this mode of ‘it’s the web, we can’t afford art!’ so it’s worth some effort to putting art back into our design.
We will continue to use all these tools we have when they’re appropriate.
I liked your information! I visit your posts on a regular basis and have shared with my
Facebook fans and they loved the blog. Keep up the great work.