Responsive Web Design is a designing approach for development of webpage with features of resizing and scrolling. Responsive Design mean your webpage have better access on each devices like mobile, tablets and desktop. It is a term which is used with the HTML and CSS to resize, enlarge, shrink webpage to make better user experience on every devices. This design gives the better environment to user based on screen size of devices. RWD design the layout based on environment grids, fluids, image with flexibility to shrink and enlarge and CSS media for defining style based on device sizes. The three main basics need for development of RWD are HTML5, CSS3 and JavaScript. See how the responsive Webpage looks like and how much pretty for every devices.
Let us discuss in detail how to design a responsive webpage.
See the ex below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Responsive Menu _ PHPCluster</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body{
padding-bottom: 70px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Responsive Navigation Menu - PHPCluster</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="
background-color: antiquewhite;
">
<ul class="nav navbar-nav">
<li class="active"><a href="#">PHP<span class="sr-only">(current)</span></a></li>
<li><a href="#">Cluster</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CMS <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Wordpress</a></li>
<li><a href="#">Jooml</a></li>
<li><a href="#">Drupal</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Magento</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">OpenCart</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>