Join James Williamson for an in-depth discussion in this video Defining a responsive navigation strategy, part of Applied Responsive Design.
One of the most critical elements of any responsive design is its navigation. Without a solid strategy for defining how navigation should function across devices and screen sizes, your project will likely not succeed, no matter how well designed the rest of the site is. In this chapter we're going to be building two responsive menus. The first one, and you see it here, is relatively simple, and it simply requires that we carefully style it across different screen sizes. You can see here, at the desktop size, we have a lot going on. We have icons, we have some additional text. But as we'd resize the screen, when we get down to tablet size, we're resizing the icons, we're placing them on a different location, and then when we get down to mobile devices, we're doing pretty much of the same thing, resizing the icons and just placing them in different places.
Notice also we're hiding that sort of extra that sort of caption text there. Now the second menu is going to be a little bit more challenging. At desktop size, it's just simply a normal HTML and CSS dropdown menu. Nothing really fancy going on about this. But as we resize this, when we get down towards tablet styling, you can see that we still have a hover dropdown menu, because so many of the devices at that size support mouses and pointers. But a lot of devices of that size are also tablets, so we have to also account for the fact that this could be a touchscreen device, so we need to enable this menu for touchscreen use as well.
When we go down to mobile space, we hide not only the submenus but the menu itself. This way it saves a lot of screen real estate and allows mobile users to get right into the content and then expand the menu if they want to see that. It also gives them the ability to toggle the menu on and off. Now, in both of these cases, we're going to look at not only the techniques that are required to create these, but we're also going to explore and take a look at those variables and constraints that you need to consider while building these responsive navigations as well. Now, since navigation can change so dramatically from one project to the next, it's really just critically important that you stop and take the time to think through how a site's navigation should work at different screen sizes and on devices with different functionality.
That's really, really important. We'll need to really carefully plan around what's best for a specific context and then consider what your users' expectations are, depending upon the device that they're using, to access your content, and a lot of people lose sight of that. And although I usually save additional resources to the end of a course, for this particular chapter I wanted to start off by giving you a couple of online resources that can help you dig a little deeper into responsive navigation and explore some of the patterns that are common to responsive design. First, I highly recommend checking out Brad Frost's post on responsive navigation patterns, where he lists the pros and cons of some of the common responsive approaches. And I want to take a look at just a couple of these.
This first one is this Top Nav Or "Do Nothing" Approach. That simply is just sort of a horizontal list of links that is designed to break down to new lines when screen sizes changed, and that just sort of allows the navigation of flex, but it's not always the most attractive approach. Now one that I'm really interested in is The Footer Anchor approach, and I am just going to skip down to this one. The Footer Anchor approach is the idea that you're going to place the navigation at the very bottom of the page now, in the footer itself, and not at the top, which has been a common pattern for years on the web. Now, this does two things.
Number one, for the mobile user, it frees up the top of the page for the content, and they can reach the navigation when they get through scrolling all the way down to the bottom. For desktop users, this is kind of interesting as well. It allows designers to respond to the recent trend in laptops becoming touch devices, because if someone is typing on a laptop, studies have shown that they really just sort of like to reach up towards the bottom of the screen and not have to go all the way up to the top to hit the navigation. So this is a pattern you keep your eye on. I think it's going to increase in popularity as we see more of those devices on the market.
Also, he talks about things like converting navigations to toggles, so select menus, and he also covers this one, The Left Nav Flyout. This is the one that you'll probably see on Facebook a lot where the navigation is sort of off to the left-hand side and you can swipe or hit a button to have it animate on when you need it. It just kind of hides it out of the way and whenever you need it, it sort of brings it in. This is actually a variation on what's called the off-canvas approach, and Luke Wroblewski wrote a really nice post about that earlier in 2012 about off-canvas multi-device layouts.
It's not just for navigation, but certainly people are using it for that. Now, this was actually followed up by Jason Weaver, who put a nice online demo of these off-canvas patterns online. And you can kind of see what's going on with this layout. You have three columns and as you resize the page and screen real estate shrinks, the columns will start disappearing, first the right- hand column because it's less important, and then finally the left-hand column. But once you get down to this size, you can bring those columns back by simply animating them onto the screen. So this is very handy on a phone and you could even wire that up to responds to swipe navigation or things like that.
Now, I also want to mention Brad's follow-up post on complex navigation patterns for responsive design. It really just sort of takes what he was doing earlier and extends into some more complex patterns, so this is also worthy reading. Now, as you look through all of the different approaches that I've shown you here, I want you to focus on the fact that there isn't a single one of these that can claim to be the absolute best way to approach planning navigation for responsive sites. Now, the unique nature of the site navigation when you're changing devices and screen sizes makes it really challenging the plan for when you're building your responsive site.
So my advice to you is to familiarize yourself with as many options and techniques as possible, and don't be afraid to come up with your own unique solutions if the project requires it.
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites