The necessity and difficulties of designing responsive website

With the popularity of smart phones, many webmasters have found that the traffic from mobile phones is no less than that of PC stations, so Responsive Design is increasingly becoming the most respected mobile web optimization method. So what are the necessities and difficulties of designing responsive websites?

First: the origin of website responsive design

Ethan Markett first proposed the concept of Responsive Web Design (RWD) in 2010. (It was not easy to put forward this concept at the time) He creatively summarized according to the techniques and strategies commonly used by engineers when dealing with the effects of web content displayed on different screen resolutions. In short, it means that the webpage makes corresponding adjustments according to the screen width, and strives to achieve that the content can be presented to the user in the most appropriate way under different devices.

The principle of responsive website design is that in CSS, there is an attribute media that is not commonly used. In order to achieve the purpose of responsive design, let CSS use different CSS codes according to the screen width, so as to automatically adjust the width of the page DIV. Of course, in addition to CSS, you can also use JS to dynamically adjust the content of the page, but this technology is not very popular.

Second: Why should the website use responsive design

If you still have doubts about whether the website needs to implement responsive design, I believe the following figures will make you more aware of the need for the website to implement responsive layout.

1. 86% of users think that the company's mobile website should also look good

2. The number of smartphone users has surpassed the number of PC users in 2014

3. 73% of users will use multiple devices at the same time (or they have a smartphone)

4. 49% of users said that if the company's mobile website is not good enough, it will often give people the illusion of not paying attention to the user experience

5. 74% of smartphone owners use their mobile phones to access the Internet

6. 49% of mobile phone users believe that there is room for improvement in the company's mobile website

7. According to statistics, currently 17% of network traffic comes from mobile phones

8. 68% of netizens said they prefer to use their mobile phones to shop on e-commerce website platforms that are highly user-friendly

9. 67% of mobile device users respond that the loading speed of mobile websites needs to be improved, and the popularity of responsive design is imminent

Summary: As more and more smart mobile devices (mobile phones, tablets) are added to the Internet, the access devices on the Internet are explosively increasing (the resolution of the screen is also explosively increasing). In order to provide a better experience for mobile phones and tablet devices, it is necessary to use responsive website design in website design, and integrate various screen sizes and resolutions from PC to mobile phone, and use technology to adapt web pages to different resolution screens .

Third: So under what circumstances is it more suitable to adopt responsive?

1. You want to adapt to more scenarios cost-effectively

Resources are limited, but always hope to use limited resources to obtain greater value. Although compared to the development and design of an ordinary website, the manpower and time resources required to build a responsive site will increase, but the cost is much lower than that of creating multiple versions for different devices; from From the maintenance point of view, it will be much easier.

2. You don't know which scene is more suitable for the design and development of new products

Rather than picking core devices through prediction and designing them separately, it is better to spend some thoughts to make the website more flexible so that it has the best possible experience on various devices. Because in all cases where the situation is unknown, making predictions will aggravate the process risks, making the results hugely challenging.

3. You want the website to be compatible with future new devices

New equipment is emerging endlessly, instead of passively updating and maintaining, it is better to take the initiative to change and become responsive. Of course, this is just to say that it is more suitable. In fact, personally think that as long as the project resources and time allow, basically most websites can try to implement responsive; and for the first time to try responsive design, you can also choose from \"simple browsing page\" Start.

Fourth: What are the difficulties in designing responsive websites?

1. Difficult design

Because absolute positioning cannot be used, you need to consider readability, area, and behavior on different devices when designing. This is a disaster for the average designer. So there are few outstanding responsive websites.

2. It is more difficult to achieve

Manuscripts designed responsively, of course, also need to be implemented responsively. The basis of responsiveness is HTML5, CSS3. Generally, a website building company usually has no money to hire a master who is proficient in HTML5 and CSS3 technology. At most, let the programmer read the book for 2 days before writing the code, and then catch the duck on the shelf. This leads to even if the designer designs a great template, but after it is implemented, how to look uncomfortable.

3. There are many screen sizes, it is difficult to encode once, run everywhere

At present, the mainstream devices used by everyone to access web pages are: computers (nonsense), iPad, Android Pad (such as Samsung's), smart phones. Then to build a website, you must go to these devices to test and run. Few people in ordinary website workshops are willing to spend so much energy to test a website.

4. Big cost

Because responsive design needs to be compatible with multiple interfaces and function debugging, the entire production process requires UI designers and front-end engineers to constantly blend in the production.

In short, responsive website design provides a more comfortable interface and better user experience (and speed) for users visiting different devices such as computers, mobile phones, and tablets, and with the growth of mobile devices, it has become a general trend.