Question

Responsive navigation: dynamic menus on mobile devices

Answer 1

Responsive navigation: simple solutions for users
Different navigation concepts
Inciso: the hamburger menu
Where should the menu be placed?
How is this type of navigation menus structured?
? Do nothing?
Navigation via drop-down menu
Web browsing by sliding menu
Off canvas navigation menu

---

Responsive navigation: dynamic menus on mobile devices

With the passage of time, responsive web design has become one of the fundamental aspects in the creation of web pages, regardless of whether it is about the realization of online stores, news blogs or corporate profiles. In this sense, potential customers no longer surf the net, as they used to do, with their desktop or laptop, but rather the use of mobile devices such as smartphones or tablets is more and more pronounced. This does not highlight anything new, but has already been announced for years due to the growing sale of mobile terminals and the use of the Internet in them. In the following sections we explain why optimization for mobile devices is part of the standard repertoire of factors for success in online businesses..

In this regard, it is clear that in the digital world, which is increasingly oriented towards mobile devices, only those that offer their users maximum usability on all types of devices are able to prevail. One of the main aspects of optimization for mobile devices is to have the corresponding responsive navigation, also known as responsive navigation because of its nomenclature in English. 

Responsive mobile navigation is a challenge for web designers: the behavior of users on small touchscreens is not comparable to that of computer screens where the mouse cursor makes it easier to navigate. navigation. To make the user experience just as simple and satisfying, it is necessary to spend a lot of time achieving a responsive navigation menu when developing a web page adapted to its use on mobile devices.

In the same way that user behavior has changed, so have their expectations in recent times: both users and potential customers have become more impatient. If mobile navigation does not allow them to go from A to B without difficulties, they change pages quickly, which affects both traffic and sales volume for the company in question..

Responsive navigation: simple solutions for users

Good web navigation is the central axis of a web page, since it becomes the tool through which the user finds the information that is relevant to him. The control elements must therefore function effectively, the structure must be understandable and explanatory and also allow intuitive handling. The particular challenge of responsive navigation menus is, above all, the lack of space and the touch input method typical of mobile devices. However, today there are some responsive solutions that allow clear and easy-to-use web browsing.

The basic idea behind the responsive design is that both the content and the design of the web pages adapt dynamically to their respective conditions and the size of the terminal. The same applies to responsive navigation menus. 

In most cases it is appropriate to opt for the? Mobile first? Approach. to create web pages. Mobile optimization puts the design concept in the foreground: the conception, usability and performance of the mobile version take precedence, while in second place is the adaptation to be able to be displayed on desktop and laptop computers. Adapting existing web browsing to mobile devices is often a complicated task that requires great efforts and in most cases does not meet the expectations of the users of these terminals..

Before you start planning and building a responsive navigation menu, you need to answer some basic questions. The first thing to determine is your position on the website itself.

Where should the menu be placed?

The most common models consist of placing the navigation menu in the footer or at the beginning of the page. In the first mode, the user finds at the beginning of the page only a link that leads to the navigation menu in the footer, where they can consult each of the points of said menu.

The navigation menus that appear in the footer are not always characterized by ease of use, but, on the contrary, such placement can lead to confusion. However, the focus is on the content of the home page, which, depending on the purpose of the web page itself, can become a huge advantage. More common, on the contrary, is to find the navigation menu at the top of the page. This classic layout of responsive web design is the one that users are most familiar with.

How is this type of navigation menus structured?

The possibilities for structuring this type of menu are varied. List and grid navigation menus are among the most widely used methods.  

The classic display by means of a list is used in the case of navigation menus with one or more functions. The advantages are its ease of preparation and that they respond to the customs of the users.

Screenshot: marketingconinternet.com (http://marketingconinternet.com/)

A grid navigation menu is used when there are few navigation points. These are displayed next to each other on the grid and the number of columns depends on the current screen size. If you want to create a grid with two columns, the number of points has to be even to avoid asymmetric display (see screenshot).  

Screenshot: worldwildlife.org (http://www.worldwildlife.org/)

Both in one variant and in the other, some points can be added or deleted.  

Different navigation concepts

The fundamental question is: how do you open the navigation menu adapted to mobile devices? The way the user views the navigation menu determines the concept. The display options are extensive: the menu is directly in the field of view or is opened by clicking, scrolling or based on the content. Here are some examples to illustrate it.

? Do nothing?

One of the simplest concepts of navigation on mobile devices takes place under the slogan "Do nothing" in Spanish "do not do anything". In this case, the original web browsing is only slightly adapted, while, for example, it increases both the distance and the different navigation points and can be used on smaller touch screens. Such a solution is relatively simple in terms of its implementation and implementation and requires only some programming. However, this variant is only suitable for web pages made up of small menu structures and few navigation points. If these menu structures and navigation points are expanded, it is necessary to resort to a multi-level navigation menu to safeguard ease of use.

Screenshot: paidtoexist.com (http://paidtoexist.com/)

Screenshot: paidtoexist.com (http://paidtoexist.com/)

Navigation via drop-down menu

Drop-down menus or overlay are one of the classic models of responsive navigation. These evoke the navigation structure on desktop computers, thus earn the trust of users and are often a very select navigation concept. In these cases, the menu is activated by clicking on the corresponding symbol or button and the content is thus defined.

Screenshot: marketingdirecto.com (http://www.marketingdirecto.com/)

Web browsing by sliding menu

The most popular type of navigation is the so-called sliding menu navigation, although it is also called an? Accordion? or slide. In contrast to the drop-down menu, the sliding menu variant does not hover over the content, but instead drags it down. Creating this type of menu is somewhat more labor intensive, but it is scalable and helps save space. Due to the possibility of integrating additional navigation points, this method becomes an elegant solution for displaying both simple and complex menus.

Screenshot: getbootstrap.com (http://getbootstrap.com/)

Off canvas navigation menu

In the case of this solution, the responsive navigation stays outside the usual visible area. The menu is not integrated into the layout, so off canvas navigation is a space saving solution due to the fact that the menu is not visible in the window. This appears when you click on the menu icon , after which its structure becomes visible. This option is suitable for large navigation hierarchies that have different submenus . An example of this type of menu is found in the mobile version of Facebook. Because Facebook is a very widespread mobile application, this navigation model is now much easier than before. Once the user clicks on the menu symbol, they know what to expect.

Screenshot: disney.com (http://disney.es/)

Deciding which is the most suitable navigation menu concept for each project depends on many factors. What is clear is that there is no single solution. The concepts of web navigation menus mentioned above are a good point of reference, although they should be adapted to each of the concepts and projects. At the beginning, it is very important to create the navigation structure or make a list of the different categories. After that, a decision can be made about the menu itself and the points to take into account.

Inciso: the hamburger menu

The well-known hamburger icon is a classic on mobile devices and therefore worthy of mention. The small symbol with three horizontal lines and arranged in parallel has become a universal symbol for hiding menus on smartphones and tablets.

One of its main advantages is its recognition, since this icon continues to be the subject of controversy among web designers. A controversial issue related to it is the concept of usability. Critics often speak in this sense that it hides the options that are offered and that it increases the interaction costs.

The icon was conceived in the early 1980s for the Xerox Star, one of the first workstations with a graphical user interface, although it was also part of the first version of Windows.

---