• Follow us on Twitter @smoostercom
  • Folge uns auf Facebook /smoosterde
  • Abonniere den smooster RSS Feed

6 Tips On Finding The Right Responsive Menu For Your Next Website

2014.07.03 by 

6 Tips On Finding The Right Responsive Menu For Your Next Website

An overview of different mobile menus and what to pay attention to during the design process.

It is no longer enough to have a website that looks good and is easy to navigate when displayed in a fixed size on a desktop computer. The design and contents of your website need to fit devices of different sizes including desktops with big screens, laptops, tablets and smartphones. What you need, therefore, is a responsive web design (RWD) implemented with CSS and Javascript.

One of the most important things in RWD is choosing the right navigation. But whatever your choice, designing a mobile navigation from scratch according to the concept of "mobile first" is often easier than recycling an existing desktop navigation. You can find out more about the difference between responsive web design and a mobile website (incl. an infographic) here.

Most sites use various display options and combine them according to the requirements of the site. You can find a list of the common types of responsive menus here, as well as several things that you should pay attention to when designing the navigation.

“Do-(almost)-nothing” navigation

In this scheme, the space around each navigation point is increased to facilitate navigation by touch screen on mobile devices.

In this scheme, the space around each navigation point is increased to facilitate navigation by touch screen on mobile devices.

Advantages:

  • Easy to programme.

Disadvantages:

  • Long navigation points complicate the presentation;
  • The main part of the website often slips out of focus;
  • Only possible with single-level navigation.


This simple scheme is particularly suitable for short menus with short words. With larger navigation structures, you can work through the following questions to choose the right navigation for your responsive design.


Where is the navigation?

Footer navigation

A link in the upper section of the website to the navigation takes the visitor directly to the footer where they will find the menus. It’s basically two navigations. For a predefined screen size, the upper navigation fades out and the footer navigation is displayed instead.
It is important to include a link back to the upper section of the page in order to facilitate mobile navigation.

A link in the upper section of the website to the navigation takes the visitor directly to the footer where they will find the menus. It’s basically two navigations.

Examples:

MUUMILAAKSO.TAMPERE.FI

ANEVENTAPART.COM


Advantages:

  • The visitor isn’t distracted from the contents;
  • The visitor has links to subpages even when you are at the end of a page;
  • Suitable when you have many navigation points.


Disadvantages:

  • Confusing for some visitors, as footer navigation is uncommon.


Upper navigation

Responsive navigations are more often placed in the upper section of the website. The following navigation schemes all have upper navigation.


How does the navigation open up?


When the number of navigation points is small, you can have the menu items on a tablet or smartphone displayed at once or upon activation of the menu bar. When you have a larger number of navigation sub-points, however, it makes more sense to hide the navigation so that the visitor can see enough of the website when they arrive at the page. Most of the websites I know that show the navigation points do not have more than five of them.

Whether it’s a good idea to have a button that activates the navigation depends on each project you have. It’s important to allow the visitor to hide the navigation again by, for example, tapping the same or a specifically marked button.


Toggle, accordion or pop-up navigation

In this scheme, the navigation is activated by a button in the upper section of the website and then as it opens up, the contents of the website are shifted downwards.


In this scheme, the navigation is activated by a button in the upper section of the website and then as it opens up, the contents of the website are shifted downwards.

Examples:

ist-uv.jp

ERIKFORD.ME

ROUET.JP


Advantages:

  • The visitor isn’t distracted from the contents;
  • Suitable for a large number of navigation points;
  • Since the desktop navigation is just a visual variant, only one navigation needs to be kept up to date.

Disadvantages: 

  • Nothing to worry about during the design process.


Off canvas navigation

This navigation scheme has gained popularity through the mobile version of Facebook. As in the previous scheme there’s a button, at the top right or left edge. When you tap it, the navigation appears from the side where the button is and the contents of the website are shifted sideways.

This navigation scheme has gained popularity through the mobile version of Facebook. As in the previous scheme there’s a button, at the top right or left edge.

Examples:

PACKDOG.COM

MASHABLE.COM

YUKIAO.JP


This scheme has the same advantages and disadvantages as the previous toggle navigation.


Overlay navigation

This navigation scheme looks familiar to many users, as it reminds them of the presentation of sub-items in classic desktop navigations. Here too, the menu is activated by a button and appears from the top or the side over the contents of the page. This is the navigation scheme that we ourselves chose for the new design of smooster in February 2014.

This navigation scheme looks familiar to many users, as it reminds them of the presentation of sub-items in classic desktop navigations.

Examples:

ALISTAPART.COM

PHILIPHOUSENYC.COM

OHAKO-INC.JP


This scheme has the same advantages and disadvantages as the previous two schemes (toggle and off canvas).


Drop down menu

When activated, the navigation scheme presents navigation points as a drop down menu within the current operating system. Its appearance can therefore not be modified.


When activated, the navigation scheme presents navigation points as a drop down menu within the current operating system

Advantages:

  • Easily recognizable;
  • Automatically touch-optimized, as it draws on the display style of the operating system;
  • The visitor isn’t distracted from the contents;
  • Suitable for a large number of navigation points;
  • Since the desktop navigation is just a visual variant, only one navigation needs to be kept up to date. 


Disadvantages:

  • Its appearance cannot be modified;
  • The possibility of displaying a multi-level menu is limited, because a hierarchical structure cannot be built with drop down menus; however, blanks and special characters can be used to indicate hierarchy;
  • Confusing for some visitors, as the navigation pops up in the display style of their device.


How is the navigation structured?

There are different ways to structure navigation points in both single-level and multi-level navigations.


The list

Whether left-aligned or centred, the list is the most common display for both single-level and multi-level navigations.

Whether left-aligned or centred, the list is the most common display for both single-level and multi-level navigations.

Examples:

KIEFERORTHOPAEDIE-RUEDERSDORF.DE

HIRONDELLEUSA.ORG

INCREDIBLETYPES.COM


Lists have no particular advantages or disadvantages other than those of the navigation scheme chosen, as explained in the previous section.


The grid

Instead of lining up the navigation points in a list, you can put them into a grid. The number of columns can be adjusted according to the size of the screen.


Instead of lining up the navigation points in a list, you can put them into a grid. The number of columns can be adjusted according to the size of the screen.

Examples:

PASSIONE.MAIN.JP

WORLDWILDLIFE.ORG

POSTALMUSEUM.JP


Advantages:

  • Navigation points can be displayed compactly.

Disadvantages:

  • Unsuitable for long navigation points;
  • Unsuitable for multi-level menus;
  • With an odd number of points you either have an asymmetrical display or a point taking up an entire row;
  • A subsequent addition of points shifts the structure of the other points.


Showing and hiding sub-points

All navigation schemes in the section “How does the navigation open up?” allow the display of sub-points. Lists are used for multi-level navigation. When you have a large number of sub-points, it’s possible to activate or deactivate them. Since mobile devices are used with touch screens, it’s not possible to show sub-points with hover effects. The same effect  as in the display of pop-up navigation is therefore used here.


Lists are used for multi-level navigation. When you have a large number of sub-points, it’s possible to activate or deactivate them.

Examples:

WESTBUILD.COM

MICROSOFT.COM 

LINTJES.NL


The advantages and disadvantages are the same as those of toggle, accordion or pop-up navigation.


Conclusion

Almost all the navigation schemes above can be adapted freely to the design of your website. With the wide range of possible structures, you can find the right navigation scheme whether you have many or few sub-points.

Mobile first: You can build the best-structured responsive menu if the navigation structure on all devices is taken into account at the beginning of the design process.

The reason is that it depends on the existing structure of a website, whether it can be optimised later as a RWD or it’s necessary to redesign it. Please contact us for more information about responsive web design for an existing website or the implementation of a new responsive website with smooster.


Finally I have made a list of the important points that you should pay attention to during the design process of the responsive navigation:

  1. How many points (and sub-points) does the navigation have? Is this likely to change during the life of the website?
  2. Is the navigation single- or multi-level?
  3. Will the navigation be modified often? Will more points be added later?
  4. Are the navigation points large enough? Is there enough space around each point? Are they easy to navigate by touch screen?
  5. Is the length of each navigation point appropriate for small screens as well as desktops?
  6. Is it possible for the visitor to close the active navigation or return to the start of the page?

The examples of websites in this article come from the following three sites, where you can find a growing selection of current responsive web design, which can be a source of inspiration for your next RWD project:

MEDIAQUERI.ES

RESPONSIVE-JP.COM

AWWWARDS.COM/WEBSITES/RESPONSIVE-DESIGN

Note: The structure of the Japanese website is very similar to that of mediaqueri.es and thus easy to navigate without any knowledge of Japanese.

Is there a display style that you prefer? What are your experiences with responsive navigation design? 


Background image by DEATH TO THE STOCK PHOTO

Example websites: Gonzales Zahntechnik, IST METZ Japan, Kieferorthopaedie-Ruedersdorf - responsive design development: SMOOSTER

BACK
comments powered by Disqus