What is Responsive Web Design ( RWD) ?

1. A flexible, grid-based layout

Often, the first layer of our grid-based layouts looks like this:

#page { width: 960px; margin: 0 auto;}

We create an element in our markup, give it a fixed width in our CSS, and center it in the page. But when we’re thinking flexibly, we instead need to translate a design created in Photoshop into something more fluid, something more proportional. How do we begin?

Contextual healing

Consider this line we are creating a heading h1 having font-size of 24px .To make the webpage flexible we need to make the font-size flexible as well.

h1 { font-size: 24px; font-style: italic; font-weight: normal;}

To do so, we’ll need to do a bit of math: we’ll simply take the target font size from our component, and divide it by the font-size of its containing element — in other words, its context. The result is our desired font-size expressed in relative, oh-so-flexible ems. In other words, relative type sizes can be calculated with this simple formula:

target ÷ context = result

So with our formula in hand, let’s turn back to that 24px headline. Assuming that our base font-size: 100% on the body element equates to 16px, we can plug those values directly into our formula. So if we need to express our h1’s target font size (24px) relative to its context (16px), we get:
24 ÷ 16 = 1.5
And there we are: 24px is 1.5 times greater than 16px, so our font-size is 1.5em:

h1 { <strong class="markup--strong markup--p-strong">font-size: 1.5em;</strong> /* 24px / 16px */ font-style: italic; font-weight: normal; }

That’s it now we have flexible heading in our webpage , let’s move forward .

Creating a flexible grid:

Let’s move forward by considering an example : we’ve a web page inside which we has a container named .blog , inside of that .blog we’ve another two sub containers named .blog .main and .blog .other respectively.

#page { 
margin: 36px auto; 
width: 960px; 
} 
.blog { 
margin: 0 auto 53px; 
width: 900px; 
} 
.blog .main { 
float: left;
 width: 566px; 
} 
.blog .other { 
float: right;
 width: 331px; }

Nice and neat: we’ve set the width of #page to 960 pixels, centered the 900px-wide .blog module within that container, set the widths of .main and .other to 566px and 331px, respectively, and finally floated the two columns opposite each other. But the result is downright inflexible. Fixed at a width of 960px, our page is blissfully indifferent to changes in viewport size, forcing a horizontal scrollbar upon the reader if the window drops even slightly below 1024 pixels . In short, we can do better.

From pixels to percentages: Instead of pasting the pixel values from directly into our CSS, we need to express those widths in relative,proportional terms. Once we’ve done so, we’ll have a grid that can resize itself as the viewport does, but without compromising the design’s original proportions.

Let’s start at the outermost #page element
#page { margin: 36px auto; width: 960px; } will change to #page { margin: 36px auto; width: 90%; }
I’ll confess that I arrived at 90% somewhat arbitrarily, doing a bit of trial and error in the browser window to see what looked best. By setting our #page element to a percentage of the browser window, we’ve created a container that will expand and contract as the viewport does . And as that container is centered horizontally within the page, we’ll be left with a comfortable five percent margin on either side.

Let’s move to .blog container:

.blog { margin: 0 auto 53px; width: 900px; }

Instead of a value set in pixels, we need to express .blog’s width of 900px in proportional terms: specifically, describing it as a percentage of the width of its containing element. And this is where our beloved target ÷ context =result formula comes back into play. We already know our target pixel width for our blog: that’s 900px,What we want is to describe that width in relative terms, as a percentage of .blog’s containing element. Since .blog is nested within the #page element, we’ve got our context — namely, 960 pixels, the width of #page . So let’s divide our target width for .blog (900) by its context (960):
900 ÷ 960 = 0.9375
We’re left with a result of 0.9375. Doesn’t look like much, I’ll admit. But by moving the decimal over two places we’re left with 93.75%, a percentage we can drop directly into our CSS:

.blog {
 margin: 0 auto 53px;
 width: 93.75%; /* 900px / 960px */ 
}

Let’s move to other two sections :

.blog .main {   float: left;   width: 566px; } 
 
.blog .other {   float: right;   width: 331px; }

Our left-hand content column is floated to the left, and set at 566px; the additional content is floated opposite, sized at a width of 331px. Once again, let’s replace those pixel-based target widths with percentages. But before we drop those values into our target ÷
context = result formula, it’s important to note that our context has changed. Last time, we divided the width of our blog module by 960px, the width of its container (#page). But since they’re nested inside .blog, we need to express our columns’ widths in relation to 900px — the width of the blog. So we’ll divide our two target values (566px and 331px) by 900px, our new context:
566 ÷ 900 = .628888889 331 ÷ 900 = .367777778
Once we move our decimal points we’re left with 62.8888889% and 36.7777778%, the proportional widths of .main and .other:

.blog .main {  
 float: left;  
 width: 62.8888889%;  /* 566px / 900px */
 } 
 
.blog .other {  
 float: right;  
 width: 36.7777778%;  /* 331px / 900px */ 
}

But building a flexible grid isn’t entirely about the math. The target ÷ context = result formula makes it easy to articulate those proportions into stylesheet-ready percentages, sure — but ultimately, we need to break our habit of translating pixels from Photoshop directly into our CSS, and focus our attention on the proportions behind our designs. It’s about becoming context-aware: better understanding the ratio-based relationships between element and container. But a fluid grid is just our foundation, the first layer of a responsive design. Let’s move onto the next step.