What is a Responsive Layout?

[00:00:00]
>> Kevin Powell: One of the biggest problems we've done so far is we made some staticky-ish layouts, and these days, that's not really an option. We have to make responsive layouts. Before we dive into how to do that and more into media queries and a few other things, I think it's important that we're all on the same page of what it even means to be a responsive layout. The term was first coined by Ethan Marcotte in an article on A List Apart, way back in 2010.

[00:00:24]
It's been a long time. And in that article, he says, as the name implies, it involves writing CSS that allows the layouts to respond to how a user is consuming the content, with fluid grids, flexible images, and media queries being the three technical ingredients for responsive web design. And so that's the whole idea is fluid grids. We saw that with just doing flexbox. Things become fluid, they squish, they grow.

[00:00:48]
Grid 1 FR things squish, they grow. Flexible images, we fixed that. There's some more advanced things you can get into with picture elements and other things, but just the max width on our image did a lot of work there and media queries being the three big technical parts of it. Media queries we've started seeing, we will be diving into more. As far as what it looks like, I'm sure most people are familiar, but it's really fast.

[00:01:10]
Frontend Masters site is responsive, and it doesn't just mean that things shrink or grow or there's more or less columns. If we look at this example on their home page, as this is getting smaller, actually it happened here when I opened my dev tools, there's like a blockquote over here, and when I open that, it's gone. They're like there's not really room for this as the device is getting smaller, so they removed it.

[00:01:31]
Then here as this continues to get smaller, the layout starts shifting, the buttons stack. That's a little bit like what we've seen so far. We come down here, there's some big icons of different technologies they're teaching, and they go, I think it's at one point these just get smaller, if I'm not mistaken. There we go. So they don't actually change the layout, they're just like, oh, these are just icons.

[00:01:51]
We can make these icons smaller, or logos and make the logos smaller as we're getting there. So there's different approaches we can take, and it really depends. This is a bit more classical like we saw before. I think that, you know, stacking, and I think at larger sizes. Yeah, we get the four columns coming in there. So there's a few different things we can do. It's not just about, it's stacked here and it's four columns there, and that's the end of it.

[00:02:15]
We've already seen this little tool that I showed before, but just as a refresher, if you open your dev tools, there's this guy here. It is in a different spot in Firefox, and Safari's responsive mode is a little bit strange, or it was the last time I used it anyway, but that just means when that's opened, you can grow and shrink without playing around with the size of your dev tools, which can be handy.

[00:02:37]
The Firefox one is actually a little bit better because you can close your dev tools and it will stay in responsive mode, whereas in Chrome, if you close your dev tools, the responsive mode goes away. So I always like, I think it's Control Shift M or it'd be I guess Command Shift M on a Mac in Firefox, we'll just open responsive mode without having to open your dev tools. Don't quote me on that though, because I haven't done it in a while, but that seems to be, I think that's the shortcut that it was.

[00:03:03]
Now, how do we make these responsive? We've seen part of it with media queries. It's a very big part of it. For a long time it was basically the only part of it, plus a few max widths, 100%, that was sort of the thing we could do. But more recently, Jen Simmons coined the term intrinsic design, and she did that at An Event Apart, so same organization. But this is a video talk where she talked about this idea of intrinsic design, and I've been throwing around that word intrinsic a lot, especially with flexbox.

[00:03:31]
And the whole idea behind it is, it's when we're letting the browser do a lot of the work for us. We're giving it some constraints, some things to work with, and then we don't have to worry about it. We just rely on the browser figuring it out, like we saw with flex wrap, and it just did it for us, it's fantastic. And there's ways we can build these patterns and other things, to our typography, to grids even, and other things.

[00:03:53]
And these days, I strongly believe that intrinsic patterns should be our first line of attack, but media queries should still be sprinkled in. I went through my phase of, I don't need media queries anymore. Everybody goes through this, I think, at one point or another, and you could definitely come up with some really interesting patterns and interesting ways of working that can be super cool, but then you show it to someone else and they're staring at it going, I don't understand any of this code that you wrote, and there's always that balance you're looking for cleverness versus practicalness, and is it actually gaining anything.

[00:04:26]
You can learn a lot by trying to build patterns. I'm going to encourage it. I love doing that. I still play around with it. I have some advanced videos where I'm doing really weird stuff to be able to get around using media queries, but at the end of the day, the simplicity of using them is completely fine. And there's one other thing that I didn't mention here, but we also have container queries now as well, which we're going to be diving into a little bit as that helps us solve one of the main problems that media queries present us that we'll see when we get to that part of the course.