What is Custom (Responsive)? What are the advantages and disadvantages?

Tianxing Studio Made many zblog self-adaption Of Template However, some friends will ask: What is customization (also known as responsive)? What are the advantages and disadvantages? This article tries to answer this question.

Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it is a website It can be compatible with multiple terminals -- instead of making a specific version for each terminal. This concept was born to solve the problem of mobile Internet browsing.

Responsive layout can provide users of different terminals with a more comfortable interface and better user experience, and with the popularity of large screen mobile devices, it is not too hard to describe it as "the trend of the times". As more and more designers adopt this technology, we not only see many innovations, but also see some forming patterns

With the rise of mobile Internet, more and more people use mobile phones to surf the Internet. Mobile devices are overtaking desktop devices and becoming the most common terminal for accessing the Internet.

As a result, web designers have to face a difficult problem: how can they present the same web page on devices of different sizes?

The mobile phone screen is relatively small, and the width is usually less than 600 pixels; The screen width of PC is generally more than 1000 pixels (at present, the mainstream width is 1366 × 768), and some even reach 2000 pixels.

It is not easy for the same content to show satisfactory results on screens of different sizes. The solution for many websites is to provide different pages for different devices, such as a mobile version or an iPhone/iPad version. This ensures the effect, but it is troublesome. At the same time, several versions must be maintained. Moreover, if a website has multiple portals, it will greatly increase the complexity of architecture design.

As a result, some people have long imagined that it is possible to "design once and apply universally", so that the same web page can automatically adapt to screens of different sizes, and automatically adjust the layout according to the screen width? This is adaptive (responsive)

Advantages and disadvantages of adaptive (responsive):

advantage : Strong flexibility for different resolution devices; It can quickly solve the problem of multi device display adaptation.

shortcoming : Compatible with all kinds of equipment, heavy workload and low efficiency; The code is cumbersome, and there will be hidden useless elements, which will increase the loading time; In fact, this is a kind of compromise design solution, which cannot achieve the best effect due to various factors; To some extent, the original layout structure of the website has been changed, which will lead to confusion among users.

You can choose the right one according to your own situation Zblog template 。

The webmaster's own opinion:

If you are a personal blog site, the layout is relatively simple, and the focus is on highlighting the content, it is recommended to use it directly Adaptive template 。

If you are an enterprise website or a website with more complex functions to highlight functions and interaction, it is recommended to make two sets of templates separately for the computer side and the mobile side.