CSS Grids and Flexbox for Responsive Web Design Defining Responsive Design
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Defining Responsive Design" Lesson
>> Jen Kramer: Responsive design consists of three characteristics, as defined by Ethan Marcot when he wrote a fine article back in May of 2010. Can anyone name what the three characteristics, the three defining characteristics of responsive design include?
>> Speaker 2: Media queries.
>> Jen Kramer: Media queries, definitely one of them. What else?
>> Speaker 3: Images that resize.
>> Jen Kramer: Images that resize, absolutely true. And one more that's kind of the heart of what we do today, hint hint.
>> Speaker 2: Grid based layout.
>> Jen Kramer: A grid based layout. You're not peeking on that PowerPoint slide are you? So this is it. So Ethan Marcotte, when he wrote his definitive article on this back at A List A Part, this is how he defined responsive design.
[00:00:45] Flexible grid based layout, media queries, images that resize. It's always worth revisiting this. I am a Harvard professor, I believe language matters. This is what responsive design is, it's not jQuery mobile or something like that, [LAUGH] okay. So this is what we mean when we talk about responsive design.
[00:01:03] And so to go into detail a little bit more about that, we know that a grid based layout consists of some number of columns, which are projecting very badly [LAUGH] on this particular slide. But if you look a the PDF you should be able to see the pink bars that are behind this.
[00:01:19] You can imagine up here on the top with these 70 pixel boxes on the top row, if they extended all the way down, you'll see how we have a 12 column layout here. You can combine these columns and create various different types of layouts here on a page.
[00:01:35] This is probably super familiar to all of you at this point, right? Great, okay. Images that resize. Images should change size based on your screen resolution. So if you are on a big desktop, you should have a big image. If you are on a phone, what size image should you have?
>> Speaker 3: Very small.
>> Jen Kramer: A very small image that downloads quickly and doesn't consume your entire data plan. So there are many ways of managing images in a responsive manner. Some of these are client side, some of these are server side, and there's a new picture tag, it's an HTML picture tag.
[00:02:10] You guys familiar with the HTML picture tag? Brand new, HTML 5.1. We are gonna be revisiting that today, okay. So this is actually got responsive images built in to it, and we're gonna take a look in to that in detail a little bit later on. All right, and then of course we have media queries.
[00:02:28] In media queries the browser is reporting what is basically our browser window size at this particular point in time. And then based on that width, what portion of the style sheet is actually going to apply to that portion of the screen. And obviously these are central to what we are going to be doing for much of today.