Learning Response Design: How to implement responsive web design

Article Description: Taobao response type WebUI design practice.

Thanks to the invitation of the loan rock, I did a "response-style design practice" in this issue of tea, and it was the last topic to discuss further "how to achieve". Responsive web Design (responsive web designs) is a popular topic today, what is the response design? Simply put, the page design and development should be based on user behavior and equipment environment (System platform, screen size, screen orientation, etc.) to respond and adjust accordingly. Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query.

Responsive design sounds ideal, but its technical implementation is difficult, because the response design is not only the design itself, but also the implementation, further, the implementation principle is simple, but to consider the development costs, performance, maintainability is also full of challenges. For example, we all know that using Mediaquery to implement CSS to fit all kinds of terminals, but mediaquery should be from high resolution or to low fit or from the low resolution to Gao Shi Chuitai match? The container style uses the mediaquery to make the fitting, then the layout is also suitable uses the mediaquery to make the fitting? Add mediaquery fit after the page volume increased, how to reduce the volume of the page in the small screen terminal? How does a component with complex interactions fit? Mediaquery increases code complexity and reduces maintainability, how do I get mediaquery to adapt to the frequently changing Web pages? These questions are not one or two articles that can explain white. We need to refine a set of best practices for implementing responsive design. To this end we set up a "chameleon" group (response design team) to continue to improve the current program, the establishment of a few months, Taobao new business has been a lot of pages to begin to try to respond to design, we will be part of the document refining out, to share with you, Hope that you have just learned to respond to the design of the students to help.

With regard to the problems mentioned earlier, the team has given some ideas and rough implementations of layout and component development, but for designers, the challenge is even more so, because designers can only design a perfect response UI based on the understanding of the full and front-end engineers, after all, a little change on the response UI, will lead to a tremendous amount of development effort. So the response design is a kind of team collaboration mode, which also gives the designers and the front-end engineers a higher demand.

The layout problem mentioned in PPT is slightly more complicated, if the terminal compatibility is considered, first consider the variable width of the container, and the most typical container is a picture-and-text mixed-row container. Unlike the English and Latin language UI design, Chinese Web page layout is not flexible, graphic mixed row is too limited by the text, because in English typesetting, the number of words does not constitute a key factor in the layout of the container, the length of different words, the Chinese page number of Chinese characters will greatly affect the UI, because Ding Wen can easily open graphics and text containers , the Chinese characters are not, such as the menu item Word limit, list items can not be folded line, the layout on the lack of fluid + flexible aesthetic. For visual design, this is the biggest challenge.

The popular grid in fixed-width web design does not apply to multiple terminal compatibility scenarios. So in a fixed-width layout, the CSS grid layout is performing well, and it's more cumbersome to handle the percentage of floating elements. However, most grid systems offer floating property options, which is very bad, and when we insert columns into a grid, the grid styles often distort. In addition, the fixed-width grid support for "response" is bad, and the "culprit" for these problems is the limitations of our existing tools. Resulting in a lack of smart CSS code, a set of CSS corresponding to a fit. Less is a solution to the lack of flexibility in CSS syntax. Less allows CSS to become "programmable" with more flexible adaptability, based on which we develop a further discussion of the response layout.

In the use of less to achieve the layout of a small problem, because the Firefox in the width of the highest attributes of only 3 decimal points of precision, So in some extreme situations, the sum of the element widths may be greater than the total width of the less in a single line, which can exceed 0.000x px. Thus leading to dislocation, the current use of hack in the way of each element after the calculation of the width minus 0.01px temporarily evade the solution, there may be some unknown problems exist, we need to continue to Perfect. Also, Less.js can have a slight impact on performance by compiling the CSS on the client side.

There is one of the most easily overlooked problem is the animation performance of the Smart machine, in the ordinary PC platform, the implementation of the animation is mostly through the setinterval function to complete, jquery and Yui and Kissy is so, but the frame frequency is different. Later each added to the built-in CSS3 transition detection, priority to use CSS3 transition, animation in the modern browser performance has risen a step. But still not fluent in iphone/ipad/android, smoother animation needs to turn on the WebKit hardware acceleration. can refer to a previous PPT to understand the JS animation programming some background knowledge.

CSS3 animation is divided into two kinds, transitions and transform,css3 transform is essentially the content of the elements as a translation, rather than directly to the element as a property gradient, so the performance is better, through the demo can be seen, the mobile side of the DOM operation performance than the CSS3 Animation slowly several orders of magnitude. Therefore, in the animation to minimize the DOM operation, but only the animation of the relative position of the content translation. There is also a CSS3 animation-related properties is Keyframe, which is used to assist in the use of complex animation, by setting keyframes for animation, in the slide control of the simple animation is temporarily unavailable. Therefore, several attributes of CSS3 animation are summarized as follows:

• CSS3 Transition: A smooth change in CSS property values, similar to the setinterval principle, but faster
• CSS3 2d Transform: two-dimensional transformation, CSS property values are not gradient, not used to WEBGL acceleration, speed is increased, but the degree of improvement is limited
• CSS3 3d Transform: three-dimensional transformation, CSS property values are not gradient, open webgl acceleration, speed significantly increased
• CSS3 Animation: The use of keyframe to simulate animation, to achieve complex animation, and performance-independent

So we recommend using Translate3d to enable hardware acceleration on platforms that support transition, and pay attention to using transform instead of transition.

At present we realize the response design to some extent, but there are a lot of optimization work, especially the page volume optimization, it is necessary to next important thinking.

Appendix: PPT Address