Responsive Web Design: Resize page as browser width changes

Article Description: the idea of responsive web design is that page design and development should respond and adjust according to the device environment (screen size, screen orientation, system platform, etc.) and user behavior (changing window size, etc.). Responsive Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query. Regardless of user

These problems are frequently encountered in the design:

1. If you want a website that is compatible with mobile phones, tablets, and PCs, you have to customize different versions for different devices.

2. Some pages of the site want to display more content on the next line of the widescreen display, and have to customize a version for the widescreen.

3. Many people are not in full screen of the situation to browse our page, if the page with the browser width changes and the corresponding adjustment will be better?

Is there any way to solve these problems effectively?

The idea of responsive web design is that page design and development should respond and adjust according to the device environment (screen size, screen orientation, system platform, etc.) and user behavior (changing window size, etc.). Responsive Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query. Whether the user is using a PC, tablet, or mobile phone, whether it is full screen or not full-screen situation, whether the screen is horizontal or vertical, the page should be able to automatically switch resolution, picture size and related script functions, to adapt to different devices.

Responsive web design requires a higher requirement for interaction design and front-end implementation, and it is necessary to consider clearly the layout changes and content scaling of pages under different resolutions.

The advantages of responsive web design:

• Development, maintenance, operating cost advantages: Only one page, only for different resolution, different equipment environment for a number of different designs, so in the development, maintenance and operation, relative to multiple versions, can save costs.
• Compatibility Advantage: Mobile devices are emerging in new sizes, customized versions are usually only applicable to certain specifications of the device, if the new device resolution is large, often incompatible, and the development of a new version takes time, access is a problem during this time, but responsive web design can prevent this problem in advance.
• Flexible operation: The response design is for the page, you can only make changes to the necessary pages, other pages are not affected.

Example Show

View demo on line

When the browser width changes to an hour, the width of the left and right two columns are narrowed, banner pictures and videos on the left-hand side are reduced, and the Avatar list on the right-hand side is changed from a row of 4 to two.

When the browser width is further reduced, the page from the two column structure into a column structure, some of the content of the size of further narrowing, the search area from the navigation moved to the navigation outside.

Design process for responsive pages

Step one: Identify the type of device you want to be compatible with, screen size

Through user research, understand the distribution of equipment used by users, determine the need for compatible device types, screen size.

Device type: Includes mobile devices (cell phones, tablets) and PCs. For mobile devices, design and implementation of the attention to increase the function of gestures.

Screen size: Including the size of various mobile phone screens (including horizontal and vertical), the size of various flat panels (including horizontal and vertical), ordinary computer screens and widescreen.

The issues to consider:

• What size range is applied to a page in response design? For example, 1688 search results page, span can from mobile phone to widescreen, and 1688 first page, because the structure is too complex, want to migrate directly to the mobile phone, not too realistic, as a direct design of a mobile version of the home page.
• Combined with user requirements and implementation costs, the applicable size of the choice. For example, some functional operation of the page, the user generally does not operate on the mobile side of the demand, there is no need for responsive design.

Step two: Make Wireframe prototype

For the determination of several sizes to make different wireframe prototypes, we need to consider the different sizes, the layout of the page, how to scale the content, the function, the content of the deletion, and even for the special environment for the design of specialization. This process requires close communication between the designer and the front-end developer.

Step three: Test wireframe prototype

The introduction of pictures into the appropriate equipment for some simple testing, can help us early detection of accessibility, readability and other aspects of the problem.

Fourth step: visual design

Note that the screen pixel density of the mobile device is different from that of the traditional computer screen, so it is necessary to ensure the readability of the content text, the area of the control clickable area, etc.

Fifth Step: Front-End implementation

Compared with the traditional web development, the responsive design of the page due to page layout, content size changes, so the final output is more likely to be more and more than the design manuscript, requiring front-end developers and designers to communicate more.