A ramble on responsive design web site

interface Design in responsive design

For the interface design, we used to design for the desktop product may be a size, each module location is fixed, but in the responsive design, these things changed, the designer will be based on the needs of the product design multiple versions of the design, in these different versions, module A in the width of 1024, It may be a black background, but by the 768 it may turn into a white background and achieve a different display at different widths. The color, background, and height can be changed, but one thing we need to note is that the order of the DOM nodes is best consistent, because in a responsive design page, we use streaming layouts to change the DOM order and visual order in a fixed layout through absolute positioning or negative margins, may not be applicable here.

Breakpoints for media queries

We know that we change the layout of the page through media query, and we change the layout at what width, which is what we call breakpoints, and we're more accustomed to thinking about setting breakpoints on some devices (such as desktops, tablets, phones), such as 1024 for desktops, 768 for the pad, 480 for the phone, but in fact, these things are unreliable, because these screen size will be based on the evolution of the times, our response should not only for some devices, we need an interval value, rather than a certain resolution of a device. Breakpoints are definitely needed, so how are these breakpoints set? How can you not break breakpoints for breakpoints? In fact, these breakpoints are set according to the needs of the content, when our content reaches a critical point, the visual effect does not conform to 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 equipment to establish breakpoints.

Therefore, individuals think that different projects, in response to the design of the required breakpoints are not the same. We know that there are two features of width and device-width in media queries, because most of the WebKit kernel browsers are used in handheld devices, and we generally give the width of the windows to the width of the device by viewport properties.

<meta name= "viewport" content= "width=device-width,initial-scale=1, maximum-scale=1″> This allows us to make media inquiries about certain devices based on the width of the device.

The differences in the interactions

In responsive design, we have to consider not only the habits of previous desktop users, but also the different sizes of handheld devices. For example, we are accustomed to the use of the floating layer on the PC in some small-sized devices can not be used, as we saw. And some of the small response area of the link is not convenient to use our fingers to operate, so we can do "differences". For example, depending on the size of the screen, we decide whether to use a floating layer, or to increase the operating area, or "uniform". For example, in the Sina Video project to distinguish the equipment to use the floating layer, all the linked operating area to make the size of the finger operation convenient