5 Rules for designing responsive navigation menus

The idea of responsive web design is that page design and development should respond and adjust according to user behavior and device environment (System platform, screen size, screen orientation, etc.). Responsive Responsive design allows you to create a unique user experience on different platforms at the same time, as long as the minimum maintenance work.

There have been a number of articles on responsive design that help us understand and dissect response web design learning guides and tutorials, revealing the role of media queries, while providing some exciting, responsive design collections.

Let's start with the macro response web design and focus on the more challenging "responsive navigation menu design". The Desktop edition provides enough screen space to display a multi-level navigation layout, however, the smaller the screen, the more difficult it is to display the same content clearly. Here are five rules that allow you to easily and efficiently design responsive navigation menus on both large and small screens.

First, display the content according to the priority level

Perhaps, this is the most effective way on a small screen device, highlighting different content based on the user. Under what circumstances would a user use a mobile device to access a Web site? What are their mission objectives? What content do we need to provide to satisfy? Here are two examples of simplifying site navigation on a mobile device based on the content priority.

1. Show only high priority content

You should prioritize content on smaller screen mobile devices and remove those small columns.

The Sweet Hat Club site optimizes content for mobile devices and reconstructs navigation menus instead of horizontal display of all columns (item), and mobile versions of navigation only display several high-priority columns vertically, although Twitter and Facebook connections are removed But the join connection is upgraded. It's not an ordinary text connection, but a colored button that causes attention.

2. Display high priority content at the top

Put the most important content on the top

The Barack Obama website focuses on fundraising and Obama's election. The computer version of the homepage displays 3 items at the top, of which two are about the campaign news. On the mobile version, the entire space is covered by the donation button, followed by other people's attention. Information about Obama and his campaign was placed at the bottom of the page.

Two. Use creativity to deal with limited space

Here is the fact that the screen space of a mobile device is significantly smaller than that of a desktop version. The challenge for designers is to rearrange the screen size and find all the relevant content. At the same time, the design should allow the customer to be visually and feel consistent, although it is to visit the same website. ，

1. Adjust the design to fit the available space

A flexible design will allow you to maintain the same vision & feel on different devices.

The best job of the Oliver Russell website is to maintain the same vision and feel at different screen resolutions. Both the head and the navigation menu can be easily refactored without discarding any useful resources. Just flip the different content 90 degrees, allowing the color background to squeeze more tightly.

2. Some designs for all screens

Choose a design that you can easily adjust.

The flip Web site selects a very simple and intelligent navigation menu. Keeping a clean layout and clear colors on all devices, and different color codes on desktop versions, is a clever way to turn a simple text link into a button. Navigation menus can also work perfectly on mobile devices because the color area guarantees imprecise finger ranges.

Three. Drop down menu

Using the Pull-down menu to organize complex content is a very convenient and popular way. Often, complex web sites use multiple levels of pull-down menus. On a smaller screen, not only that, on devices that rely on touch-response, the Pull-down menu should be used with caution. There is no suspension effect, and screen resources may be very limited. Here are two Web sites that successfully use a Drop-down menu on a mobile site in a very practical way.

1. Insist on using the structure that everyone is using

Remember: Suspension effects are not working on mobile devices.

Microsoft's new Web site is a classic example of how to arrange complex content on small mobile devices. By default, navigation menus are not displayed at all, and the first content layer opens only when you touch a small icon specified in the upper-right corner. When touching one of the columns, the second layer of content will gradually unfold, giving the user a very clear navigation of content.

2. Provide clear and friendly finger operation connection

Make sure the connection is large enough to ensure an inaccurate finger size.

The Starbucks website is also a successful example of how to use the Pull-down menu efficiently on mobile devices. Also, by default, menus are hidden behind small icons. This will not affect other content interfaces. Once the user needs to use navigation to link the site, they simply click on the Small icon and the menu opens. Make sure that the connection area of the different entries is large enough to ensure the touch area of the finger. Once a piece is selected, the menu disappears automatically.

Four. Change position for navigation menu

Another way to make your navigation menu fit into a small screen is to use a familiar structure. You need to make sure you don't get confused by the user in such a way, but it may be the best way to adapt to different devices.

1. Distributed Navigation website

Provide content in an orderly manner and do not display all at once.

The Boston Globe website provides a lot of information. Not only the first content layer, but even the second content layer contains many entries. Their solution is to navigate the user as simply as possible on the mobile device, so the navigation is split into two layers of content to display. When a user selects an entry on the first level, it goes to the appropriate site, and then there is a new Drop-down menu on the new site, which is a detailed classification of the second tier.

2. First of all, welcome your visitors

Place the navigation menu at the bottom of the site, forcing your visitors to browse through the site before deciding what to do next.

Brickartist.com is a very interesting example of how to rearrange the navigation menu of a Web site on a mobile device. In the Desktop edition, there is a very clear and prominent navigation menu. However, on a small screen mobile device, the navigation menu is moved to the bottom of the site. In this way, visitors have to look at the head and the middle content before deciding which menu to click.

Five. Discard navigation menu

You can also completely abandon the navigation menu. Of course, this is just a choice, if your site content is not so complex and visitors can easily find relevant content.

1. Guide Visitors

If the content is simple and clear, you may not need a navigation menu.

When users access the desktop version of the Happy Cog Web site, users have two ways to access, one from the navigation menu to select a category for access, and the other is to scroll down to gradually view different content. On a mobile device, the user can only use the second method. It then categorizes each content and provides a more detailed connection.

2. Visual effects

Use visual effects to let users find out how they are accessed.

The desktop version of Mobile Web best practices also shows a very clear navigation menu. Each classification is accompanied by a specific icon, in addition to the corresponding name. In addition, there will be a clearer category icon below the text. On a mobile device, the top text menu disappears, and users navigate the site by using a large icon. The site uses two different styles of navigation, however, the classification is clear, style and icon consistent, to bring users a certain visual effects.

Original: Usabilla compilation: CSDN