Responsive Web Design

In the design often encounter these problems:

1. Want websites compatible with mobile phones, tablets, pc, you have to customize different versions of different devices.

2. Want some pages of the website to display more content on the next line of the widescreen display and have to customize a version of the widescreen.

3. Many people do not browse our page in full screen. Would it be better to adjust the page as the browser width changes?

Is there any way to effectively solve these problems?

Responsive Web design concept is that the design and development of the page should be based on the equipment environment (screen size, screen orientation, system platform, etc.) and user behavior (to change the size of the window, etc.) to respond accordingly and adjust. Concrete practice consists of many aspects, including the flexible grid and layout, pictures, the use of CSS media query. Regardless of whether the user is using a PC, tablet, or cell phone, whether the screen is full or full screen, the screen should be able to automatically switch resolution, image size, and related scripting capabilities, regardless of whether the screen is horizontal or vertical, to accommodate different equipment.

Responsive web design for interactive design and front-end implementation put forward higher requirements, you need to consider clearly different resolution page layout changes, content scaling and so on.

Responsive Web Design Advantages: Development, Maintenance, and Operational Cost Advantage: There is only one page, only different designs for different resolutions and different device environments. Therefore, in the development, maintenance and operation, , Can save costs. Compatibility advantages: The new size of new mobile devices, custom versions are usually only applicable to some specifications of the device, if the new device resolution changes are often not compatible, and the development of new versions take time, this time Access within is a problem, but responsive Web design can prevent this problem in advance. Flexible operation: Responsive design is for the page, you can only make the necessary changes to the page, the other pages are not affected. Example shows

View online demo

When the width of the browser becomes smaller, the widths of the left and right columns are reduced, the banner images and videos on the left are correspondingly reduced, and the list of avatars on the right is changed from a row of four to a row of two.

When the width of the browser is further reduced, the page structure changes from two columns to a column structure, and the content of the content is further reduced in size, and the search area is also moved from navigation to navigation.

Responsive page design flow Step 1: Determine the type of device that needs to be compatible, screen size

Through user research, understand the distribution of devices used by users, determine the types of devices that need to be compatible, and the screen size.

Device Type: Includes mobile device (phone, tablet) and pc. For mobile devices, pay attention to adding gestures when designing and implementing.

Screen size: includes the size of a variety of mobile phone screen (including horizontal and vertical), the size of various tablets (including horizontal and vertical), ordinary computer screen and widescreen.

Issues to consider:

What is the appropriate size range for a page to be responsive? For example, 1688 search results page span from phone to widescreen, and 1688 Home, due to the structure is too complicated, want to directly migrate to the phone, not realistic, it is better to directly design a mobile version of the home page. Combined with user needs and cost, the choice of the appropriate size. For example, some functional operation of the page, the user generally do not need to operate on the mobile terminal, there is no need for responsive design. The second step: the production of wireframe prototype

In order to determine the different dimensions of the different wireframe prototype, you need to consider clearly different sizes, how the layout of the page changes, how to zoom the content size, function, content deletion, or even for special circumstances for special design Wait. This process requires designers and front-end developers to maintain close communication.

Image Source

The third step: test wireframe prototype

Importing images to the device for easy testing will help us detect issues such as accessibility, readability, and more as soon as possible.

The fourth step: visual design

Note that the screen pixel density of mobile devices is different from that of traditional computer screens. At the time of design, it is necessary to ensure the readability of the content texts and the area of ​​the controllable clickable area.

The fifth step: front-end implementation

Compared with the traditional web development, the page of responsive design changes due to the page layout and content size, so the final output is more likely to come in with the design draft, which requires more communication between front-end developers and designers.

Related Articles, Website:

Responsive Web Design with CSS3 Media Query

A foreign responsive web design introduction site

Source: http: //www.aliued.cn