Rethinking responsive navigation – a real world case study

Carl, December 29 2015

We started designing a content first, mobile first template framework back in 2013. At the time, we had a clear view that the site would be user focused and task based. The main difficulty is that we deliver around 150 different services. All of these have a wide range of different users. We needed a way to deliver a consistent navigation across the whole site. This navigation needed to work across devices and be usable by everyone.

Research

We spent a few weeks researching different navigation models that already exist. We looked in detail at navigation for smaller screens with limited space. I’ve already written about the navigation models we shortlisted and won’t detail them here.

The option that gave us most flexibility was the off-canvas model of navigation “drawers”. This model stacks navigation menus to the sides, sliding them in on a button press. We thought this was great, we could have as many menus as we liked, all just a click away.

Implementation

The tool to achieve this was mmenu.js  – a jQuery plugin with solid updates. Implementation into our template was a little tricky. Some CSS modification here, a few parameters for cloning menus there. But we got it in, working well and performing across devices.

The main template had three off-canvas drawers:

  • Main header menu
  • Search form
  • Footer menu

These were the items that appeared in-page on larger screens, off-canvas on smaller screens. Mmenu even dealt with having sub-menus, which just seemed perfect to us!

As well as those three menus, some sections could also have their own menus:

  • Microsite/campaign navigation
  • Search filters
  • Anything else that doesn’t fit (I know…)

This did result in some pages having 5 menus that slid in from off-screen on a press. The behaviour and styling of these menus was consistent, but something felt wrong. It felt like a lazy option – hiding navigation instead of providing what users needed.

Also, that hamburger icon.

anav-hamburger

To be fair, we never had the hamburger on it’s own. It would always sit with the word ‘menu’. We had a magnifying glass next to ‘search’. A little stack icon next to the breadcrumbs link. Finally, a small funnel icon in the label for search filters. No mystery meat, and tidy little icons. Clever, eh?

anav-filter

I just felt unhappy having everything hidden away (even the users current location). It allowed more room for content, but at the cost of context.

The design had got lazy, as had our solutions. But what to do?

Surfacing

I wrote a wishlist of what I wanted the main header to show at all screen sizes:

  • Breadcrumb menu
  • Search form
  • Core menu options:
    • Accessibility (has a sub-menu)
    • Services (has a sub-menu)
    • Contact

In short, the main header needed to show the same content at all screen sizes.

One thing I was comfortable with losing at small sizes was the council logo. Hantsweb is the brand, as long as that remained, the council logo was optional. Besides, the council logo is in the footer anyway.

Finding a better way

Displaying the breadcrumb menu at all sizes was simple. I just needed to remove the mmenu attributes from the list and delete the button. A couple of tweaks to line-height and it was all good.

Adjusting the main header bar was going to be harder. With three distinct areas (logo, search, menu) the layout seemed clear. For larger screen sizes (>=37.5em):

  • [logo] – [accessibility, services, contact] – [search]

For smaller screen sizes (<37.5em):

  • [logo] – [search]
    [accessibility, services, contact]

But how to achieve such a switch at different sizes? Flexbox to the rescue!

Using flexbox, I was able to specify with CSS the space available to elements. I was also able to change the display order (menu after search on small screens). This got me my core layout with just a few lines of CSS.

It also allowed me to remove redundant CSS and HTML too – a win. But it looked a bit ugly.

Unpolished and clunky was all I could see. The first thing to do was sort out the spacing of the logo and search form.

Then, concentrate on those menu options. They just looked lost and out of position. Setting them to take up a third of the space and center the text helped. I also opted to reduce the size of the text for these options.

anav-top

With these changes in place, I felt much happier with the navigation.

The complete CSS, for all device sizes:

.global-header{
   display:flex;
   flex-wrap: wrap;
   flex-direction:row;
   justify-content:space-between;
   align-items:center;
   padding-top:0.5rem;
}
.global-brand{
   order: 0;
   flex:0 1 40%;
}
.global-search{
   order: 1;
   flex:0 1 60%;
}
.global-nav{
   padding:0.5rem 0;
   order: 2;
   flex:0 1 100%;
}
.global-nav li{
   width:33.3%;
   text-align:center;
   font-size:0.875rem;
}

Wrapping it all up

What I want to achieve is a more obvious navigation for our users. If I can also cut out a jQuery plugin and lose 36kb of JavaScript and 40kb of CSS, even better.

This navigation model will force us to take a critical look at what we present to users. It doesn’t allow for laziness or just making lots of navigation options. Focus on the user and their tasks, and create navigation to suit.

Sidenote: I wrote this whole blogpost in Hemingway.app. The instant feedback from the app means this article has a reading age of Grade 5. No hard sentences to read.

Leave a Reply

Your email address will not be published. Required fields are marked *