Website analysis: five rules for designing responsive navigation menus

Abstract: This article focuses on a more challenging responsive Web design: responsive navigation menu design, which provides five rules, it allows you to easily and efficiently design responsive navigation menus on both large and small screens.

The Responsive Web design concept is that the design and development of pages should be based on user behavior and the device environment (system platform, screen size, screen orientation, etc) make corresponding responses and adjustments. Responsive design allows you to create unique user experiences on different platforms, with minimal maintenance effort required.

Many articles have already involved responsive design. These articles help us understand and dissect the learning guides and tutorials for responsive website design, and reveal the role of media queries. At the same time, it also provides some exciting responsive design sets.

For the time being, we should first release the responsive Web design, focusing on the more challenging "responsive navigation menu design. The desktop edition provides sufficient screen space to display multi-layer navigation la S. However, the smaller the screen, the more difficult it is to clearly display the same content. Five rules are provided here, allowing you to easily and efficiently design responsive navigation menus on both large and small screens.

　　1. display content by priority

Perhaps, this is the most effective method on a device with a small screen, highlighting different content based on the user. Under what circumstances will a user use a mobile device to access a website? What are their access targets? What content do we need to provide? The following two examples illustrate how to simplify website navigation on mobile devices based on the Content priority.

　　1. Only high-priority content is displayed

　　

 

On mobile devices with smaller screens, content should be prioritized and smaller columns should be removed.

The Sweet Hat Club website optimizes content for mobile devices and reconstructs The navigation menu to display all items horizontally. The mobile version navigation only displays several columns with high priority vertically, although the Twitter and Facebook connections were removed, the Join connections were upgraded. It is not a common text connection, but a color button that attracts people's attention.

　　2. display high-priority content on the top

　　

 

　　Place the most important content on the top

The Barack Obama website focuses on fundraising and the Obama Election. The home page of the Computer edition displays three items on the top, two of which are news about the campaign. In the mobile version, the whole space is covered by the fundraising button, followed by other content that people are concerned about. Information about Obama and his campaign is placed at the bottom of the page.

　2. Use creativity to deal with limited space

The fact is that the screen space of a mobile device is much smaller than that of the desktop version. The challenge for designers is to relay the screen regardless of the screen size and find out all the relevant content. At the same time, the design should ensure that customers are visually consistent with their feelings, even though they are visiting the same website .,

　1. Adjust the design to adapt to the available space

　　

 

A flexible design will allow you to maintain the same vision and feeling on different devices.

The best job for the Oliver Russell website is to maintain the same vision and feeling at different screen resolutions. Both the header and navigation menu can be easily reconstructed without discarding any useful resources. Only different content is flipped 90 degrees, allowing the color background to be squeezed more closely.

　2. Some designs for all screens

　　

 

　　Select a design that can be easily adjusted.

The Flip website selects a simple and intelligent navigation menu. Keep the layout clean and clear colors on all devices. In the desktop version, different content will have different color codes. This is a very clever practice, converts a simple text link to a button. Navigation menus work perfectly on mobile devices, as the color area ensures inaccurate finger ranges.

　Iii. drop-down menu

Using drop-down menus to organize complex content is a very convenient and popular method. Generally, complex websites even use multi-level drop-down menus. In addition to the small screen, the drop-down menu should be used with caution on devices that depend on the touch reaction. There is no floating effect, and the screen resources may be very limited. The following describes the two websites. They successfully use the drop-down menu on a mobile website in a very practical way.

　1. Stick to the structure that everyone is using

　　

 

Remember: Floating effects do not work on mobile devices.

Microsoft's new website is a typical example of how to arrange complex content on small mobile devices. By default, the navigation menu is not displayed at all. The first content layer is opened only when the small icon specified in the upper right corner is touched. When you touch one of the columns, the second content layer gradually expands to give users a clear and clear content navigation.

　　2. Provide clear and friendly finger operation connections

　　

 

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

The Starbucks website is also a successful example of how to efficiently use the drop-down menu on mobile devices. Similarly, menus are hidden behind small icons by default. This will not affect other content interfaces. Once users need to use navigation to link to the website, they just need to click the small icon and the menu will open. Make sure that the connection areas of different entries are large enough to ensure the area of the finger touch. Once selected, the menu will automatically disappear.

4. Change the location of the navigation menu

Another way to adapt your navigation menu to a small screen is to use a familiar structure. You need to ensure that this method is not obfuscated by users, but it may be the best way to adapt to different devices.

　　1. Distributed navigation websites

　　

 

Provide content in an orderly manner. Do not display all content at the same time.

The Boston Globe website provides a lot of information. Not only the first content layer, but even the second content layer also contains many entries. Their solution is to navigate users on mobile devices as easily as possible, so the navigation is split into two content layers for display. When a user selects an entry at the first layer, the user enters the corresponding website, and a new drop-down menu content will appear on the new website, which is a detailed classification of the second layer.

　2. First, welcome your visitor

　　

 

Place the navigation menu at the bottom of the website, forcing your visitor to browse the website before deciding on the next step.

Brickartist.com is an interesting example of how to relay the navigation menu of a website on a mobile device. In the desktop version, there is a very clear and prominent navigation menu. However, on a mobile device with a small screen, the navigation menu is moved to the bottom of the website. In this way, the visitor has to first read the header and intermediate content, and then decide which menu to click.

　　5. Discard navigation menu

You can also discard the navigation menu. Of course, this is just a choice. If your website content is not so complex and visitors can easily find the relevant content.

　1. guide visitors

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

When a user accesses the Happy Cog website of the desktop edition, the user has two access methods: one is to select a category from the navigation menu for access, the other is to scroll down to gradually view different content. On mobile devices, you can only use the second method. Then, it classifies each content and provides more detailed connections.

　　2. Visual Effects

　　

 

Use Visual Effects to allow users to find their access methods.

Mobile Web Best Practices desktop also displays a very clear navigation menu. In addition to the corresponding name, each category also has a specific icon. In addition, there will be clearer classification icons under the text. On a mobile device, the text menu on the top disappears. You can use a large icon to navigate the website. The website uses two different styles of navigation. However, the classification is clear and the style is consistent with the icon, which brings users a certain visual effect.

Original article: http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/

Source: CSDN