Jen Simmons is one of those people who I love to hear talk because she talks just barely over my head and experience level, meaning I have to learn and stretch to get where she’s going. Which is really good for me, because I’m the kind of UX designer that skews toward the technical fiddly bits of how the CSS works and while I’m not sure I’ll ever be good at it, being okay at it is a nice first step.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Truncation is not a content strategy. (Hi @karenmcgrane! You got a shout out at #AEADC from @jensimmons!)
— 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
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
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
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
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
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
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
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
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
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
https://t.co/OuWAD2F0oE for more on the layout @jensimmons is displaying #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
With Grid we can define columns and rows:
Fixed
%
FR units
Minmax()
AutoBottom ones are dynamic sizing #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
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
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 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
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
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
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
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
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
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
“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
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
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 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
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
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
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