MENU service case
Website construction website design Beijing website construction high-end website production company Shangpin China
We create by embracing change
360 ° brand value__
simplified Chinese character
Simplified Chinese English

Shangpin China Joins Hands with Beisheng Internet to Create a New Chapter in Website Construction

Type: Shangpin Dynamic Learn more

How to design a responsive website?

Source: Shangpin China | Type: website encyclopedia | Time: June 1, 2018
current Responsive design Four types of dimensions are generally considered (width and height are generally calculated according to the ratio of 9:16, and the height of the navigation bar above and below the browser is subtracted):
  • Phone: 360px
  • Tablet: 361 - 1024 px
  • Mainstream PC display: 1025 - 1920 px (1080P is the mainstream desktop display at present)
  • Ultra clear PC display: 1921 - 5120 px (2K, 4K, 5K and other ultra-high resolutions are mainly considered for the future)

1. Mobile phone
The correct process of responsive design should be mobile first, and then gradually enlarge to a larger size. Therefore, the design of the mobile phone should be given priority, rather than trying to compress it to the mobile phone after designing the traditional desktop website. As for how to design the mobile Web interface, I will not elaborate here. I believe that all designers have their own ideas.

2. Flat plate

The flat end is basically the mobile end of the enlarged version, which can directly copy 75% of the work, but the single element will appear too large if directly copied. After all, the page resolution is almost three times that of the previous version. Therefore, the layout of the tablet side can be divided into several more columns than that of the mobile phone side. For example, the design of a ListView on the mobile phone side can be divided into 2 to 3 columns on the tablet side. The buttons with full screen width on the mobile phone side will appear too long on the tablet side. You can consider shortening them appropriately and reserve enough height for hand pointing and pressing. The navigation The menu can be displayed directly to fill the extra space.

3. Mainstream PC display

There is nothing to say about this. We must have been familiar with traditional Web design for a long time. The only thing we should pay attention to here is to maintain the consistency of the layout. The PC end of the responsive design is magnified and adapted from the panel end, which can display more content, but it should not be too different from the flat end. It should ensure that users can identify the same website.

4. Ultra clear PC display

This did not need to be considered in the past. At that time, 1080P was still a hot concept, and 1024px was still the resolution of notebook. But now, with the gradual popularity of 2K/4K screens, the proportion of these users is gradually increasing, and the problem is becoming increasingly prominent and can not be ignored. Web pages without special adaptation schemes will appear to have two changes in these environments: the pages originally adapted to the full screen will be stretched too wide, and large gaps will be left on both sides of the pages originally fixed in width. Faced with this fact, designers need to consider the appearance of the page on these devices when designing the adaptation scheme.
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
TAG label:

What if your website can increase the number of conversions and improve customer satisfaction?

Make an appointment with a professional consultant to communicate!

* Shangpin professional consultant will contact you as soon as possible

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]

Communicate with professional consultants now!

  • National Service Hotline

    400-700-4979

  • Beijing Service Hotline

    010-60259772

Please be assured to fill in the information protection
Online consultation

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]