Web Analytics the five major rules for designing responsive navigation menus

Abstract: This paper focus on the more challenging response of Web design: Design of response type navigation menu, there are five rules, you can easily and efficiently design responsive navigation menu in the small or large screen on the screen no matter.

Web design (Responsive Web response design) the idea is that the design and development of the page should be based on user behavior and environment equipment (system platform, screen size, screen orientation) of the corresponding response and adjustment. Responsive design allows you to create unique user experiences on different platforms, while maintaining minimal maintenance work.

has a lot of articles relating to the response type design, these articles help us understand and response of anatomical study guide and tutorial style website design, the media reveal query function, at the same time, also provides some very exciting response set design.

, for the moment, let’s turn the macro response Web design into focus, focusing on the more challenging "responsive navigation menu design". The desktop version provides enough screen space to display the multi tier navigation layout, but the smaller the screen, the more difficult it is to display the same content clearly. Here are five basic rules that allow you to design responsive navigation menus easily and efficiently on both large and small screens.

1. Display the content according to priority.

perhaps, this is the most effective way to screen small content on a small screen device, highlighting different content according to the user. In what circumstances, users will use mobile devices to access the website? What is their access to the target? We need to provide what content to meet? Below we cite two examples, according to the contents of priority, simplified site navigation on mobile devices.

1. only displays high priority content


should give priority to content on small screen mobile devices and remove small columns.

The Sweet Hat Club web site for the optimization and reconstruction of the navigation menu on mobile devices, instead of horizontal display all columns (item), the mobile version of the navigation only vertical display several high priority programs, while the Twitter and Facebook connection was removed, but the Join connection has been upgraded. It is not an ordinary text connection, but a color button that attracts people’s attention.

2. displays the high priority content

at the top


places the most important content at the top of


Barack Obama website focuses fundraising and Obama elections as the focus of the site. The home page of the computer version is in the top