Responsive Web design how to make websites compatible with different needs

 

 

These problems are frequently encountered in the design:

1. If you want your website to be compatible with mobile phones, tablets, and PCs, you must customize different versions for different devices.

2. If you want to display more content under a wide screen display on some pages of the website, you have to customize a version for the wide screen display.

3. Many users do not browse our pages in full screen mode. Will it be better if the page is adjusted as the browser width changes?

Is there a way to effectively solve these problems?

The concept of Responsive Web design is that page design and development should be based on the device environment (screen size, screen orientation, system platform, etc) and user behavior (change the window size) for corresponding response and adjustment. The specific practice method consists of multiple aspects, including the use of elastic grids and la S, images, and CSS media queries. Whether the user is using a pc, tablet, or mobile phone, whether it is full screen or non-full screen, whether the screen is horizontal or vertical, the page should be able to automatically switch resolution, image size, and script functions to adapt to different devices.

　　

 

Responsive web design puts forward higher requirements for interaction design and front-end implementation. You must consider the layout changes and content scaling at different resolutions.

Advantages of responsive Web design:

Development, maintenance, and operation cost advantages: there is only one page, but different designs are made for different resolutions and different device environments. Therefore, in terms of development, maintenance, and operation, compared with multiple versions, it can save costs.

Compatibility advantage: New sizes of mobile devices emerge one after another. Custom versions are generally only applicable to devices of certain specifications. If the resolution of new devices changes significantly, they are often incompatible, it takes time to develop a new version. access during this period is a problem, but responsive Web design can prevent this problem in advance.

Flexible operation: the responsive design is for pages. You can modify the necessary pages without affecting other pages.

Instance display

　　

 

View Online demo

When the browser width changes to an hour, the width of the left and right columns is reduced, and the banner images and videos on the left are also reduced accordingly. The picture list on the right is changed from four to one.

When the browser width is further reduced, the page is changed from two-column structure to one-column structure. The size of some content is further reduced, and the search area is moved out of the navigation area.

Design Process of responsive pages

Step 1: Determine the device type and screen size to be compatible

Through user research, you can learn about the distribution of devices used by users and determine the device type and screen size to be compatible.

Device Type: Includes mobile devices (mobile phones, tablets) and PCs. When designing and implementing mobile devices, pay attention to adding the gesture function.

Screen Size: includes the size of a variety of mobile phone screens (including horizontal and vertical), a variety of tablet sizes (including horizontal and vertical), normal computer screen and wide screen.

Considerations:

What are the sizes applicable to a page for responsive design? For example, on the 1688 search result page, the span can be from the mobile phone to the wide screen, while on the 1688 homepage, because the structure is too complex, it is unrealistic to want to migrate directly to the mobile phone, it is better to design a mobile phone homepage.

Select applicable dimensions based on user requirements and implementation costs. For example, for some functional operation pages, users generally do not need to perform operations on the mobile end, and there is no need for responsive design.

Step 2: Create a wiremap prototype

To create different wireframes for different sizes, consider how the page layout changes, how the content size scales, and how the functions and content are deleted, even special designs for special environments. This process requires close communication between designers and front-end developers.

　　

 

Image Source

Step 3: test the wiremap prototype

Importing images to corresponding devices for some simple tests can help us identify problems such as accessibility and readability as early as possible.

Step 4: Visual Design

Note that the pixel density of a mobile device screen is different from that of a traditional computer screen. You must ensure the readability of the text and the area of the area where the widget can be clicked.

Step 5: frontend implementation

Compared with traditional web development, the page layout and content size of responsive design have changed, so the final output is more likely to differ from the design draft, front-end developers and designers are required to communicate with each other.

Source: http://www.aliued.cn/