Responsive Web Design Guidelines: What It Is and How to Use It？
Before getting into the details of responsive web design guidelines, let’s have a short background introduction. The responsive web design, firstly put forward by Ethan Marcotte, is not just about the adaptiveness of screen resolution or the auto-scaling of pictures. Instead, it’s more like a new way of thinking where designers need to consider many factors, such as the device performance, Dom node number and the screen size, etc. Following are several responsive web design techniques for your reference.
How about responsive product design?
The responsive design is out of the product design, which requires the engagement of product managers, interaction designers as well as engineers. It’s of necessity for us to break the traditional way of thinking in the design, shifting from the web to mobile applications. The first step is to build a clear information architecture, then get the design started on the smallest display of mobile devices with the abandon of interference so as to ensure the best experience of the core function.
Meanwhile, the participation of interaction designers should deal with the responsive design problems and the issue of how to make the module much smaller and flexible. They also need to confirm the design style and framework. For the developing engineers, their responsibility is to make the test of coding and programming on the basis of the completed project, taking full advantage of individual device’s characteristics and building frame structure.
How does the interface design look like in the RWD?
Previously, most of the interface designs aim to the desktop products, and there will be one single size with fixed location of each module. But everything has changed in the responsive design. According to those responsive web design tutorials on the web, it proves that designers need to make multiple versions of design. A typical example is the module A which is shown in a black background in the width of 1024px is shown in a white background in the width of 768px.
Does the traditional media query breakpoints still go popular?
From the perspective of traditional design, it’s possible to change the page layout through Media Query. For instance, we can change the layout in a fixed width (that’s what we call breakpoint). The usual way of thinking is to set breakpoints in accordance with some devices, such as desktop, tablet and mobile phone. As a matter of fact, the media query breakpoint is unreliable as the screen size will continue changing with the development of technology.
But the responsive design shouldn’t be targeted only at some devices with certain sizes, and there needs an interval value during the design process, rather than a resolution corresponding to a device. Henceforth, it’s necessary to make correspondent settings according to the content need. For designers, they need to find a critical point – that is the value when the visual effects start failing to meet the aesthetic of people or the acquisition of content.
What are the differences between interaction design and RWD?
In the responsive design, it requires a comprehensive consideration about the way of interaction, which is one of the responsive web design key features. An excellent interaction designer should not only consider the habits of desktop users, but also must take the portable devices of different sizes into account. For instance, we’re used to using the floating layer on PC, but it cannot be used on some devices of small sizes. Also, some links of a small responsive area are not easy-to-operate by fingers.
This requires designers to seek common ground while reserving differences. For example, they can decide whether to use floating layer, increase the operating area and keep unified or not, on the basis of screen size. To ease the process of design, we’d like to recommend a simple-yet-powerful prototyping tool – Mockplus. It enables rapid prototyping and highly-visualized interactions with the simple drag-and-drop option.
In Conclusion
Above are the responsive web design guidelines for product design, interface design, media query breakpoints and interaction process. Hopefully, you can find it helpful, and you can also learn about the difference between responsive and adaptive design.