Responsive Web Design


With the wide use of mobile devices, some designers have been considering about are there any ways to realize that one kind of design would be suitable for most cases, that is to say, they want to make the web page automatically adjust its typography web design

So, in 2010, a designer named Ethan Marcotte firstly advocated the concept of responsive web design, which refers to the web design that can automatically fit in the screen width and make the appropriate adjustments. He also advocates that we should shift our design thinking to appropriate these constraints by using fluid grids, flexible images, and media queries; he shows us how to embrace the ebb and flow of things with responsive web design.

In 2012, responsive web design was voted as the second of top web design trend by net magazine. From that moment, responsive web design has been commonly used and developed in the website. Now, it is constantly changing and being innovated.

The definition of responsive web design

Before understanding responsive web design deeply, we should know the basic definition of it. Responsive web design is a technical practice in web design which makes the website be able to adapt to different screen resolutions by reducing the user’s ability to zoom, pan and scroll when browsing from a different device, such as from a desktop computer monitor to a mobile device. For web designers and front-end developers, they can no longer make design for a variety of different devices as before, responsive web design is better to maintain the website.

Responsive web design (RWD) vs. Adaptive web design (AWD)

When we talk about the RWD, we have to mention the AWD. People have different opinions towards them, some people hold the opinion that there is no difference between responsive and adaptive design. Do they really have same concepts? My answer is no. It is undoubted that they do have a lot of similarities, such as, whether RWD or AWD, web interface will change with the size of the device screen without affecting the user’ experience. However, their principles of work behind, the cost of inputs, the time they invest are totally different from each other.

RWD is more advanced than AWD, so for new designers, they must learn more responsive web design tutorials. It would use the same website to be compatible and adapt to a variety of different terminals, but AWD needs to design a lot of web pages to match different devices. What’s more, RWD would not change the content, but change its typography or layout, while AWD would like to delete some content and functions to make mobile devices user-friendly.

It is clearly that both of them have their advantages and disadvantages. For example, RWD would cost more than AWD, but it will be more convenient to solve problem. It is also more flexible, particularly in making the responsive web design wireframe more quickly and easily. On the contrary, the technical content of AWD is lower than RWD, and its operation is more controllable, but there would be heavier workload, and it is also not so smooth. Therefore, Designers can choose which is more suitable for their own according to these advantages and disadvantages mentioned.

The future of responsive web design

Although the responsive web design has been widely recognized and used, in fact, there are still many controversies among them. One of the hottest problems is that its high costs bring low efficiency. Responsive web design process is a relatively complex process with more money invested. If there are only some small web development and web hosting companies that choose to use responsive design, finally the proportion of their cost and income will be very small or even negative. And the truth is, responsive web design is not very useful for some small websites.