Every once and a while, we like to dial in on one specific area of design and give it a thorough looking at, prod it with sticks and generally see what’s what. Today we’re going to be taking a peek at the state of mobile web navigation.
Though web navigation comes in a few standard iterations — the horizontal nav and the vertical nav — with a few exceptions for people that are pushing the envelope, the reduced real-estate of the mobile screen has required designers to come up with a number of interesting ways to handle laying out those desktop menus so that they are friendly to the mobile viewing space. This is especially true of large or complex menus that don’t easily reduce.
So stick around, and we’ll go through some of the solutions modern web designers are using to get the job done.
Stack ‘Em Up
The simplest mobile nav that also works well is one that takes your individual menu elements and stacks them one on top of another once the screen becomes narrow enough. For vertical desktop menus, this requires relatively few changes for the mobile version, and transitioning from a horizontal nav is also pretty simple. This solution is only good for menus with a smaller number of items, because if the stack of items becomes too long, it can be off-putting to the viewer. For a slightly different look and better use of space, try stacking in a grid (two stacks side by side) rather than a single stack.
No You See ‘Em, Now You Don’t
A stacked menu still takes up precious vertical real-estate, which is at a premium on the mobile screen, so another solution is to hide the menu on smaller screen-sizes and add a toggle button to turn it on/off. This let’s you fully use the space you have for more important elements until the visitor actually needs the menu. For some added spiffyness, add transitions or animations to your button.
Slide It On In
An extension of the toggle method, sliders are also known as off-canvas navigation. The sliding nav exists off of the screen entirely until a button triggers it, and then slides onto the screen, pushing what’s on screen slightly off. While functionally not very different from a straight toggle, this is a very attractive effect, and makes your site feel dynamic and alive.
Stick It In The Footer
This method also uses a button to replace the main nav, but instead of having it toggle the menu on and off, it moves the menu to the footer for mobile devices and then has the button jump down to the footer menu when clicked. This allows you to always have the menu on the page somewhere, reducing the likelihood that someone will miss or not understand they need to click to make a menu appear.
And there you have it! There are some other methods in use we wouldn’t recommend, particularly the use of a multi-select box. These are the things you often see in forms which let you select one of a choice of items. Functionally, the idea is great, as it reduces all of your menu items into a single area, but from design standpoint, they are very difficult to make look good because many browsers override your styles with their built in styles for multi-select boxes, and we definitely don’t want that.
Want your mobile websites to have effortless, functional and attractive menus? Contact the team at Solamar and we’ll make sure you navigate with the best of them!