Design pattern of responsive navigation

On the big screen, navigation or navigation is the two typical design patterns, but these two patterns are challenged on a small screen. In the increasingly popular response design today (Translator Note: In fact, has been popular for several years), we need to re-examine the small screen environment for navigation design patterns. These page navigation through mobile devices must be convenient for users to quickly access, but not too prominent.

Below, I have listed 7 common design patterns for response navigation, namely:

Top (or "drift")

Footer Anchor Point

Menu selection

Switch

Slide

Placing bottom

Completely hidden

Each of the above design patterns have advantages and disadvantages, everyone in the selection of navigation design plan, we need to judge according to the actual situation of the project.

Top (or "drift")

! [Top (or "laissez-faire") case] [3]

Navigating the top of the navigation or letting the navigation flow with the layout is one of the simplest ways to achieve navigation. Thanks to this easy to implement approach, it has also become "standard" for many of today's responsive web pages.

Advantages

Easy to implement: consistent implementation on large and small screens

Do not rely on JavaScript: This guarantees compatibility to the fullest extent

No need to break the original CSS style

There is no need to disrupt the original order of the content: this way it ensures that it is completely fluid, without the slightest human intervention.

Disadvantages

Occupy Space: Height problem is the core problem on the mobile end. Luke's "content first, navigation second" in his book is a typical mobile-end Web experience. We all expect users to get content as quickly as possible, which means that we need to remove the navigation to ensure that the user's focus remains on the core information. And when the navigation height is too large, resulting in the screen of the core information can not be displayed, it will cause users confusion. As shown in the following figure, when we open a page, the entire screen is occupied by navigation, the user can not get valid information. [Top Navigation on small screen automatically folded line display] [2]

Poor scalability: What happens when you add a chapter when your navigation is displayed just in one row? What if a customer suddenly asks for an additional navigation category called "Products and services"? Or does translating a navigation title into another language result in a change in character length? All of these things will destroy the original design plan.

Coarse finger: Navigation all crowded together, thick finger is anxious, how point also can't point to oneself want to visit the navigation chain, this increases the chance of misoperation (not suitable for small screen through the finger to click operation)

Cross-device issues: Different devices are rendered differently, and great pages on the IPhone may be poorly performed on other platforms. [Differences in rendering on different devices] [3]

Case

* [Yiibu][4]

* [Trent Walton][5]

* [Tim Kadlec][6]

* [Ethan Marcotte][7]

* Brad Frost Web

Related information

The Height matters by @andmag Don ' t let Your Menu Take over by @StuRobson

Footer Anchor Point

Http://bradfrost.com/wp-content/uploads/2012/02/grey.png

Leaving only one anchor point to the bottom of the page, it's a flattering way to place the navigation in the footer. It saves valuable space in the head while satisfying the need for access to navigation.

Advantages: Easy to achieve: header anchor point, navigation Bottom, there is no simpler than this! – Do not rely on JavaScript: This means fewer tests and better browsers support small CSS changes: with absolute or fixed position, it's so easy to move the bottom navigation to the top of the big screen.

Disadvantage: User confusion: Quick jump to footer This action is easy to confuse the user with lack of elegance: this is strange to say (the translator also has the same feeling), but I (the author) think the interaction of similar switches is more sexy. This approach to anchor-point jumps is practical, but not elegant, and is too rough to interact with carefully designed mobile-end applications.

Case

Grey Goose Contents Magazine bagcheck (I know it ' s not responsive, but it's where the technique was popularized)

Related information

A simple, responsive, mobile-I-Navigation mobile-book

Menu selection

Http://bradfrost.com/wp-content/uploads/2012/02/nav-vil.png

It's a good way to include navigation in a control that selects the menu. It avoids the screen space occupied by the navigation.

The advantages of freeing up enough space: a choice menu is either horizontal or vertical in a special province space to conform to user habits: compared to the bottom of the way, users more accustomed to navigation is placed in the head of the page is easy to identify: Drop-down Menu control style is very conspicuous, and easy to find support for localization of the interaction: because of the standard control Makes the operation very localized, which refers to the device's own properties of support, such as on the touch device can be clicked, and on the trackball support rolling operation;

Disadvantage styles are not uniform: different browsers will render different styles of pull-down menus that may confuse the user: Most users will only see the Drop-down menu when they fill out the form, and use the Pull-down menu as a guide, fearing that the user will suddenly be unable to understand how the dropdown menu is handled: Because the subproject is automatically indented in the Drop-down menu , which, though usable, is visually confusing; May rely on browser to invoke JavaScript

Case: Tinynav by @viljamis Convert a Menu to a Dropdown for Small Screens Progressive and responsive navigation responsive M Enu

Related information: Viljami Salminen Retreats 4 Geeks Five simple Steps Performance Marketing Awards

Switch

Http://bradfrost.com/wp-content/uploads/2012/02/nav-starbucks.png

The implementation of the switch is similar to the footer anchor point, but not click to jump to the footer, but click on the menu area to expand. It is also easier to implement design patterns.

The advantage is easy to understand: compared to the footer anchor point suddenly jumps, switch this is the position of the same interactive way easier to allow users to accept the interaction more elegant (compared to jump) strong scalability: The only thing you have to do is to hide the switch at the PC end, display it at the appropriate breakpoint, all of which can be achieved through CSS

Disadvantage animations may not be smooth enough: Android's support for animations has been bad, so it's possible to get the effect you want to be very dependent on javascript: Because the animation that turns on the switch requires JavaScript to implement, it's not very compatible (the author's BlackBerry device does not support it);

Case Starbucks Mobile Web best Practices Twitter Bootstrap

Related Resources Flexnav A responsive design approach for navigation, part 1 By@filamentgroup

Sideslip Navigation

Http://bradfrost.com/wp-content/uploads/2012/02/nav-obama.png

The sideslip was popular with Facebook's big push. The reason the drawer comes from its interactive effect, when the menu button is clicked, the navigation module slides from the edge of the page like a drawer.

The advantages of space are abundant: because from the edge sliding out, these content is understood to be in the bottom or outside the screen of the infinite area good-looking: simplicity is beautiful, and animation effect stunning

Disadvantage minority: Compared with other simple design patterns, the effect of expanding the navigation bar from side sliding needs a number of complex animation to achieve, so that some low-end equipment in the doorway. Therefore, if your project is designed for the general public, you need to be cautious. Poor adaptability: This model is only suitable for mobile devices and is not performing well (and not necessary) on a large screen. There may be confusion: when I first saw Facebook adopt this design, I thought the page was wrong! Exposing some information on the right side of the screen it's strange to me (purely the author's personal opinion).

Case Barack Obama

Related information A plea for progressive enhancement

Position navigation only in footer

Just place the navigation and footer anchor points in the footer, except that it does not place anchor points in the header. The concept of this model is content first, navigation second. This way, you need the user to slide the page to the bottom to see the navigation

Benefits: Easy to achieve compatibility (without JavaScript) small CSS changes: Because of absolute or fixed position, it is easy to move the bottom navigation to the top of the big screen.

Disadvantage: Difficult to find: whether in large or small screen is difficult to find the footer will have navigation; Difficult to use: mobile end users need to constantly scroll the page to the bottom to use the footer navigation, very inconvenient

Related cases: Pears fray

　　Completely hidden

Hide the navigation, get the maximum space

This design pattern follows this rule: do not punish users who visit your site via the mobile end. It's still a mystery what the mobile end user wants or doesn't want. Mobile-end users do what any desktop user does, so it is necessary to provide some core functionality only for mobile-end users.

Advantage: Cock Burst (original Sexy as hell to seek great God letter of the translation)

The perfect use of limited screen space

For mobile devices There is a great advantage, only to slide down to see more

Disadvantage: It is not good to remove links or content from the core features or content of mobile-end users. Response advocates argue that this can lead to differences in content between mobile-end pages and desktops, as well as experience disasters.

Add extra cost to the page using the command Display:none only hides the element on the page. The page's code, pictures, or other files are still downloaded in the background, which eventually leads to slow page access.

It is difficult to maintain two completely separated navigation system will become the burden of late maintenance

There may be a confusing move-side user sliding down the page to refresh the list without realizing that when I first saw Facebook adopt this design, I thought the page was wrong! Revealing some information on the right side of the screen is still strange to me (purely the author's personal opinion)

Related cases: Authentic Jobs rourkery.com A Previous version of the Obama responsive sit related resources: Media Query and Asset Tests

　Conclusion

Move navigation just like your real friends: need each other, but give space to each other, and those who pretend to be close to you always disappear when you need it (when you need navigation) or occupy your personal space to make you mad (ie: rub, roll from my bed); Designing for responsive navigation requires a balance in the portability and space of the access.