Responsive Web Design

Responsive Web Design RWD Patterns: Navigation


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 "RWD Patterns: Navigation" Lesson is part of the full, Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Responsive web design still poses many challenges including complex navigation and tabular data. Looking at how others are handling these challenges begins to outline emerging patterns in responsive design. First, look at navigation.

Get Unlimited Access Now

Transcript from the "RWD Patterns: Navigation" Lesson

>> [MUSIC]

>> Ben: Let's take a look at some emerging patterns that we're seeing in responsive. There's lots of challenges, okay. There's, we're only a couple of years into this entire, this sort of this technique that is really revolutionizing the way we build sites. So what I'd like to do, is take a look at some areas where I feel like there are some real challenges left for us to figure out complex navigation tables.

[00:00:29] How do we handle big tables of data? So let's take a look at some of these more complex challenges. What I'm going to do is just kind of walk you through a bunch of examples of stuff that I've found online, that I think is relevant. And we'll take a look at how some people are solving some of these things.

[00:00:43] Some of these are great solutions and some of them are not. But it's good for us to kind of look at and identify what works and what doesn't. So we're gonna start with navigation recover some ideas of all these different types of navigations, just can be easy for me to do this in the browser so.

>> Ben: Okay, so I've got a handful of sites across the top here, these tabs that I'm just going to walk through. And we'll just take a look at how they've handled their navigation. So this is probably the simplest way you could do it. This is pretty common for small sites that don't have much in terms of nav.

[00:01:32] They're just gonna basically keep the nav exactly the same, but shift it up to someplace where it's a bit more usable. This I mean this works because the nav is so small right. So as soon as you add a handful more this kind of breaks. The other thing that's I think challenging with this is they haven't really thought about the usability of that nav.

[00:01:52] It's pretty close to the top of the browser which means I could very easily hit part of the Chrome, of the actual browser itself. So that's something that they may want to consider. But you can see how they've handled just kind of shifting that nav around. Contents Magazine is another here and you can kind of see this nav across the top right here.

[00:02:13] Again, this is a very small navigation but watch what happens when we get to a certain resolution here.
>> Ben: All of a sudden our nav kinda disappears and I get this explorer link, clicking this takes me to the footer. Literally just the old school anchor tag, okay? And so what I've seen quite a bit of these days, which I actually really like this pattern, is people actually putting their nav in the footer in terms of source order.

[00:02:42] Putting it into the footer. So a list, another list or a nav element, whatever, however you mark that up, lives literally in the footer of the page. And then at larger resolutions with CSS, positioning that nav up into an area that makes a bit more sense where a user might expect to see it.

[00:02:59] And then at smaller resolutions, letting it live in source order at the bottom of the site, but giving them just a simple anchor to kind of drop them down to the footer. A bunch of sites are doing this kind of thing now, pretty simple, okay. And this kind of just happens at a mid tier and stays the same even the lower you get here.

[00:03:20] Deconstruct, this is the 2012 Deconstruct site. [COUGH] I love the site it's one of my favorite responsive sites. But in particular I like how they handled their navigation that again they have a sort of a smaller nav right, there's only really four items here. Home, Conference, Workshops and Locations, location and as I take this down you'll see watch the word location kind of says it starts to get behind this sold out banner they do this, okay?

[00:03:48] Now you guys have seen this you know the three bars kind of representing that there's a navigation or a menu of some kind. And for what they've done is they've opted to kind of enhanced the navigation at smaller resolutions. I love this, they've really taken into consideration the target size, right?

[00:04:07] I can really easily hit all three of those buttons, no problem, dead simple. And they've actually even made it a bit more visual, they've added icons. It's a really, really nice solution. So, I think this is great. I love the idea that there's sort of making the nav even more enjoyable, I think, at smaller resolutions.

[00:04:28] It's kind of shows you where their priorities are you know. This is a site using drop down to do this to do nav. And I've seen lots of sites using this again this is one where sometimes that larger resolutions they're just a normal nav. As you get smaller, they shift all that nav into, or hide that nav and show a select standard HTML select box.

[00:04:54] One thing to watch out for with this is that, you kind of need JavaScript to actually trigger something, right. So if you're gonna use a form like this, or you can use a submit. So if you're going to use a system like this, it's great to use JavaScript to sort of capture the change on the select.

[00:05:15] And then trigger a page change, a navigation. But you should also think about what's going to happen if somebody happens to have their JavaScript disabled. Cuz if you don't, in this scenario, they're not gonna be able to navigate your site. That's a that's a problem, right? And all you would need to do very simply is add a little go button of some kind, you know, which is actually going to be like a submit.

[00:05:37] Three lines of PHP on the backend or whatever you want to use to just take a look at which one was selected and load the right page. Really simple ten minutes to do that you know it's definitely worth it. In this case if I disable JavaScript here you see that's kind of what happens right so you get a standard select with a Go.

[00:06:01] Twitter has, who's using bootstrap, Twitter bootstrap? A couple of guys, okay, cool. They have this navigation pattern that's also pretty familiar. You've seen again the three lines and they do this reveal, it is what it is. This is everywhere right now this is definitely something we're seeing a lot of.

[00:06:23] And then let's talk about some more complex sites, some more complex navigations. So this is a college site and you can kind of see if I click here I reveal kind of a mega menu, I can click through each of these, right. And I can get those, now if I take the resolution down, you can see I've gotten sort of these three kind of navigation areas.

[00:06:47] So I've got a Main Menu which reveals and I was in Admissions before so I'm you know I can kind of shift through and I can get to multiple tiers of navigation in a more complex and more complex in a larger site. There's also this idea of colleges need to have millions of links for everything all right.

[00:07:07] But what I think is really cool about this in particular is the amount of space that's being taken up, like this is minimal, right? To try and get all this navigation and even the site's identity, which actually shifts at higher resolutions to this you know more sort of square.

[00:07:29] They're being really concerned with trying to make sure that they're not that the user can still see content as opposed to just navigation when they hit the page. If you go out to that media crease site and browse through a handful of those, you're going to see that most sites still are giving people just a big list of links.

[00:07:47] That's the first thing you see. And in fact, that's what you see on every page, there's no indication that you're on something different. Really, really incredibly confusing for a user. In fact, this is one of the reasons that we are rethinking our site. You know Spark Box's site, we're probably the worst culprit here.

[00:08:05] If I go out to our website, and I go to our foundry, watch what happens. Let's just drill into an article here, okay, great. Here's what somebody on a smartphone is gonna see when they come to this page right. Kind of looks like a 404, [LAUGH]. Hey we couldn't find what you're looking for here's the footer it's not really the footer, but it kind of looks that way, search for something else.

[00:08:34] And I have to do one, two, three scrolls, three pages of stuff, I have to go through to get to the actual content, right? Yeah [LAUGH] Sorry, I just noticed this, this just went up today. We're redesigning our site and you can follow along if you want. So, [LAUGH] Anyway, that's interesting, didn't realize that was going live today.

[00:08:57] But you can see like even at large resolutions this is terrible, right, the UX on this is awful [LAUGH]. What happened for me is we got so caught up in some of the cool techniques that we forgot to really think about the user. So we're redesigning we're rethinking all this stuff.

[00:09:14] And in contrast to that with the way that the Mount St. Joseph site really compresses all that information, the user might need up into a very minimal vertical space. [COUGH] We recently retrofitted the Dayton Power and Light company which is our local utility. And they had a sort of an existing design that we'd worked with them on.

[00:09:37] This is the organization I was telling you about that we shifted to clicks for their primary nav, you know? So, again this is a fairly complex navigation, in fact what you're getting here is three levels of nav. I've got Customer Service, Outage Center, Outage Map, three levels that I've got to be able to show at a small resolution.

[00:09:57] And we were tasked with doing this without changing the markup. So we had to basically use the existing markup for their nav and make that work at small resolutions. And when you take this down, similar approach but you kinda get this, you can kinda do these sorts of things and you can drill in and see all three, all three levels.

[00:10:17] So this is actually really usable, I've done some usability testing with it. It kinda ], when you reveal that nav it gives you what is very familiar to mobile users, the sort of a list of I can choose to kind of navigate through. And then of course if you guys haven't seen the Boston Globe yet you need to go take a look at.

[00:10:36] Ethan himself actually worked on that along with the guys at Filament group just really beautifully executed site. And you can see how they've adjusted, and really nice demonstration of the flexible system underlying all this. You can see these columns slowly adjusting their width as you take it down.

[00:10:58] And watch this nav, I mean they've got a fairly complex navigation here, right? All the different sections of the paper have their own big mega dropdown. And the more we kind of drill down
>> Ben: you'll see that eventually they shift into this sections, okay? So again, those are all the links that were sort of across the top.

[00:11:20] If I take this down even further, it goes to sort of a single column of those sections. So incredibly usable, really nice tight based design. But they're really thinking about the usability of, from a user's perspective. How do I shift into a mentality that enables them to touch through my nav, okay.