Subscribe to our blog

To get the latest and most quality design resources!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free

Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free
Start prototyping and collaboration
Blog > Web design > For Beginners: A Quick Understanding of Responsive Web Design

For Beginners: A Quick Understanding of Responsive Web Design


Now we live in an era with fast pace, so we always tend to do things faster and more efficient. That’s why mobile devices such as mobile phones, tablets have appeared, they can help us deal with our work quickly when computers are not by our side. Understanding responsive web design is inevitable for web designers/developers, because different devices have different sizes, the user experience is certainly different when users are browsing the websites. And the size of web page in computer is much bigger than that in mobile services. If you can use responsive web design to adapt them to different pages of mobile devices, It would greatly improve user experience. No matter what devices you use, you would not miss any content of the website.

The evolution of 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 according to the width of the screen so as to adapt to different sizes of the devices.

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 I 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 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. So here comes the question: Is it really necessary to use responsive web design for these small websites? Maybe we should keep on understanding web design, then wait and see whether the responsive web design would be abandoned or not. If you have any good ideas about this topic, I’m looking forward to your comments.

future of RWD

The all-in-one product design platform for prototyping, collaboration, and creating design systems.

Get Started for Free

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

Let's chat