Navigation is a critical element of responsive design. This is because, the measure of how useful a responsive website design is, is to a large extent by the ease of transition between mobile and desktop layouts.

Effective responsive navigation would require smooth resizing to lower resolutions and then upsizing to larger screens such as those of desktops.

What kind of navigation is useful for responsive designs?

There are different trends and techniques in the management of navigation in websites.

Minimalist approach to navigation

This approach to navigation is considered to be minimalist as there is minimum work done on the navigation so as to ensure a smooth, clean, switch. The switch in navigation is not abrupt; rather delicately done as the screen size undergoes changes. Hence, the approach is such that the minimum kind of reworking of navigation elements is done to bring about maximum, elegant and subtle effects. The navigation links are sized and kept to a minimum, and fitted nicely into the page. This approach can be used for websites which want to keep focus on elegant and simplicity and are choosing to promote some select features. For example the website CrossTrees shows very simple navigation menu, focussing on essentials and keeping the major space for the showcase of image content. The shifts the user’s focus to the main theme which is what they want to convey, and does not let the user lose focus. Besides realty sites, artists, designers and photographers amongst others can use such websites.

As you can see this website emphasises minimalism; the focus is on the image and the tagline which is “Townhouse Office Space To Let in Glasgow”. The ease of access to the navigation bar is minimised, yet clear.

Another example is a web designing website Hashtag17 which also offers multiple other services. The challenge is to showcase all the services offered in a single page, without cluttering the page. The technique adapted by the agency was to show a snapshot of all services at the bottom of the website against a white background which will helps the user navigate to any of the 17 pages from this single area.

The advantage here is that a single look will show the viewer all 17 services offered by this company. The white background provides a no-distraction approach and users can immediately spot the area they might be looking for help with.

When the navigation bar bears the weight of the webpage!

Most responsive websites position the navigation menu at the top. There are clear advantages of doing this such as ease of implementation, no JavaScript dependency and simple CSS. However, this is not the optimal positioning for mobiles where real estate is a challenge. An interesting way of handling navigation in responsive website design is to push it to the bottom of the site, as suggested by author Luke Wroblewski. A navigation bar takes up less space on desktop and so can be placed on top. Moreover, this is where users would look for it too. But on smaller devices, it is ideal to push it to the bottom where it won’t take up much space. The navigation list is placed in the footer of the website or just above the footer. There is an anchor link to it in the header part of the website. This can be done by using absolute positioning and margins as follows:

#access li a {
   padding: 0;
   margin: 0;
   font-size: 16px;
   height: 57px;
}
.container {
   padding-bottom: 549px;
   position: relative;
}
.nav-strip {
   position: absolute;
   bottom: 0;
}

The advantage of this is space for more content in the above the fold part of the website; at the same time, navigation is easier and accessible and discreet. An additional advantage is the user can read the entire content and scroll to the bottom of the page where they find the navigation bar. This will give them more options to click. Other advantages are this approach does not require the use of JavaScript and hence is easier to manage and to troubleshoot. This is method is easier for designing responsive websites as the position of the header and footer (which are fixed) enables easy transition.

The awkward part of this kind of arrangement of the navigation element is that a person needs to jump back and forth, in order to access the links. Hence, it is an awkward kind of interaction, which may be rather cumbersome on mobile and may impede the smoothness of mobile navigating. Another disadvantage is that if a user is not reading the content, he may not scroll to the bottom of the screen and so may miss the navigation bar, and now know where to look for it.

This can be rectified by using the Toggle Menu

Here, the menu slides open in the header itself and gives a clean, elegant look with a show/hide feature. It is easy to code and is a smooth transition. But the challenge is Android may not give such a smooth transition with CSS animations.

A good example of using the Toggle is Starbucks:

Moreover, if the menu is large, it could still take up a lot of space. This problem can be rectified by creating different menus for different devices. An effective way to do this is by using the Responsive Select Menu plugin.

Another method is through the use of the Select Menu approach.

Unlike the other navigational methods, this technique involves the use of Javascript. It makes us of the form property. It converts the menu list into a select element. Though it may be the best performing element in every browser, as they are derived from drop-down menus, designers can find them restrictive on account of difficulty to customize across different browsers. The biggest advantages of these menus in responsive website designs are that they work. Another positive point is that they can be used to control the navigation links when they are in excess; this may be a problem for the TopNav approach. They also free up a lot of space on the web layout, which can be used for web design. Select menus can be tailored to the different devices- different mobile browsers will handle select menus in different ways. This is an advantage for responsive web design and navigation.

An easy way to use Select Menu is through TinyNav, a JQuery plugin.

Include the JS file after you load your version of jQuery, then write the following code:

<script>
$(function () {
  $("#nav").tinyNav();
});
</script>

Add a few lines to your CSS. Hide the tinynav class. Set it to display at whatever breakpoint you want:

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
	.tinynav { display: block }
	#nav { display: none }
}

The drawback is that they may not be as neat and aesthetic as other navigational menu techniques. They are best on simple pages with single page layouts such as that of ApacheCoube.

Content management is critical for efficient navigation of responsive websites. During planning of the wireframe for responsive website, determine which content is required for the desktop and which kind of content are more preferred for the mobile layout. Ensure that only the content which fulfils the specific goals are placed. In this regard, the navigation can follow a similar approach. To streamline the responsive navigation menus for mobiles, ensure that the mobile navigation menu shows only the most important links; less important ones need to be left out. Hence, mobile users can just see what they want on their websites.

You will need to determine what content is absolutely critical to be placed in the part of the website which is maximally observed by people, whether on desktop or mobile and do that.

There are certain key points to remember while working on a responsive website to ensure smooth navigation:

• Uniform designs: Some types of design remain uniform across devices and screen sizes. Choosing such a design is hassle free and you get smooth navigation and can yet be responsive. Flip, a Croatian company uses such a design.
• Drop Down Menus: Drop down menus, specially with a multi-layered effect are easy and effective. They take up minimal screen real estate, and clicking on one button opens up the other sub-buttons in a layered, drop down manner. This style is used by Microsoft.
• Prioritize content: Show only what is necessary and what is really important. Skip the content that is not useful or might be distracting on small screens.
• Use icons: Using clean and simple icons can eliminate the use if large bulky text.

• Adapt your design: Your design should be able to aesthetically adapt to different screen sizes, even if it means they positioning of the design would vary based on the device. The older version of Oliver Russell had a flexible design that adapted according to the screen size.

  

What are the challenges of handling responsive designs on large websites?

Large websites present a different kind of challenge for responsive designs. The simple options are not possible as navigation is pretty complex as the amount of content needed to be presented is pretty large. In addition, there are layers of navigation to be managed and there are many screens to be managed. Developing navigation for responsive navigation in complex websites requires extensive discussion with the staff and needs more fine tuning and discussion on all aspects with clients. The steps to break down this revolve around understanding what a complex website needs to provide its target audience. Therefore the steps include doing audience research to determine the audience expectations as to what they would want to see on the website. This could come to a large amount of content and the kind of content to be presented needs to be carefully chosen. This kind of study and work was carried out in the design of the complex website for hospitals.

One way to design a responsive design for large scale websites is using templates and components. This can be done by dividing the functionality and content variations into smaller components and then testing how each component would look on the small screen. This method of designing was adapted by Quidco that used 40 components to rationalize their content variations. Large scale websites need to be agile with their features. For example, the chat pane in Facebook changes its position based on the viewport size.

E-commerce websites, specially large ones also face a challenge in ensuring smooth navigation. Following certain key steps can help enhance user experience in such sites. One such step is creating a visual hierarchy of products so that users can clearly see products that interest them. Use of more white spaces with minimal clutter is essential. Use clear fonts and right font sizes. Refrain from using long text blocks. Prioritize essential features and put them on top such as the search bar and the shopping cart. Sorting products based on price, relevance or rating should also be easily accessible. Also give importance to areas the customers are likely to need such as the details of customer care.

Handling navigation is an area that designers and developers can keep perfecting to improve user experience. What is crucial is you choose the style you want based on the industry you are in and based on the demographics of your buyers.