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. In this article you will find 5 examples, one of which may be just right for you.

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.

The spin media website fit for mobile screen size

The spin media website fit to mobile screen size with the menu revealed

Spin media

2) Block dropdown

The hidden menu, when released, pushes the site’s content down, creating a blocked look.

The Starbucks website fit to mobile screen size

The Starbucks website fit for mobile screen size with responsive navigation shown

Starbucks

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.

The contents magazine website fit for mobile screen size

The contents magazine website fit for mobile screen size with the menu revealed

Contents magazine

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.

The Red Bull Music Academy website fit for mobile screen size

The Red Bull Music Academy website fit for mobile screen with responsive navigation shown

Red Bull Music Academy

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.