One of the biggest challenges in responsive website conversions is reworking complicated site navigation bars. When you have sufficient screen real estate you can use multilevel navigation bars and tool around, mouse-clicking away, with ease. But when your site is viewed via a smaller tablet or smartphone a deep navigation scheme can become difficult to use. So one of the first things we go to work on with a responsive transition is an analysis of the existing navigation scheme with an eye on reduction and simplification.
What can you do to simplify your navigation?
Delete and Combine
First, you need to take a look at your site’s pages and decide whether any of them can be retired. Do you have pages nobody visits? Pages with no-longer-relevant content? Ditch them.
Can you combine any pages? One way to do this is to use internal tabs on a page, as we do on our web page. If you’ve had short pages — pages with an image and one or two paragraphs of text — combine them. (Remember to set up 301 redirects for any pages you retire.)
Split the Navigation
You’ve seen this on many sites: there will be what I call housekeeping navbar, with links to your Contact, About, Directions etc. pages, and a separate navigation bar for the core content pages. For your widescreen, desktop and large tablet views, the navs can be vertical, horizontal, or both; I typically combine both navs into a single vertical nav for smartphones. (The navbar is usually hidden and opens with the tap of a button/link.)
If you have several significant content pages, each with sub-pages, you can create an internal nav for each main page and its subs, essentially building a series of mini-sites. When I’ve done this I’ve used a horizontal housekeeping and main navbar, with vertical navbars for the internals. That way you always have the main navigation available while being able to drill down into the necessary material via the vertical navs. When the site reduces to single-column, I move the subnavs to the bottom of the page while moving the main navs undercover, to be opened via a button/link tap.
Replace Appropriate Navbar Links with Icons/Buttons
In some cases I’ve found that it makes sense to create a row of “utility” buttons/icons that might appear at the bottom of site pages for things like an Email Link to your “info@…” email address; a link to your Contact Page or Directions or a Google Map; links to pdfs people routinely need or request, etc, thus removing these links from your primary navbars.
A simpler navigation scheme helps people move through your site on phones and tablets, and that’s a good thing. If, in the process of simplification, you get rid of outdated or unnecessary content and clean up your site’s overall structure, so much the better!
