This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.

Check out a free preview of the full Responsive Web Design course:
The "Prioritization" Lesson is part of the full, Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Prioritizing content and functionality leads to better responsive design. Prioritizing doesn’t mean restricting. It’s putting the most important mobile content where it’s needed.

Get Unlimited Access Now

Transcript from the "Prioritization" Lesson

>> [MUSIC]

>> Ben Callahan: Prioritization, so I wanna tell you guys a little story. I grew up in a house where we actually owned this very microwave. That's not my mom, but this is the amana radar range, and this thing is incredible, okay, dead simple, I love this. It feels like it's cast iron, the thing is massive.

[00:00:28] It's got chromed front, I mean, the thing is gorgeous, my parents still have this to this day. And you can see these two big dials and two big buttons, right? That top dial, you can turn that thing, and it'll let you go up to like three minutes. Okay, you can turn all the way around to the top, that's three minutes.

[00:00:46] The bottom dial lets you go all the way up to an hour. And you can see she's pulling a roast out of there, right? [LAUGH] I mean, but the beauty of this thing is really in those two little buttons, one is green and one is red. Any ideas what those might be?

[00:01:00] Yeah, start and stop. You can't really screw this up, right? They tried to figure out what is the priority of using this microwave? Well, you wanna warm something up. And so, you put your stuff in, you close the door, you turn the dial, and you push the green button.

[00:01:17] That's it, dead simple. I grew up with this microwave, and I still to this day am actually microwave handicapped because literally when I got to college, this is what I started seeing on microwaves, right? I mean, look at all that stuff. No idea, I just wanna read you guys a couple of what these say, okay.

[00:01:38] Breakfast bar, lunch on the run, one dish dinners, super defrost, and compu defrost, I have no idea what any of that is. And then this, believe it or not, is actually a remote control for a microwave. So I guess if you're really, really lazy, you can sit on the couch and add a minute to the time that you're cooking your popcorn or whatever, ridiculous, right?

[00:02:06] Finally, I mean, I literally would walk up to these microwaves and just stand there. I didn't know what to do, I just wanna warm something up. Until finally, I found this little button on a lot of these, Minute Plus, sometimes it's like a plus one. All this does, add a minute to the time that you're cooking something.

[00:02:26] And so this is my favorite button on modern microwaves. If I'm gonna warm something up and it says it's gonna take three minutes, go to the microwave, put my thing in there, close it, Minute Plus, a minute later, Minute Plus. A minute later, Minute Plus, that's how I use microwaves.

[00:02:43] And this is because I grew up with this super simple model. And I've yet to really try and understand how all this complexity works. If you're gonna build a microwave, you better make it really easy to warm stuff up, right? This what they're for. Yeah?
>> Speaker 2: I don't mean to blow your mind, but you can actually hit the Minute Plus three times.

>> Ben Callahan: Seriously?
>> Speaker 2: Yeah.
>> [LAUGH]
>> Ben Callahan: Wow, dude, I'm buying your beer tonight. [LAUGH] So, let's talk about this in terms of priority, okay? Cuz really what those makers of that first microwave had done is prioritize the real functionality of that device. What's happened over time with microwaves is we've loaded up this interface with all kinds of fancy features and completely hidden what people really wanna do with a microwave.

[00:03:31] So I think we've done that with websites too. Somebody was asking about priority later or earlier, this is an example. I love this example because I feel like they've taken the time to really kind of prioritize what's important for the users. So this is what the other site looks like at a large resolution, nothing crazy here, nav over in the top left there.

[00:03:54] And if I take my browser down or if I load this on a small screen, this is what I get. A menu link, okay, we talked about the pattern where the nav lives in the footer. If I touch that, it scrolls me to the bottom, all the nav that we just saw in the top left corner.

[00:04:08] No big deal, I can get to that stuff with one click. I can also choose to see the schedule, the program, or buy a ticket. Okay, those are the two things that are their, in their minds, top priority. So what they've done here is those two links, they live in the head of the document.

[00:04:25] They're just hidden at higher resolutions. They're inside the nav, if you drill into the nav, you can get to those functions. You can still do those things. They're not saying you can't buy a ticket unless you're on a small screen. They're just prioritizing the function of buying the ticket when you're on a small screen.

[00:04:41] I think we need to start approaching things like this. We need to start thinking about what is that mobile context that people talk about, understanding that part of the time, that mobile context is very true. I'm on the go, and I have very few, a short amount of time, and a couple things that I really need to do.

[00:04:58] But there's a whole other side to those statistics, which is people sitting on the couch and browsing while they're watching TV. And those people don't want you to restrict what they have, what the capabilities are. But to prioritize things gives that on–the–go user what they want and give the ability to kind of get to the rest of that content.

[00:05:18] Really simple example, but I think that we need to start thinking that way. Also, to kind of follow up with that microwave story, there's a lot of people who use your sites and didn't grow up using the Internet. Most of us have grown up being very familiar with browsers and using the Web and this whole interaction.

[00:05:39] But I look at my kids now, and my daughter, she can take that iPhone, and she's two years old. And she can just, [SOUND] she can open up whatever she wants. She's incredibly fluent in that touch interaction model. You put a mouse in front of her, and she's confused, right?

[00:05:55] It's just, she's coming from a different paradigm. Same thing with me and microwaves, same thing with a lot of our users and the interfaces that we're trying to shove in front of them. So, you need to make sure you're prioritizing content function that's really needed. If you wanna get all fancy, that's great, but make sure you're not covering up what's really needed on your site.