Responsive Design Overview

[00:00:00]
>> So we're gonna introduce Flexbox with this little PowerPoint show here I want to give you a little bit of background about responsive design and what it is and then we're going to talk a little bit more about Flexbox including its history and its syntax and things to think about when you work with Flexbox then we'll get into some coding.

[00:00:20]
So to start here, responsive design was defined by Ethan Marcotte back in May of 2010 now, so 11 years it's been since Ethan Marcotte came up with the idea of responsive design. And he defined it as images that resize and media queries and a grid based layout. Now, when he came up with this concept, the only way to do layouts on a web page were pretty much two ways.

[00:00:44]
One was a table based layout, which everybody knew was bad news and float based layouts which were a lot more difficult to work with at that point in time and so fortunately Flexbox has since gone through several iterations and become well supported by browsers, so the grid based layout is much easier than it used to be.

[00:01:09]
The images that resize have come a long way we're gonna talk a lot about those and of course we're gonna work with media queries all through this course. So a grid based layout you might be familiar with from Responsive Design frameworks like Bootstrap or Foundation UI kit there's many many of these frameworks the concept being that you have some number of columns on the page and then you're going to group together those columns into a unit and that will become a where you actually display something on your webpage.

[00:01:40]
The concept here comes from print design, where printers have thought about columns in terms of laying things out for a very long period of time. It helps keep layouts neat and clean and, and flexible in a lot of ways. These days we tend to be breaking away from this format a little bit, but we will look at it a little bit both in terms of Flexbox and in terms of CSS grid over this course, so that you can understand this model.

[00:02:07]
We'll also look at some ways people are looking at these types of layouts using different types of technologies. The images that resize have come along way as well. So last time I recorded this course in 2017. We talked about the picture element. And that was all it turns out that there are two other ways that are now in HTML 5 sizes and source set.

[00:02:32]
Those happen to come out the same month and get supported by edge at the same month that I was recording this course the last time around, which is why I didn't talk about that. So pictures, sizes and source set are all very well supported. Now, we will be talking about those later on today in terms of responsive images and how that can work.

[00:02:52]
And then of course, finally, CSS media queries. So this comes straight from the CSS, there's not any JavaScript involved. And for the most part, people have used media queries in terms of screen widths, minimum width, maximum widths and so forth. But media queries are much more than that.

[00:03:09]
Especially today we have a lot more types of media queries that are supported. You can do portrait or landscape. You can do aspect ratios. And you could do a print media query because after all, media query is actually all about the media. So you can ask if you're just trying to print out something as opposed to putting it on the screen.

[00:03:32]
So keep that in mind as you work with media queries. They don't all have to be screen widths. So how does Ethan Marcotte ideas hold up today? Well, those grid base lands tend to be associated a lot with frameworks, people tend to think of them as very heavy and difficult to work with and I'm here to tell you it doesn't have to be, not if you know what you're doing that in the images that resize are often forgotten.

[00:03:59]
A lot of people just put up the same picture across all of their devices. Or they go after complicated solutions may be something that's JavaScript base I'm here to tell you that's all baked into HTML and it's well supported nothing could actually be easier than responsive images a lot of developers today are trying to avoid media queries and there may be some reasons for that.

[00:04:23]
I'm not sure if it's complicated CSS or if it's performance that people are concerned about, but media queries are not that difficult to understand. I hope that after two days of working on this stuff you have a better idea of how media queries work in CSS, and how to read the code correctly, to understand where your styles are coming from.

[00:04:43]
I suspect that's part of the reason people don't like media queries. And then of course everybody comes along and says, well, container queries are gonna solve all my problems. Sub grid is gonna solve all of my problems. This is something that I've heard now for twenty years. There`s always some latest hottest new technology that's just out of reach that is going to solve all of our problems and I'm here to tell you that's not true, they have very good technology right now that you can work with even before you get.

[00:05:13]
Your queries and subgrid which are coming I haven't covered them in this course because they're still under development at this point in time but they will be here hopefully sometime soon
>> How do you decide on the media queries for your project?
>> How do I decide on the media queries for my projects?

[00:05:32]
What looks good. So in other words you don't tie your media queries to devices because devices change every single day of the week. So it's not going to be like the old days where you can say definitively where exactly certain media queries should be set. Furthermore, you can have media queries for one part of the page, because that part of the page needs a certain set of media queries.

[00:05:55]
Then another part of the page maybe have a different set of media queries associated with it to make it look good across breakpoints. So this is part of what I'm talking about in terms of fragmenting the approach to responsive design now. So that you can focus on smaller parts of your page instead of media queries to control that part of the page to make each each element on the page look optimal in its layout.

[00:06:21]
So as you move forward working on responsive design, keep in mind these guiding principles of the grid based layout, the images that resize and their media queries as something that are going to define what responsive design is. Define what responsive layouts are? But you don't have to strictly adhere to them the way Ethan Marcotte described them 11 years ago, at this point in time.