Responsive Design & Media Queries

[00:00:00]
>> Okay, so the next thing to take a look at are media queries, because media queries are an important part of responsive web design, or RWD. And there are two particular ways that we use media queries when we are working with responsive designs. And those two ways are mobile-first or desktop-first.

[00:00:20]
And you may have heard these terms before, they are actually attached to certain approaches that we take with media queries. So mobile first is typically the way that we teach people to lay out webpages. So we're going to put all of our styles that pertain to our mobile display, our narrowest width devices, will have not been a media query.

[00:00:39]
They are the defaults for the particular page design. And then we're gonna use a series of min-width media queries, so minimum widths. And that is going to stack on styles that are going to override what came before. So we may have a media query that overrides some of the settings that we had in mobile.

[00:00:58]
Obviously those media queries can also add additional styles that were not present before in order to lay out the webpage. So we are going to order those media queries from the smallest to the largest number. So we may start with a media query, let's say it's 500 pixels, then we're gonna go to 700 pixels, then we're gonna go to 900 pixels.

[00:01:19]
You would never say 900 and then 300 and then 500, you would not skip around between numbers. You're gonna put them in numerical order from smallest to largest. Make sense? Desktop media queries take the opposite approach. So what that means is for your widest monitors, those are your default styles, not inside of media queries.

[00:01:40]
And then we're gonna use a series of max-width media queries and progressively smaller numbers to override what came before. So now you're gonna go from your max-width media query for 900 pixels to 700 pixels to 500 to 300, in order to change your styles as you go down.

[00:02:01]
So, which is better? Anybody know the answer to that, with the million dollar consulting phrase?
>> Depends.
>> It depends, exactly. Yes, it depends which is better. So it depends on what you have as you're starting code base, it depends on how you're coding this from the beginning.

[00:02:20]
What I tend to do is I use a lot of desktop-first media queries often with navigation bars, because we go from usually very simple styling on a navigation bar on a desktop. So something that's fairly complicated with a hamburger button on mobile devices, it's actually easier to go down in size.

[00:02:39]
For other parts of the page, we may use mobile-first media queries to go layout the whole web page. And there's nothing wrong with mixing both of these techniques when you lay out webpages, make sense? Okay, yep, questions?
>> I tend to like the mobile-first as far as like the layouts go, because I always start with the content.

[00:02:59]
>> Yep.
>> So I get what you're saying as far as navbar particular case, but usually you wanna start with the content-first and not navigation. So it's like mobile fits my brain better and it feels like-
>> Yeah, and in fact, that leads into my next slide, which is the concept of website planning.

[00:03:20]
Back in the day when mobile devices were new and we were trying to figure out how to make these work on devices, what Mark is talking about was actually a matter of making a major mindset switch. To that point in time, Circa 2010, 2011, 2012, people had always thought about how the page looks on the big monitor, right?

[00:03:39]
And your marketing department people who are determining the design of this website, they have very big monitors, right? So they had this beautiful layout in mind for very large device, and what they tended to do was then remove content as they moved to a smaller mobile device. And what LukeW, or LukeW Wrobleski, [LAUGH] did I say that right?

[00:04:04]
Sorry, Luke. What he had advocated was the concept of mobile-first when it came to content. In other words, let's plan the content to fit on a small form device. So if it works on a mobile device, we're only saying what we have to say on our webpage, and then we can take that information and spread it out as we go larger.

[00:04:24]
But we're not taking content and removing it from the page, which is the model that we had previously had, sort of how we started working on responsive content in 2011. So again, usually you'll see me working desktop-first on things like nav bars, but will most likely use mobile-first when we do page layouts.

[00:04:45]
So which is better? When planning content use mobile first approaches, and you can absolutely mix your approaches depending on the parts of the web page. As I said, max-width for nav bars and min-width for the rest of the page. And so, one of the things that I'm gonna show you now though, just so you get a sense of how a desktop-first media query works, is that we start with a desktop layout.

[00:05:11]
This is not as common as it used to be, back ten years ago, this was your number one consulting project. Somebody would give you their old website, it would be desktop-based, and they would say, please make this work on a mobile device, and the fastest, easiest way to do that was with desktop-first approaches.