On the design of responsive web pages

1. How to understand responsive design (RWD)

Zhongfan: Some academics, first of all, we first understand the response, and then talk about the design, the response is my request can get what kind of response, such as I said "Hello", you will be very easy to reply to my "Hello", because everyone is Chinese, if I say "hello", If our generation had been in junior high school, he would have said "Hello" to me, but if I had said "Bonjour" to you, it might have been known to only the better. Here, for example, my response is equivalent to the responsive device we're talking about, and he has to be able to parse the requirements I sent him. And then we'll talk about design, and the official explanation for the design is this:

1. Set a stratagem.

2. According to certain requirements, to a certain work in advance drawing ﹑ plan.

3. A person who is engaged in design work.

Frankly speaking, design is actually set up a plan, to complete our needs of the work objectives.

From the previous response we can see that the response is both sides, is the process of interaction, in this process we have to consider the affordability of both sides, such as we can not let children carry a big bag. In our web design, we have to consider the performance of the equipment, from the speed, the number of DOM nodes, the size of the screen, and so on, if we from the front and back of the combination of children to candy, to coolie big bag, so that the response.

But the response I'm talking about here is narrow, and we're just reacting from the Web Builder layer.

　　2. The interface design in the response type design

For the interface design, our previous design for the desktop product may be a size, the position of each module is fixed, but in the response design, these things change, the designer will be based on the needs of the product design of several versions, in these different versions, module A in the width of 1024, It may be a black background, but below 768 may turn into a white background, which enables different displays of different widths. This color, background, wide and high can be changed, but one thing we need to be aware of is that the order of the DOM nodes is best consistent, because in a responsive page, we use a streaming layout, the technique of changing the DOM order and the visual order in a fixed layout by absolute positioning or negative outside margins, may not be applicable here.

　　3. Breakpoints for media queries

We know that we change the layout of the page through media query, what width we change the layout, what we call breakpoints, and the more accustomed we are to set breakpoints for certain devices (such as desktops, tablets, mobile phones), such as 1024 desktop, 768 corresponding pad, 480 corresponding mobile phone, but in fact, these things are unreliable, because these screen size will vary according to the development of the times, our response should not only for certain devices, we need an interval value, rather than a resolution of a device. Breakpoints are definitely needed, so how are these breakpoints set? How can we not break a breakpoint for a breakpoint? In fact, these breakpoints are set according to the needs of the content, when our content reached a critical point, the visual effect is not in line with people's aesthetic or affect the content acquisition, this is the breakpoint we need. But we may not be able to cover all of its dimensions in the visual design phase, so we need to combine it with existing devices to establish breakpoints.

Therefore, individuals think that different projects, in response to design the need for the breakpoint is not the same. We know that there are two features in the media query width and device-width, because most of the handheld devices used in the WebKit kernel browser, we generally pass the viewport properties, the width of the device to give the window

This allows us to make media inquiries about certain devices based on the width of the device.

@media screen and (max-device-width:480px) {selector{}}

　　4. The differences in interaction

In response design, we need to consider not only the usage of previous desktop users, but also the different sizes of handheld devices. For example, the floating layer used on PCs is not available on some small size devices, as we can see in the image below. And some small response area links are also not convenient for us to use the fingers to operate, so we can do "seek common ground". For example, depending on the size of the screen, we decide whether to use a floating layer, or increase the operation area, or "uniform". For example, in the Sina Video project distinguish the device to use the floating layer, all the linked operation area made convenient finger operation size.

　5. Specific project development process

5-1. Product strategy and information architecture

Before we get involved in a specific project development process, we should have identified the content consumer groups that our products are targeting, as well as potential target users, such as simple Mobile user groups for small screens, or all of our display devices (mobile, pad, PC, and so on).

When we determine the content consumption habits of target users, we should also do some preliminary analysis of their access habits, time slots and so on. This is not just for a response site, it is a decision-making role for product positioning to development.

In the early product analysis of Mobile Blog project, we can see that the consumption habits of users ' content are also changing as the Times move forward.

The change in subscription devices is rapidly evolving from PCs to phone and pad, so it is more important to improve the reading experience of mobile devices to provide responsive sites for mobile users.

When we have identified the above groups and habits, we will have to target this group of products themselves to make the restructuring. The product architecture or content architecture affects the usability and the availability of content information among different users, and the response must be adjusted to the modules in different resolution devices to meet the priority of different modules in different devices.

　　5-2. Response-Type product design

Response design is a product-side design where we need product managers, interaction designers, designers, and engineers to get involved. We need to break traditional thinking patterns to think about design, from the pure traditional web to mobile applications. Through our first clear information architecture, from the smallest display of mobile devices to do product design, in mobile devices to discard more use of interference, to ensure the best experience of core functions, and interaction with the designer to deal with the intervention of the module to design a smaller and more flexible, and initially determine the design style, design framework and other programs; and engineers need to be in the Product manager and designer to determine the program code testing, make full use of the unique characteristics of different equipment and frame.

　　5-3. Response-Type development

Although in the previous step we mentioned that from the smallest display of mobile devices to do product design, but the actual designers or engineers are from the most complex desktop end, the performance of the richest and most complex functions, do subtraction to the structure of the changes will be appropriately reduced.

The early development of mobile Blog project is actually a process of communicating with product, interaction and designer while testing, because the content presentation and some characteristics support are different in different devices, and some of them are inconsistent with our expectation.

For our page production engineers, we have a single design for the desktop, but in response to design, this situation changes, although we can let the designer according to our product audience summary of the screen width breakpoint to give several versions of the design, However, these designs do not cover all of our users ' devices, such as when we scale the browser, from 1024 to 320, and contain too many different resolution devices. Therefore, in this development process, we need to constantly communicate with the designer in the case of the special situation of the design manuscript can not be covered.

Note : For more wonderful tutorials, please pay attention to the Triple Web Design Tutorial section,