Websites are key source of sharing information. A few years ago end users only required an informative web page where they can find relevant information but now a day user not only want a good informative website but also looks for better UI. A web page should be device independent and it should be good enough to adjust itself according to the devices like desktop, IPAD, mobiles etc. In this article I will try to explain, how can we achieve this requirement.
A responsive website clearly means that a web page which has ability to adjust it's layout according the device on which it is open. Responsive means a web page which is not restricted to a particular device. In this article I will try to explain about how can we create a responsive web page with a simple example.
Let's create a simple web page with header and menu item on top. Then a left panel and a right panel as you can see in the screen shot above. So let's add few html tags.
<html>
<head>
<title>Responsive web page - Dot Net-Concept</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<link rel="stylesheet" type="text/css" href="CSS/Style.css">
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JS/responsive.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="logo-header">
<a href="http://www.dotnet-concept.com" class="navbar-brand">Dot Net-Concept Examples</a>
</div>
<div id="menubtn">Menu</div>
<div class="menu-area">
<ul>
<li><a href="http://www.dotnet-concept.com" class="navbar-brand">Home</a></li>
<li><a href="http://www.dotnet-concept.com" class="navbar-brand">About Us</a></li>
<li><a href="http://www.dotnet-concept.com" class="navbar-brand">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div style="clear:both;"> </div>
<div id="maindiv" class="container">
<div class="body-content">
<h3>Responsive web page example</h3>
<hr />
<div class="left">
<h1>Paragraph Heading</h1>
<p>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </p>
<p>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </p>
<p>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </p>
<h1>Paragraph Second Heading</h1>
<p>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </p>
<p>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </p>
<p>This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </p>
</div>
<div class="right">
<div class="border">
<div class="header">Header First</div>
<div class="body">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </div>
<div class="body">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </div>
</div>
<div class="border">
<div class="header">Header First</div>
<div class="body">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </div>
</div>
<div class="border">
<div class="header">Header First</div>
<div class="body">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </div>
<div class="body">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </div>
<div class="body">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. </div>
</div>
</div>
</div>
<div style="clear:both;"> </div>
<hr />
<footer>
<p>© 2014 - <a href="http://www.dotnet-concept.com">DotNet-Concept.Com</a></p>
</footer>
</div>
</body>
</html>
Now let me add css for this.
Style.css
a{text-decoration:none;}
.body-content{padding-left: 15px;
padding-right: 15px;
Margin-top:50px;
height:70%;}
.logo-header{width:250px;float:left;height:100%;}
.menu-area{float:right;}
#menubtn{width:70px;height:100%;color:yellow;float:right;padding: 12px;font-size: 1.25em;display:none;cursor:pointer;}
ul>li{color:#fff; text-decoration:none; display:inline-block;}
.left{width:69%;float:left;}
.right{width:30%;float:right;}
.border{border:1px solid #808080;border-radius:5px;margin-bottom:15px; }
.header{background-color:#808080;color:#fff; font-weight:bold;font-size:1.8em;padding:5px;}
.body{padding:5px;}
Now when we have html with css code. So my page is ready. Now it is time to make it responsive. For this I will define media type for different screen size. Here in this example I will define only two screen size, for 650px and 700px. Rest will pick by default size. You can try more if you want same as I am doing. So let's add responsive css style.
@media only screen and (max-width: 700px) and (min-width:651px) {
.left{width:55%;}
.right{width:44%;}
}
@media only screen and (max-width: 650px){
.left{width:100%;float:left;}
.right{width:100%;float:left;}
#menubtn{display:block;}
.menu-area{display:none;float:left;width:100%;}
.container{min-width:300px;}
ul>li{display:table;}
}
Now when are done with our css rules. Doing this my page will look something like this when resizing browser size.
Now I am almost done. Just to make my menu link working I will add a little JQuery code. I found people doing this in other way but I like this best.
Below is my jquery code. I named my jquery file as responsive.js. It will help my menu icon working.
$(document).ready(function () {
$('#menubtn').on('click', function (e) {
$(".menu-area").toggle();
});
});
So I am done. After doing all I managed to make my page responsive.Hope this will help you in making your web page responsive. You can do more if you want. So try yourself and enjoy.
