90% of adults in the USA have a Smartphone. Of them, 67% check their phones for emails, messages, calls or alerts even when there is no notification of the same.
44% sleep with their phones near them so as not to miss any message, call or important update and 29% say that their life is impossible without their phone!
All these things have made it very important for website owners to make their sites compatible with different screen sizes. Responsive web design is the new trend of this market that makes a website available on different types of devices. With the increased users of mobile devices, it has become imperative for all website owners to make their sites responsive to maximize their reach. For example, check the site https://hashtag17.com where the content remains intact but the layout of the site changes according to the screen resolution.
While responsive designs make it easier to approach users, but it brings many challenges as well. One biggest challenge that comes with it is responsive navigation menus. There is ample space in the desktop screen to support multi-layered menus. But the space on a mobile screen is limited and it gets difficult to adjust the same content in precise and clear manner as well as maintain its usability. The following are some tips to help you with responsive navigation menus:
1. Identify the content you want to be displayed
The first thing to be decided is which content you want to display on the mobile screen. Since space is limited, you need to identify content that is more important for your users. Many things influence this decision such as the purpose for which they use your site and the situations in which they access your site. The idea here is to use only important content and drop the ones that are unimportant. There are two ways of doing this which are explained below with the help of examples:
The first example is of The Sweet Hat Club website. The developer of this website has identified the content that he wants to display on the mobile version. It shows only the important items in vertical list instead of showing everything in horizontal line. The "Join Us" button is given priority whereas the Twitter and Facebook buttons have been removed.
The second thing that can be done is placing the content that is most relevant at the top. One great example in this regard is the website of President Barack Obama. The focus of this website is to collect support and donations for the election campaign of Obama. The mobile version of the site focuses on donation button whereas the desktop version has other content as well.
2. Creatively use limited space
It is evident that space is limited on a mobile screen in comparison to desktop. The challenge here for designers is to reposition the design layout of the website such that all relevant content gets displayed, keeping the feel and design intact. One great example is the website of Oliver Russell. The navigation and header menus are rearranged and everything has been displayed systematically, like the words of header menu are rotated 90 degrees to adjust with the limited size.
3. Arranging dropdown menus
Dropdown menus can help a great deal in structuring the complex contents of websites on mobile devices. Normally such websites have layers of dropdown menus and the developers need to be very cautious while structuring them on the limited space of mobile screen. The thing to be noted here is, there are no hover effects on mobile screens. One good example to understand the arrangement of multiple layered dropdown menus on mobile screen is the website of Microsoft. In the mobile version of the website, no navigation menu is displayed. Rather a small icon has been provided on top left of the screen and it is when the users click on that icon that the first layer of menu drops down and when users click on any item from the first layer, the second layer of menu drops down, making it easier for the user to navigate the site on mobile.
4. Repositioning navigation menu
You can also try repositioning the navigation menu on mobile screen. But you need to make sure that it does not confuse your viewers. It needs to be the best possible solution for positioning menu on the mobile screen. It is best for sites having heavy content. The website of Boston Globe is a great example in this regard. The aim here is to keep the navigation user friendly. The content layers are split for this purpose. The users first choose any item from the first layer which takes them to the site. From there, they get the second layer option which will display the content related to the chosen category.
5. Welcome visitors
If you want your visitors to have a look at your website before scrolling the navigation menu, you need to place the menu at the bottom of mobile screen. This way the visitor will have to first search for navigation menu and he will be forced to have a look at the content of your website. Brickartist.comis a good example in this regard. The desktop version has a clear navigation menu that has been shifted to the bottom in the mobile version. Hence, the user will first have a look at the content and header part, after he will decide what to do.
6. Discard the navigation menu
If your website does not have any complex content, you can opt to completely abandon the navigation menu. The website of Happy Cogis a great example. The desktop version has navigation menu with main content items or you can view the content by scrolling down the site. On the other hand, there is no navigation menu. The users have to scroll down to view the content.
7. Use of visuals
Visuals are a great way to interact with the visitors of the site. It can be understood with an example of the website of Mobile Web Best Practices. There are different categories on the website that are represented by icons as well as titles. The categories are also listed below header but in the bottom they are represented by icons that are quite prominent in comparison to content. The mobile version of this site has just icons representing categories. The navigation menu has no place in the mobile version. Even then, the categories are visible clearly and icons are used tactfully.
The above mentioned are some of the best practices for handling navigation in responsive designs. The aim is to make user convenience in navigating the website a priority. Following these practices will help ensure lower bounce rates, and better conversions which would also translate to repeat businesses and a good brand reputation.