Everything changes with the time and Internet is no exception. A site which was available only on web and could be access frequently on desktops now has shifted to the mobile phones which may have different resolutions and device sizes due to the boom of smart phones. Even the Internet giant Google recommends responsive sites for better SEO. If your site is not adaptive with those devices, you may be left behind and loose potential users.

What is Responsive Web design

Responsive website design also termed as RWD in short are flexible, adaptive and device friendly layouts suitable for almost all screen size and resolution. Days are gone when the mobile optimized version of website were in trend for the same purpose. Now a single site comes with the device friendly layout which response properly with the devices wether it is a desktop, tab or smart phones.

So let's begin.

What is viewport

Viewport is simply the visible part of a web page of any device. Generally it varies device to device. For example, browsers in desktop or large screen has much area to display the webpage compared to the viewport of tabs or smart phones. So viewport meta tag enable us to render the webpage as per the device virtual viewport and allow the browser to render complete page as if it is desktop browser. If we do not use viewport meta tag the device will render the webpage with default viewport of the device. In this case, if you are browsing a webpage on a moble with resolution 320px, without viewport meta tag it may show you only those parts of page which fits in the viewport of your device.

So, we simply put the viewport meta tag in the head of the webpage.

<meta name="viewport" content="width=device-width, initial-scale=1.0", user-scalable=no" />

width=device-width - physical width of the device in pixels.
initial-scale - sets the the initial scaling of the viewport to 1 which simply means that all the content will be set to default device width
minimum-scale - Minimum zoom amount of webpage
maximum-scale - maximum zoom amount of webpage
user-scalable - allow users if the web page can be scaled or not. Possible values - yes / no. Genrally this may not be good idea to set the value no. As user may zoom the page for better readability or viewing experience. If we disable it, user loose the control to zoom the page.

So the standard viewport syntax can be 

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobile first approach

Using the Mobile first approach it becomes a bit easy to customize the site as the screen size grows and also prevents the chance of repeating the extra stylesheet ruleset to be written for larger device-width. In this approach the complete site is designed for mobile first then move toward the larger screen.

Smart Phones -> Tab -> Desktop -> For Large screens

Media Queries in CSS3

Media queries allow to write the specific ruleset when the specific condition is true. For example, if we want to set the background of webpage grey in color of a device with the maximum resolution 320px, we will write

@media screen and (max-width:320px)
{
   body {background: grey}
}

This changed the behaviour and layout of websites completely. Now Web pages can be customized as per the specific screen resolutions to be adaptive as per the device resolution. 

Now we will move to Media Queries for standard devices. 

Genrally, there are many sites which provides the standard breaking points for the different devices. But we suggest to definine your own breaking points to learn and understand the technique properly. We can define the media queries as per our site requirement by resizing the browser to find the best suitable breakpoint for the particular site.

So, we generally target the smart phone, tab , desktop and large screens.

@media screen and (min-width: 480px) {
/**/
}
@media screen and (min-width: 768px) {
/**/
}
@media screen and (min-width: 1024px) {
/**/
}
@media screen and (min-width: 1400px) {
/**/
}

Let's proceed to design a simple responsive webpage with media queries. Our page structure is simple and easy. Here is the basic structure.

-Header
     -Navigation
-Content
     -Two Column
-Footer
     -Four Column

We have created navigation, added some content to the page, created the columns and footer with four columns. In head of webpage, we have added title and meta with two stylesheet. The first stylesheet - style.css has universal and common style rule set for the site and the second stylesheet named media-queries.css which contains all the media queries and breakpoints for the site.

It is good practice to separate the stylesheet for media queries. It becomes easy to maintain and update in future if any update required.

Here is the HTML Markup -

<html>
<head>
<title>RWD Tutorial - CodeRomeos</title>
<!-- Common and base stylesheet -->
<link href='style.css' type='text/css' rel='stylesheet'>
<!-- stylesheet for rwd -->
<link href='media.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div class='wrapper'>
<!-- Header -->
<header>
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
<div class='clrfix'></div>
</ul>
</nav>
</header>

<!-- Main Content -->
<div class='content'>
<div class='slide'>
<img src='images/slide.png'>
</div>
<div class='columnLeft'>
<h2>Dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, impedit voluptatibus mei an. Eam in natum nonumes ceteros. An cum dictas
probatus, ea tation graeci audire sea. Vel id verear prodesset. An justo facilisi deseruisse ius, cu vel
quod corpora. Ex eum sale ludus aliquando. No altera ullamcorper duo.</p>
<p>
Sumo explicari his ut. Eam soluta reprehendunt ut, has liber nostro ex, pro at iudicabit evertitur
theophrastus. Ut mei blandit accusata similique, sed erat senserit te, an nam movet feugiat. Dicant
convenire gubergren mel ei, nec ut idque decore. Putent persequeris ei sea, cu quo inermis consetetur,
ea eum appareat suavitate. Quo ex velit laudem, in has dicam commune. Ius quidam conceptam deterruisset in,
tempor officiis ei his. Quis tractatos prodesset est id, te nibh quaestio ocurreret mel. His id sonet impetus
iracundia, mea te omnes latine. <a href='#'>read more..</a>
</p>
<p>
Causae hendrerit ne sea. Qui at persius sapientem. Cu qui ipsum corpora fabellas, doctus detracto
praesent ad sit, his vero fugit disputando ei. Te est saperet legimus, mei at integre admodum abhorreant.
</p>
<p>
Lorem ipsum dolor sit amet, impedit voluptatibus mei an. Eam in natum nonumes ceteros. An cum dictas
probatus, ea tation graeci audire sea. Vel id verear prodesset. An justo facilisi deseruisse ius, cu vel
quod corpora. Ex eum sale ludus aliquando. No altera ullamcorper duo.
</p>
<p>
Sumo explicari his ut. Eam soluta reprehendunt ut, has liber nostro ex, pro at iudicabit evertitur
theophrastus. Ut mei blandit accusata similique, sed erat senserit te, an nam movet feugiat. Dicant
convenire gubergren mel ei, nec ut idque decore. Putent persequeris ei sea, cu quo inermis consetetur,
ea eum appareat suavitate. Quo ex velit laudem, in has dicam commune. Ius quidam conceptam deterruisset in,
tempor officiis ei his. Quis tractatos prodesset est id, te nibh quaestio ocurreret mel. His id sonet impetus
iracundia, mea te omnes latine. <a href='#'>read more..</a>
</p>
<p>
Sumo explicari his ut. Eam soluta reprehendunt ut, has liber nostro ex, pro at iudicabit evertitur theophrastus.
Ut mei blandit accusata similique, sed erat senserit te, an nam movet feugiat. Dicant convenire gubergren mel ei,
nec ut idque decore. Putent persequeris ei sea, cu quo inermis consetetur, ea eum appareat suavitate. Quo ex velit
laudem, in has dicam commune. Ius quidam conceptam deterruisset in, tempor officiis ei his. Quis tractatos prodesset
est id, te nibh quaestio ocurreret mel. His id sonet impetus iracundia, mea te omnes latine.
</p>
<p>
Causae hendrerit ne sea. Qui at persius sapientem. Cu qui ipsum corpora fabellas, doctus detracto praesent ad
sit, his vero fugit disputando ei. Te est saperet legimus, mei at integre admodum abhorreant.
</p>
</div>
<div class='columnRight'>
<!-- images -->
<img src='images/image2.png'>
<p>
Causae hendrerit ne sea. Qui at persius sapientem. Cu qui ipsum corpora fabellas, doctus detracto praesent ad
sit, his vero fugit disputando ei. Te est saperet legimus, mei at integre admodum abhorreant.
</p>

<img src='images/image1.png'>
<!-- images -->
<p>
Causae hendrerit ne sea. Qui at persius sapientem. Cu qui ipsum corpora fabellas, doctus detracto praesent ad
sit, his vero fugit disputando ei. Te est saperet legimus, mei at integre admodum abhorreant.
</p>
</div>
<div class='clrfix'></div>
</div>

<!-- footer -->
<footer>
<!-- footer column 1-->
<ul>
<li class=''><a href=''> hendrerit ne</a></li>
<li class=''><a href=''> persius</a></li>
<li class=''><a href=''> disputando</a></li>
<li class=''><a href=''> abhorreant</a></li>
</ul>

<!-- footer column 2-->
<ul>
<li class=''><a href=''> hendrerit ne</a></li>
<li class=''><a href=''> persius</a></li>
<li class=''><a href=''> disputando</a></li>
<li class=''><a href=''> abhorreant</a></li>
</ul>

<!-- footer column 3-->
<ul>
<li class=''><a href=''> hendrerit ne</a></li>
<li class=''><a href=''> persius</a></li>
<li class=''><a href=''> disputando</a></li>
<li class=''><a href=''> abhorreant</a></li>
</ul>

<!-- footer column 4-->
<ul>
<li class=''><a href=''> hendrerit ne</a></li>
<li class=''><a href=''> persius</a></li>
<li class=''><a href=''> disputando</a></li>
<li class=''><a href=''> abhorreant</a></li>
</ul>
<div class='clrfix'></div>

<p class='copy'>&copy; 2016 </p>
</footer>
</div>
</body>
</html>

Now we will write some css for the pages - here is the style.css which have global style -

/* Gloabal */
* {
margin: 0;
padding: 0;
border: 0;
}
li {
list-style: none
}
a {
text-decoration: none
}
p {
margin: 0px 0px 10px 0px
}
.clrfix {
clear: both
}
body {
font-family: sans-serif;
font-size: 15px;
line-height: 1.5
}
header {
background: #16acff
}
h2, p {
padding: 15px 10px;
}
nav li a {
color: #fff;
text-align: center;
padding: 6px 9px;
margin-left: 2px;
}
nav {
max-width: 325px;
margin: auto;
padding: 10px;
}
.content, footer {
margin: auto;
max-width: 1170px;
}
.columnLeft {
padding: 10px 15px;
box-sizing: border-box;
}
.columnRight {
text-align: center;
}
footer li {
border-bottom: 1px solid #aaa;
width: 85%;
margin: auto
}
/*Navigation*/
nav li a:hover {
background: #1266ae;
}
/*Navigation*/
.slide img,
img {
width: 100%;
height: auto
}
.content {
border: 1px solid #ddd;
border-top: 0;
}
.columnLeft a {
border-radius: 8px;
background: #f14911;
color: #fff;
font-size: 12px;
padding: 2px 8px;
}
/*wrapper*/
footer {
background: #F1F0F0;
padding: 30px 0px 0px
}
footer .copy {
font-size: 14px;
text-align: center
}

Now the fun begins. Now we will turn it to responsive page using media queries. We will be using following breakpoints in our media-queries.css

@media screen and (max-width:480px) { 

}
@media (min-width:481px) and (max-width:768px) {

}
@media (min-width:769px) {

}

For our first breakpoint with max-width(480px) - This will take care of the layout for the screens which have maximum width 480px.

@media screen and (max-width:480px) {
nav li a {
float: none;
display: block;
}
.columnRight {
max-width: 300px;
margin: auto;
}
footer ul {
max-width: 300px;
margin: auto;
float: none;
}
}

In second breakpoint with min-width(481px) and max-width(768px) -  for the screens which comes under the minimum width of 481px and maximum width of 768px.

@media (min-width:481px) and (max-width:768px) {
nav li a {
float: left;
}
.columnLeft, .columnRight {
float: none;
}
.columnLeft {
width: 100%;
}
.columnRight {
max-width: 300px;
margin: auto;
}
footer ul {
width: 50%;
float: left;
}
}

and the last breakpoint with min-width(769px) -  for all the screens which have minimum width of 769px or greater than it.

@media (min-width:769px) {
nav li a {
float: left;
}
.columnLeft, .columnRight {
float: left;
}
.columnLeft {
width: 70%;
}
.columnRight {
width: 30%;
}
footer ul {
width: 25%;
float: left;
}
}

This is it. As we can see turning any page to responsive is not a hard job. There can be many breakpoints as many required. But it is good to know and use efficient and standard breakpoints for media queries.

Click on result tab in below demo fiddle and resize the page to see the media queries in action. Edit this , change the breakpoints and test it to learn. Let us know if any issue in comment box. 

Demo