RWD Podcast Episode 6: Responsive Navigation
Listen to episode
One of the challenges that face every single one of us regardless of the site we’re building is navigation.
What the hell do we do with this often vital part of the website when we are faced with limited screen space.
Okay, so maybe not every site is going to have this problem. If you’re building a single page site or are running a Tumblr styled blog then navigation isn’t a worry for you. You can switch off now if you’d like but I’m sure you’ll come across this kind of problem at some stage in your responsive life so listening on won’t hurt.
There are effectiely 6 types of navigation patterns you can look at when approaching main navigation. Just as a word of warning here there’s a whole other level of complexity when it comes to second level navigation which I’m going to avoid touching on in this discussion, but feel free to ask for a future episode looking at that specifically.
Up front I’m going to make a couple of assumptions as well. I’ll assume that you’re using an unordered list for your navigation and containing within the HTML5 <nav> element. I’ll also assumed that you’re using ARIA Roles and including role=”navigation” as well… y’know… cause we’re all about semantics here.
Top Nav or “Do Nothing” Approach
The easiest approach is to just do nothing at all. BAM. It works immediately, no additional CSS or Javascript is required. Win win win.
In this approach you just set your nav element to 100% and float all of your navigation items to the left. This will let them stack to fit within the space provided. A few things to remember with this approach is that you should give the menu items some background colour and padding to provide a large enough touch target, and also set a comfortable margin between each element so you can see the division of menu items.
This works well if you’ve got room in the header and you don’t have too many links crowding it. You might end up pushing your content too far down the page though which is not what you want, after all the user probably ended up on your page through google or a link and is looking for the content and not your menu.
This is what I use for responsivedesignweekly.com
The Footer Anchor
This is where you don’t have the links in the header of your page at all and instead they live within your footer. You include the trusty 3 line icon (hamburger, what ever you want to call it) or the word “Menu”, or both, and anchor link the user to the footer to view your links.
If you’re clever about it and look at a vertical media query you can ensure that you cover most of the screen space to give the illusion that it’s magically appeared, and remember to have an “x” or a close button that sends you back to the #top again too.
This can be a bit of a janky experience with the scroll bar going from the top to the bottom pretty quickly, especially if the user then starts scrolling from the menu.
It is also often seen when people double up the code for the menu, so they show one <nav> in the header on larger screens while setting a display:none on the footer version, and then swapping those rules around on smaller viewports.
The Select Menu
The select menu gained a lot of popularity through folks that were used to using the iPhone menu selecting method.
It’s one that really took off in the wordpress space because it was an easy plugin that would just “work” (and I say that in inverted commas).
You include a little JS script that rewrites your <nav> and list elements into a select menu and places it at the top of the page. VilJamis made this popular when he released TinyNav
One of the issues for some is that often mobile and tablets will style forms elements, and therefore select fields, in their own way. This can be looked as a benefit that each platform will make a familiar interface for the user, but in reality it kinda sucks.
The Toggle
This is like a combination of the footer and do nothing approach, except with a bit of javascript thrown in.
On smaller viewports you set everything in the <nav> to 100%, stack it all and make each touch target large enough to easily click. That gives you nice big navigation that probably takes up all of your mobile screen. By default you should make this display:block; but then using javascript set a class on the <nav> element and style it so the height is 0 and opacity is 0 and therefore hiding the menu. On smaller viewports you include the “hamburger icon” which has some JS applied to it to toggle the class to be removed and return the height to auto and the opacity to 1.
This is what I use for the main navigation on responsivedesign.is
The Off Canvas Nav Flyout
I use this for secondary navigation for the resposivedesign.is site and there’s a whole (article on how implemented secondary responsive navigation. Truth be told it was actually code rewritten but based on the Zurb Foundation off canvas approach.
The idea behind this is that rather than display none or opacity 0 or height 0 you instead position the element off the canvas by setting the margin to -100% and setting the overflow to hidden for the parent container.
I then use a sub navigation button (incidentally that looks like a list icon) to toggle a class on the parent container. This class then sets the sub navigation to margin 0 and sets the main content to be offset instead. If you apply some CSS transitions to this your giving the experience that the menu slides in from off canvas and is quite a nice technique.
The “Hide and Cry”
Don’t do this. This is just display: none; your navigation which really sucks. Just don’t do it.
Unfortunately people do this and while I’d love to name and shame them here I’ll just list a bunch in the examples section on the site.
So that’s it. that’s a few navigation options for a responsive website.
Thanks for listening this week, this will go up on the site with a few links to some tools and plugins to help out with your navigation.
A huge thanks to Brad Frost for his post on responsive nav patterns which is where I took lead on for this as well.
