Analysis of responsive page navigation design

It is said that 2013 will be the year of responsive web design. Ethan Marcotte, a user experience designer, proposed the term "responsive web design (RWD)" in 2010, namely, responsive web design. This concept has extended from the responsive architecture to the web design field, let all interaction design, vision, and front-end development begin to invest in this trend, or in new design solutions.

As more and more people are using iPhone, iPad, Android phones, or tablets, more and more people are talking about the new concept of old consciousness, when we have been adhering to the perfect combination of user experience first and web design, I have also sorted out some responsive design concepts and methods, today, we will share with you the design of responsive navigation.

The Design of responsive navigation follows the responsive web design concept. The design and development of pages are based on user behavior and device environment (system platform, screen size, screen orientation, etc) make corresponding responses and adjustments. By reducing the element size in a proportional manner, adjusting the page structure layout, and optimizing and adjusting the content, you can have a unique user experience on different platforms. It should be noted that floating effects and Flash are not applicable to mobile devices.

What principles should we follow in the specific design?

1. In responsive webpage design, sometimes we need to delete the page content and display the content according to the priority. Only displaying the content with high priority is one of the principles. On mobile devices with smaller screens, content should be prioritized and smaller columns should be removed. A high-priority content is displayed on the top, that is, the most important content is placed on the top. Whether or not the navigation must appear in the page header or re-layout at the end of the page must be considered based on the specific planning of the website.

2. Provide clear and friendly finger operation links. Especially on mobile devices, the block that can be clicked should not be too small. The Guide should be clear and strong, so that no device is ignored.

3. Adjust the design to adapt to the available space, so that users still have the same vision and feeling on the same page on different devices. This also follows the principle of consistent interaction design experience. You can refer to the Oliver Russell website. A website with a very flexible design maintains the same vision and feeling at different screen resolutions.

4. You need to consider the right-hand click operation of most users, and the left-hand is responsible for holding the device's habits. The navigation list on the right is convenient for right-hand click, and can be avoided by the left-hand holding the device accidentally touching.

A major reason why responsive design becomes popular is that it looks great wherever it is. 2013 we are in the era of rapid development of the mobile Internet. A website can be compatible with multiple terminals, instead of providing a specific version for each terminal. The responsive design is born for the mobile Internet, web design will also usher in more responsive design elements.