Nathan Leigh Davis is a designer and developer who writes about design, technology and things that inspire him.


Rethinking navigation

It’s no secret that I’m am both a fan of and a supporter of responsive web design. I’ve been fortunate enough to design and code numerous responsive websites as a freelancer and in my role as a designer and front-end web developer at Square Circle Triangle. These two different roles however have provided two very different experiences of responsive design. The thing that varies most is how I tackle website navigation and the challenge it poses.

The navigation problem

The innovators and early adopters of responsive design were generally individuals and small web development studios, meaning it was first applied to personal blogs and small client websites. A look through responsive design gallery is proof of this. Large corporate websites are few and far between. The reason? Smaller websites, unsurprisingly, have small menus that condense quite nicely when viewed on mobile devices. The websites I design and develop as a freelancer are of this ilk. If they even have a menu, they’re typically small and only contain links to a few pages.

Based on my experience from working at a digital agency though, navigation on large responsive sites poses a much greater challenge. Websites with a lot of pages and content often have sprawling menus with many items spread across multiple tiers. To make matters worse the demands of agency clients are greater too. They want more control! As a result many enterprise CMSs provide clients with the ability to determine how their site is structured, which in turn determines how their navigation is structured. This makes implementing user friendly menus on large responsive websites a bit of a nightmare!

It’s no surprise therefore that many of the opponents of the responsive approach are from large digital agencies. To many of these people it seems easier to advocate creating separate experiences for different users and to argue that responsive design isn’t scalable. This of course is bull shit!

Flirting with patterns

The challenge posed by designing and coding menus for large responsive websites has given rise to a myriad of different approaches. Some are successful, some are average and unfortunately a lot simply suck. Responsive design has been around for long enough though for some design patterns to emerge that adequately tackle the problem.

Brad Frost has collected the very best into a comprehensive guide that’s worth a look. In fact, I insist that you check it out as it will provide some context for what I’m about to discuss.

Great aren’t they? I’ve done a fair few of these. I’ve tried the ‘old right to left’ and while very sexy, it can be a bit of a nightmare to implement. The ‘multi-toggle’ pattern is pretty good though, as is the ‘skip the sub-nav’. The pattern titled ‘priorty+’ is great too and I’ve used it on a number of personal projects. I haven’t tried the ‘off-canvas flyout’, but will at some point because if it’s good enough for Obama it’s good enough for me.

All however pose significant drawbacks and Brad does a great job of pointing out the numerous cons. While I love these patterns and think they certainly have value, I wonder if this really is the best way to tackle the problem.

Time to rethink navigation

The problem is that these navigation patterns are about trying to take patterns such as drop downs, mega menus, fly-outs and accordions, which work excellently on desktop browsers and apply them to mobile browsers. Smaller screens, poor animation performance and the lack of hover states make them clunky and awkward at best.

If the guiding principle of responsive design is to consider ‘mobile first’ let’s try that. Why are we trying to make large menus work on mobile devices? Why are we doing them at all?

When I look at my favourite mobile apps I don’t see such navigation techniques. With the exception of top level items, such as home and settings, the navigation is nearly always contextual. It’s relevant to the page I’m viewing. A menu option links to another view with more options and I if I continue drilling down I can easily find the content or functionality I need.

Maybe it’s time to review website navigation all together.

Information architecture?

I’m not proposing that websites ape native mobile applications, but I do believe we can learn something from them, even when designing desktop websites. I’m not convinced about the merits of large navigation structures, such as mega menus and drop downs. I don’t believe that giving users the ability to access any page via the site navigation is correct.

Many will argue at this point that such menus allow users to find what they want quickly and easily. Isn’t that the role of well thought out search functionality though?

I favour intelligent information architecture. Specifically I favour the method of drilling down to specific content via landing pages.

Think about a site for a clothing retailer. A landing page for products may contain links to jeans, jumpers, shoes etc that in turn link to a landing page for that product category. The landing page for shoes would then contain links to bottom level pages, which contain information and content relevant to a specific product. As a user I don’t need to be able to access information about Converse Vintage Hi Black Sneakers from the site’s primary navigation. If I’m looking for Converse Vintage Hi Black Sneakers I’ll use the site’s search functionality.

Creating land pages for this purpose is also an excellent opportunity to not only resolve responsive design navigation woes, but to entice users deeper into a website. To excite them about something, whether it be a product, service or a piece of content. To engage them.

This is how most blogs work. They present featured content on the home page, while menu items link to landing pages, such as specific categories and archives that allow users to then drill down to individual articles. Few would argue that blogs are hard to use.

Rethinking conventions

Responsive design is still in its infancy and I feel that the web design community is still going through something of a transitionary period. It requires us to adjust and rethink conventions. Responsive design is not something that is compatible with the way we used to design and build websites.

Navigation is a prime example of this. Once upon a time flyouts, mega menus, drop down and accordions were functional solutions, but the demands of ‘mobile first’ mean that they’re no longer the best way to tackle website navigation.

By rethinking the way we go about things we can tackle these difficulties head on. Approaching content and information architecture from a mobile first perspective, means simplifying site navigation by adopting landing pages. By doing this we can create truly usable and amazing experiences for all users.