As a modern front-end engineer, I don't know how to respond?

With the prevalence of mobile Internet today, the topic of responsive web pages has been pushed to a very important position. Some people predict that the data traffic of mobile Internet will surpass that of desktop in 2015.

 

You must have heard that we are currently in the "Post-PC era", which means front-end developers should handle some user behavior changes, this leads to an era of responsive and adaptive design technology. The key point here is the unification of the web. That is to say, under reasonable conditions, the same content and services should be transmitted no matter whether the user uses any device.

 

What?

 

In 2010, Ethan Marcotte proposed the "responsiveweb design" term, which indicates a webpage design that can automatically recognize the screen width and make corresponding adjustments. For example:

 

(1) When the screen width is greater than 1300 pixels

 

(2) When the screen width ranges from 600 pixels to 1300 pixels

 

(3) When the screen width ranges from 400 pixels to 600 pixels

 

(4) When the screen width is below 400 pixels

 

The core advantage of the responsive approach is that the designer can use the same template for all devices, and only needs to use CSS to customize the content presentation mode on various screen sizes.

 

Key to the composition of responsive web pages

 

The implementation of responsive pages is not difficult, and they are also used by some familiar technologies.

 

(1) Media Query

Media query is mainly used to adjust different styles according to different resolutions. Currently, mainstream mobile devices are based on iOS and Android, and their built-in browsers are WebKit kernels. Therefore, we can use the viewport attribute and media query technology to implement responsive web pages. With this method, we can display different content in different resolutions with the baseline font-size.

 

(2) fluid Grid

Fluid grid, also known as Fluid layout, is to adjust the arrogance of some elements from fixed to auto-scaling percentages or font proportions based on PC implementation. Websites using fluid grid can automatically adjust the width of each column on the page based on the screen width to ensure that the page is always fully displayed and the original basic functions are implemented.

 

(3) Flex box

Flex box is a new model attribute added by css3. Its appearance effectively breaks the floating layout we often use, achieves vertical height, average water score, and proportional division, we can achieve a lot of adaptive la s that we cannot do before. If you want your website to be displayed as a webapp to a mobile phone user, flex box is a good method. The structure of the Flex box and app is similar. The bottom of the header is fixed, while the height of the middle part is adaptive.

 

In addition, compared with traditional web development, because the page layout and content size of responsive design have undergone some changes, the final finished product is likely to differ greatly from the design draft, front-end developers and designers are also required to communicate with each other to avoid unnecessary time waste.

 

Optimization of responsive Web Design

 

In the design process of responsive web pages, some user experience problems and drawbacks are also involved, and further optimization is required.

 

(1) Reduce JavaScript library load

For mobile terminals, jquery is too heavy. For mobile terminals, jquery mobile, Yui, xui, and other alternative frameworks are available.

 

(2) Reduce the number of HTTP requests

Compared with PCs, mobile terminals have a special restriction, that is, users' network traffic is limited. At this time, Ajax asynchronous requests can be used for some internal operations on these pages. For some data that will not change in the short term, you can use the server-side cache, front-end cache, and other mechanisms to save the data, which can reduce the amount of data requests.

 

(3) JavaScript and CSS should be compressed as much as possible

Compressing the JavaScript and CSS used in the page will effectively reduce the page size.

 

(4) use CDN to manage page Resources

CDN is a content delivery network, which aims to avoid links on the Internet that may affect data transmission speed and stability, so that content transmission is more stable.

 

(5) List images for "lazy" Loading

Because the screen size of mobile devices is limited, there is no need to load images in full screen at a time. When loading webpages, we can choose to load them one by one. When users slide pages, then, attach the image.

 

(6) image display optimization

Based on the resolution of your device, you can attach different images at different resolutions. This not only gives users of different terminals a good visual experience, but also does not waste their network data traffic.

 

The anyforwebudc front-end will regularly publish Web Front-end blogs related to Web Front-end technologies and front-end trends. Please wait!