As responsive design grows more and more popular, it’s hard to come across a website which isn’t responsive; although, when you do you sometimes can’t help but be a little bit disappointed. Getting the navigation right on responsive design can be tricky and can sometimes leave users – particularly those on mobile devices – at a loose end.
So, with it’s ever growing popularity, it’s well worth looking into the many ways to take care of navigation for smaller screen sizes to find the one that’s right for you. Below we will be taking a look at some of the popular techniques and showcasing a few examples used amongst some popular sites.
Toggle
Toggle navigation includes a menu icon which, when clicked, exposes a drop-down menu. This technique gives more room for page content, hiding the menu away until it is needed. However, there are two different styles to this…..
1) Overlay
The first style is called an overlay. It drops the menu down over the website, leaving ample room for page content.
2) Block dropdown
The hidden menu, when released, pushes the site’s content down, creating a blocked look.
Both toggle styles are definitely ahead in the popularity contest, our treasured Starbucks and Spotify among the supporters to name a couple.
But nothing is perfect, there is one small drawback. If your website is one with an extensive amount of links it will mean any users will have to scroll down the menu, this may not be very easy for them to do – potentially causing them to get frustrated and switch to a different website.
Footer
The footer technique holds a header which provides an anchor link, this takes visitors directly to the bottom of the page which is where the navigation links are located. It can clear up a lot of room for page content, but is it practical? Many visitors may complain that it is disorienting, making them jump from one end of the page to another.
Hidden shelf
This hidden shelf menu, sometimes called a drawer, is generally opened by a “hamburger” icon (shown in the picture below). It’s perfect for a website containing a large amount of navigation links.
Select menu
If someone is comfortable with the internet chances are they’re familiar with the select menu, a simple click bringing down the list of options for navigation. But there’s a reason everyone is familiar. They all look the same! Proving troublesome to customize.
However, just because this menu isn’t so pretty doesn’t mean to say it doesn’t have its advantages. It works on all browsers, which is pretty handy right? And as long as it works I’m sure visitors, especially mobile visitors, will be content.
Of course these are not the only options out there, just the most commonly used, so don’t worry if you think none of these are for your site. Or maybe you’ve found the perfect option within this list? Whatever the case, you better decide fast so your website navigation is ready for your mobile visitors to appreciate.