How to make your site navigation responsive

Following the responsive design approach for your website, at one point you’ll need to think about what to do with your navigation element(s). Since responsive web-design became a ‘thing’ a few patterns have developed on how to deal with site navigation. As the digital real estate is limited on smartphones, also the navigation concept of websites and web-applications needs to be redefined. How to make your site navigation responsive? Let’s take a look at some popular sites to illustrate the benefits and drawbacks of their solution to the navigation problem on mobile devices.

If you like this article, give it some sharing ❤️

Browsing through sub-menus

Microsoft.com, like most sites in this article, simply hides the standard menu. Instead a well-known menu icon is used which indicates the menu functionality. This is probably the best solution for sites with a lot of content. However, the way the menu is being displayed requires some attention as it’s very easy to clutter the screen.

Microsoft

One problem I have with the way Microsoft displays the menu is the depth of the menu. While having lots of submenus is no problem on devices with a high screen resolution, it really doesn’t work on smaller devices. Displaying the second level might give the user a menu filling the whole screen. As an effective solution I would recommend to show only the first level in the menu and display the according sub-menu only on the specific sub-page. Or not at all.

Removing the noise!

Tattly.com – designing and shipping ‘designy’ temporary tattoos – does just that. Visiting the site with bigger devices gives you sub-categories and on a smaller devices they are simply hidden. The only downside with this concept is that the page can get pretty long and you don’t have a possibility to see just what you want to see, for example just display “Black & White”-tattoos.

Tattly

Smashing magazine solved this issue in an elegant way by displaying their sub-categories within the content of the site.

Smashing magazine

Reduce navigation elements

If you have a relatively small site the solution can be much simpler. The easiest ways to use space more effectively is to focus only on the most important navigation elements (and remove the rest), reducing some decoration and simply rearrange them. Dressresponsively.com – get your geeky responsive fan shirts here – handles their navigation that way. They gracefully reduce paddings to other elements and between items. At a certain width the remove the “Home”-link, and on very small devices all decorations of the menu are removed.

dress responsively

Another simple solution for a small site is to transform your menu into a standard select-box. It is a quick fix and it works. Five Simple Steps – a small, independent publisher of practical design books for web professionals – chose this approach.

Five Simple Steps

Conclusion

Making your menu responsive is fairly easy, but it gets harder the bigger your site grows. At one point you’ll have to think about solving the issue already on bigger devices to solve it on a smaller one (and avoid a massive difference in layout across devices). While the most simple solution might seem as a quick fix, it might not be a nice experience for the user in the end.

Please share great examples of responsive navigations in the comments!


Sebastian Gräßl is an all-round web developer with a keen eye for web design. On a quest to write more about what’s going on in the community, with a special focus on frontend design and development, he wrote this guest post for Usersnap.

If you like this article, give it some sharing ❤️

Feedback on Responsive Web Design

Usersnap is the easiest way approach
to set up QA for your reponsive web design.

Give it a try!