Speed up your response design

Responsive design is the most recent buzzword that can create a multiple-screen, consistent experience.

Now almost everyone likes the response design, and can be no reason for support, which Flash just appeared that the hot situation a bit similar. However, the response design brings the problem of expressiveness, which needs to be solved by adjusting the image, compressing the image and changing the image size.

However, in order to improve performance, sometimes you have to increase the size of the file. The browsing experience needs to be loaded quickly, and this article will describe some of the ways to speed up the response design.

Why is the response design loading so slow?

On all devices, the response design loads the same HTML elements. Even if your site is dedicated to the desktop or to a tablet, the loaded elements remain the same on other devices. This means that all content, including images and scripts, needs to be delivered over the network.

A survey last year found that 86% of response sites send a full desktop page to the phone. If we can streamline the data, improve the browsing speed, then the response design will be better promoted.

At the same time, responsive design improves the size of the page, which is an urgent problem to be addressed. Because the study found that if the page could not be loaded within 3 seconds, 57% of users would opt out.

How do I improve load performance?

For those who have adopted a responsive design and now want to make further optimizations, mobitest can be used to measure the load performance of Web pages on handheld devices, so that problems can be identified and solved. Of course, if the design is still in progress or planning, then the optimization is more convenient. You just need to be aware of the loading speed in the design process so that you don't have to do it later.

To improve expressiveness, we need to reduce the amount of resources on the page and reduce the size of the page. Does not need to be able to adjust the appearance of the page, through some tools and means can also achieve "thin body."

The first thing to consider is which elements are necessary and which are unnecessary, eliminating unnecessary elements so that HTTP requests can be minimized so that the user waits to load at least. This can be done by compressing CSS and JS, recommend a tool called Compass-Open source CSS framework authoring tools.

JavaScript recommend a tool called UGLIFYJS, you can compress the code.

Selective loading

This is also an important tool to consider, and is very suitable for the acceleration of responsive design, so that mobile users will not download the elements that will reduce the load speed.

Selective loading, which can block the loading of various content, including social windows, images, maps, and others. Before using this method, it is best to conduct a comprehensive test of the website, first to understand which aspect of the page to reduce the load speed, so that the right remedy, the effect can be better.

Image

We all know that images occupy a large number of bytes in a Web page. Generally, the image on the phone is more expressive than the desktop on the poor.

If the site has a lot of content, it will affect the loading speed, so you need to truncate part of the content, so you can increase the load speed. Although it can be done by changing the SRC and IMG elements to adjust the markup, it is no doubt easier to adaptive images with a PHP solution. The software automatically adjusts to the size of the screen and scales the embedded HTML image reasonably, without changing the markup. The main combination of the elastic picture technology (Fluid image), can easily solve the problem, and save load time. This adaptive image takes up only a htaccess file, a php file, and a line of JavaScript code to determine the size of the device screen that accesses the user.

Text

Text is also included in the "slimming" range, and on a smaller screen, improper layout of the text may cause reading problems. Fittext can solve this problem, is a jquery plug-in, automatically change the font size. Fittext can only solve the title problem, the paragraph text problem cannot be resolved.

Why do you choose a response design?

With any new technology and products, just after the advent, often a wide range of problems, responsive design is the same, but can not ignore its value, can not ignore it will bring the perfect experience. Through the response design, we can provide users with a better browsing experience. No one will because the past method is simple, but the use of retro technology, we need to innovate, need to solve problems with innovation, and innovation at the same time constantly adjust, revise, to achieve the best.

Google is very supportive of responsive design, and their recommendations use responsive design, and they think response designers are best suited to the phone's way.

In social-networking sites, responsive design is also a big deal, and many handheld devices are already experiencing the same experience on the desktop.

To say further, the response Web site can improve work efficiency, with fewer staff, you can achieve better results.

Value lies

Mobile phones and tablets are becoming more and more popular, meaning that more and more people are using them, because it is more convenient to use them to surf the internet. Tablet PCs with iOS and Android are in the digital consumer market, and sales are soaring.

So far, although the response design has a lot of inconvenience, but the advantages outweigh the disadvantages. In spite of the slight loading speed problem, a survey interviewed a number of world-renowned brands, although the response design some loading problems, but can bring a significant increase in traffic.

The response design on average increased the number of mobile traffic on the Web site by 23%, reducing the bounce rate by 26% (the bounce rate defines the ratio of visits to a single page to the total number of visits). The bounce rate reflects the quality of the boot page, and if the boot page is good, the user will continue to browse other pages instead of browsing through a single page and then choosing to leave. ) increased the length of the visit by 7.5%.

O ' Neill, a popular surfing apparel supplier, has improved by 65.7% in the conversion rate of the ipad and iphone (site conversion rate = Number of visits/total visits to the corresponding action) after using the response design. The volume of transactions performed on portable devices is almost the same as for desktop devices, with profits almost one-fold.

Android devices, because of its wide popularity, platform support is widespread, portable device conversion rate is more obvious, and can slightly drive the conversion rate on the desktop equipment.

The above analysis is only a brand story, from which we can see the role of response design is very large, do not forget, in the previous years, response design for social media/social application of the promotion of a huge role.

How to ensure the load speed of the page while the response design, find the most perfect balance point, it is very worthwhile to study. In the face of challenges, we must bravely face, efforts to optimize, improve, if because of problems and stagnation, and choose to escape, then the end only be eliminated.

67% of mobile phone users have the experience of using mobile phone network, mobile phones will be in the Internet to replace the desktop. As a result, more opportunities are available in mobile devices, so we need to provide a better, more responsive design.

Although the response design is still in the early stages of development, there is no doubt that market demand will stimulate its rapid development, so we need to master some of its basic rules, more understanding of the response design.