What is responsive Web Design aka RWD?

Learn: how to make a webpage responsive? In this article we are going to learn to make web design responsive.
Submitted by Abhishek Pathak, on July 18, 2017

As a web designer, you must have come across this revolutionary term, Responsive Web Design. Responsive Web Design or RWD is a technique that enables a single webpage to adapt itself for different sizes of screens without having the user to scroll sideways.

The term was coined by Ethan Marcotte in his blog post ( Responsive Web Design) describing how a single website can change itself to fit appropriately in different screens. His post was appreciated by fellow designers and gave him the credit of Responsive Design.

How does it work?

The responsive design is an additional layer of CSS over the top of HTML that defines some rules for an element. When the screen size reaches the defined width, the browser automatically forces to load the CSS defined for those values.

How does the browser know when to change?

When we write the code in CSS, we give it some values for which it will act responsively. The common screen width sizes are 1024px, 768px, 420px.

These are easy to break, 1024px and above are for desktops, 768px and above for tablets and lower than 420px for mobile screen.

Media Queries

The code of CSS that we were talking about is known as media queries. Whatever you write inside these media queries, will load on the selected elements.

body {
    background: #3e4;
}

@media (max-width: 768px) {
    body {
        background: #f56;
    }
}

Here @media signifies media queries and max-width is 768px. That means if the screen size is less than or equal to 768px only then this code will be rendered. Here we are styling the body for an example.

First we will give normal styling to body, and then inside media query, we will apply different styling. See a working demo below.

Here’s a demo:

DEMO

HTML with CSS of DEMO file:

<html>
<head>
    <title>Responsive Design</title>
    <style>
        body {
            background: #3e4;
        }
    
        @media (max-width: 768px) {
            body {
                background: #f56;
            }
        }
    </style>
</head>
<body>
    <p>Shrink/Resize your Browser!</p>
</body>
</html>

Hope you followed with this article well. If you have any questions regarding RWD, let us know in the comments.

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples