When it comes to responsiveness, the first thing most people think of is CSS @media. However, if we look at taobao, Vipshop, GitHub and other large websites, we can find that they do not use CSS media query to achieve responsive layout. Obviously, CSS-level responsive layout is not the mainstream, or not the best practice.

Recognition of the response

I remember when I first encountered the concept of responsive layout around 2013, when Bootstrap was a pioneer in responsive layout. I was just getting into the concept of the front end, and every time I wrote my own CSS, I had to spend a lot of time debugging nice styles. I came into contact with Bootstrap by chance, and it was really good to use it. It was extremely easy to build a beautiful interface. At that time, I had my first Xiaomi mobile phone, which was frequently used to surf the Internet. When I saw the same set of interface that I had written, which could be adapted to computers and mobile phones, I felt that responsiveness must be the trend of the future.

Later, when I need to write front-end for myself or to recommend others, the first thing I think of is bootstrap.

Disadvantages of CSS-level responsiveness

Then there were some problems:

  1. Bootstrap is too large and wastes bandwidth. There are few things that bootstrap actually uses, except the core classes of the 12-grid system, a few containers, a few button styles, etc. Some 99% of the resources are unused through analysis of Chrome developer tools audits.
  2. Styles overflow. Users who have used Bootstrap should be able to tell if a website uses the bootstrap style at a glance, because it has obvious features. In this case, it is not a good thing to be too recognizable. If you look at it too much, you will feel that you have no personality.
  3. Intrusive. Bootstrap is very intrusive. Once bootstrap is used, there may be several problems: poor customization, because I didn’t spend the time to study the implementation of Bootstrap, changing a style may lead to a series of chain reactions: I still don’t understand the following notation.container{margin: 0 -15px} .colunm{padding:-15px}. This means that you can’t just take a class for granted, you have to take the time to learn its “rules”. If you introduce bootstrap halfway through, you’ll probably spend more time fixing conflicts with previous styles than if you wrote them yourself.
  4. The implementation principle is backward. Bootstrap uses the flow layout to achieve responsiveness, mainly through the width percentage and float style. This approach, at present, may be a little behind, the current CSS3 new standard Flex layout may be a good alternative.

The above problems are summarized and explained by bootstrap as an example. These problems, such as CSS global pollution, can be improved through engineering and modular methods. So that’s not the real reason why responsive sites can’t go mainstream.

Throughout the major websites Taobao, GitHub and so on have not done CSS style level responsive website. Instead, we made two sets of HTML for mobile and PC. Why? The disadvantages of implementing responsiveness through a set of HTML pages using CSS media queries are:

  1. There is no real identification of the user client. Because CSS level responsiveness is generally passed@mediaThis method is obviously unscientific. For example, if the CSS of the mobile phone is horizontal, the CLIENT may be considered as A PC, and if the BROWSER window of the PC is narrowed, the CSS may consider the client as a mobile phone. Naturally, the rendered interface based on this judgment is not really what the customer wants. 2. May lead to style confusion. Due to the CSS@mediaThere is a critical point such as@media screen and (max-width:800px)If the site code is not consistent at critical points, style confusion can occur when the window size is reduced or placed near the critical point (800px). This is a common thing, compared to not doing responsive, may bring users more trouble than convenience.
  2. Large amount of code redundancy. At the CSS level, responsive web sites have a lot of code redundancy, requiring a lot of CSS media query code to handle styles of different sizes. On the one hand, HTML will also have a lot of easy code. Generally speaking, responsive websites will be richer on the PC side and simpler on the mobile side. In such dynamically rendered HTML, it is common that some HTML will only be displayed on the PC side and vice versa. This means that there are bound to be parts of HTML that don’t appear on mobile /PC. So why send elements to the user that won’t appear? Undoubtedly, it increases code redundancy and consumes network bandwidth. For large visits, transmission, rendering requirements are very high site, this shortcoming is intolerable.
  3. High maintenance costs. Because a set of HTML needs to consider both PC and mobile, each style modification needs to be tested under both conditions, especially for mobile, and also consider the complexity of different manufacturers and different sizes of mobile phones. Modified PC style, and may affect the effect of mobile phone display. All in all, it’s pretty cumbersome to maintain.

Best practices for responsive web sites

If you don’t do CSS level response, how do Taobao, Weipinghui and so on make corresponding interface rendering for different clients of mobile phones and PCS?

Take a look at Taobao: THE PC side of the display



Fig.1 Taobao PC1



FIG. 1 Taobao PC2

As you can see, no matter how much the browser size shrinks, it doesn’t have the same effect as it does on mobile.

Mobile display (simulated with Chrome browser) :



Picture 1 Taobao mobile phone

Similarly, in the results interface of mobile phone access, the window can be zoomed in and out, and it can also be shrunk freely. The layout is intact, and the result of PC browser will not be presented.

The result appears to be the same as the CSS control response. But a careful eye will notice that a PC visit to www.taobao.com will still lead you to the same site, while a mobile visit to www.taobao.com will redirect you to www.m.taobao.com, a site specifically designed for mobile clients. The principle is also very simple. The server identifies the device information accessed by the user by identifying the HTTP request header user-Agent sent by the user. According to the value, the device is identified as PC or mobile client, and jumps to the corresponding URL according to the result.

By identifying the request header user-agent to divert customers, on the one hand, more accurate to provide customers with the corresponding services, saving bandwidth resources, increasing the personalized website, maintainability. On the other hand, it also improves the performance. This shunting strategy is similar to NgniX, and also reduces the server pressure.

To sum up, this is not to deny CSS-level responsiveness. Even sites that use device streaming can use the CSs@Media feature to tailor styles for different sizes on PC/ mobile clients. This is not to say that CSS-level responsiveness is useless, for small and medium-sized sites, it is also a good choice, because it is fast and effective, there is no time and energy to deploy two systems site complexity is not very high, in fact, CSS-level responsiveness is a good choice. (Personal website response style is made with CSS [face, retreat])