Review｜Responsive Design

Foreword

Responsive design review

Adaptive navigation bar

The framework logic of the desktop and mobile (wise) ends are different. The desktop is tree-like linear structure navigation with a clear hierarchical concept, while the mobile end usually breaks up the navigation tiles and weakens the hierarchical concept. For example, the breadcrumb is a typical product of PC, but there is no clear concept of breadcrumbs on the mobile, except for the bottom nav bar.
Usually, official websites about product introduction usually are responsive designs to adapt to desktop&ipad&wise, etc. Few websites choose to develop different functions for each terminal separately. In this article, we mainly discuss the normal way, and how to design the same function of the navigation bar at different ends.
Product official websites such as Paddle and NLP official websites generally have introduction document pages, such as TensorFlow, PyTorch, etc., these pages will have more complicated top navigation and columns. Usually, when designing responsive websites, Navigation switching is difficult in interaction design, and breadcrumbs also need to be considered.

Adaptive navigation of competitive product
TensorFlow
TensorFlow has three breakpoints (3 layout states) depending on screen size, and breadcrumbs are also displayed on the mobile.

△large size screen(desktop) / middle size screen(Tablet) / small size screen(wise/smartphone)

How to handle navigation in small screen：
TensorFlow puts the main navi on the first level of the collapse navigation, and place the left navigation on the second level to save more space, but it will make the small screen navigation packed with text, it’s hard to read and overwhelming. First-time users may not be able to understand the navigation structure for a while.

△mobile navigation: first level(left) /secondary (right)

PyTorch
For the same type of page, PyTorch’s main navigaition only have two breakpoints, it chooses to remove the right navigation and breadcrumbs on small screen.

△large size screen(right) / middle and small size screen(left)

How to handle top and left navigation in small screen：
Collapse the top main navigation as button and display it in the top right corner of the page, it will be displayed in full screen on click. While the left navigation is collapsed, and the floating layer is  expanded on click (similar to the drop-down menu). At the same time, right navigation and breadcrumbs are removed. 
Other competing products which choose the same responsive method, also place the right navigation into bottom of the floating layer as a drop-down menu. This is suitable for small amount of categories in the left and right navigation.

△small size screen top nav(left) / small size screen left nav(right) 

Common navigation styles on Desktop

The typical homepage of a official website is generally composed of top navigation and content. A complex website may have navigation bars on the left and right sides in addition to the top navigation bar, as shown below:

Generally, websites only have top navigation, breadcrumbs are used to inform users of their location, but mobile(small size screen) usually place the main navigation at bottom, such as the common bottom navigation of WeChat and Twitter.

Mobile

Desktop&Mobile&Wise navigation

First-level navigation   
The bottom navigation is the most common navigation on the mobile. Generally, the bottom navigation is global, which is equivalent to the top navigation bar on desktop official websites.
The reasons for placing navigation at the bottom on mobile are screen size, browsing habits, and the posture of holding the mobile phone. The recent trend of navigation and content is increasingly sinking, such as snapchat. On mobile, the first-level main navigation generally adopts the side sheet, such as QQ, the advantage of navigation menu is that it saves space and is suitable for masonry layout and chat apps.


Secend-level navigation
The secondary navigation on mobile is generally top navigation or tile navigation. General news apps(masonry layout) often use top navigation such as Weibo app, and it is always on the top to facilitate content selection. Tile navigation generally appears on the content introduction page and setting page, such as WeChat Discovery and Me, it not commonly used as secondary navi. The secondary navigation on desktop is generally the left navigation, and some platforms will also collapse the left navigation by default.
 Wise is basically the same as mobile. According to the content of the page, wise choose whether top navigation or flat navigation. For example, it is more inclined to use tile navigation for popular science pages so that users can understand the catalog easily, while choosing top navigation for content pages allows users to browse the website first. In addition, navigation menu that integrates secondary navigation into primary navigation is also common.

When the structure of the desktop page is the main navigation on the top, the secondary navigation on the side, and there is also a banner on the page, it is hardly selects only the top navigation. In one case, it will integrate the secondary page into first level as a side sheet. In another case, it will choose to tile all levels or use expand/collapse nav.


third-level navigation
Mobile usually use card type and masonry layout instead third-level navigation.
The third-level navigation on desktop is more common on the description page and editor page, and the editor page is difficult to make responsive design.
When makes responsive design on Wise, in one case, the navigation menu will be used. In another way, the third level navigation can be used as the second level tab.

About breadcrumbs

Desktop and mobile have different ways of dealing with the interface structure. For example, breadcrumbs come from PC, but on mobile, there is generally no breadcrumbs, and the next page and return are used instead. So when the breadcrumbs are made responsive design on moblie, the breadcrumbs are usually removed and navigation is displayed in a tiled manner. For example, I also did this when I was working on the official website of PaddlePaddle.

The conclusion