Lets Create Responsive Web Page [Tutorial]

Tutorial: Lets Create Responsive Web Page

In our last post How to crate responsive web design? we have given some basic idea and demo of responsive web design. Now, Lets create Responsive web page : this article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are the heart of responsive Web design:

• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Example

So let’s create an responsive web page which will have all the basic features of responsive web designing. This is a very basic design as we are concentrating on the responsiveness of the design rather than aesthetics. So, let’s start…

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

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

Other viewport settings include maximum-zoom and initial-scale.

HTML

Now its time for html. While writing a html document do check the markup validity of HTML5 so that it will rendered by the browser properly and should also indexed by the search engine bots. So here is is the html document.

<!-- Div Wrapper Element Starts Here -->
<div id="Wrapper"><!-- Header Element Starts Here -->
<header id="header"><!-- Hgroup Element Starts Here -->
<hgroup id="title">
<div id="logo"></div>
<!--
<h1>Creating HTML5 <span>Responsive Web Template Using Media Queries</span></h1>
-->
<h2>A<small> Responsive</small> web template!</h2>
</hgroup>
<!-- Hgroup Element Ends Here -->

<!-- Nav Element Starts Here -->
<nav> <a href="http://www.dzyngiri.com/">Home</a>
<a href="http://www.dzyngiri.com/?cat=5">Tutorials</a>
<a href="http://www.dzyngiri.com/?cat=10">Inspiration</a>
<a href="http://www.dzyngiri.com/?cat=11">Freebies</a>
<a href="http://feeds.feedburner.com/dzyngiri" target="_blank">RSS Feed of all articles</a>
<a href="http://twitter.com/dzyngiri" target="_blank">JOIN US on TWITTER</a>
<a href="http://www.facebook.com/dzyngiri" target="_blank">JOIN US on FACEBOOK</a>
<a href="http://www.dzyngiri.com/?page_id=5">Contact Us</a>
</nav></header>
<!-- Header Element Ends Here -->
<!-- Div wrapper2 starts here -->
<div id="Wrapper2"><!-- Sidebar Element Starts Here -->
<aside id="sidebar-wrapper"> <nav>
<h1>We are Social !</h1>
<ul>
	<li><a href="http://www.facebook.com/dzyngiri" target="_blank">Facebook</a></li>
	<li><a href="http://twitter.com/dzyngiri" target="_blank">Twitter</a></li>
</ul>
</nav> <nav>
<h1>Recent Posts</h1>
<ul>
	<li><a href="http://www.dzyngiri.com/?p=774" target="_blank">How to make website Readable [Tips]</a></li>
	<li><a href="http://www.dzyngiri.com/?p=760" target="_blank">Gliding Divs Using jParallax Plugin [Tutorial]</a></li>
	<li><a href="http://www.dzyngiri.com/?p=752" target="_blank">Comparing HTML5 Mobile Web Framework</a></li>
	<li><a href="http://www.dzyngiri.com/?p=701" target="_blank">Free Logo PSD Templates [Freebies]</a></li>
	<li><a href="http://www.dzyngiri.com/?p=682" target="_blank">Stunning Modal Web PopUp [Freebies]</a></li>
</ul>
</nav>
<!-- Sidebar Element Ends Here -->

<!-- Another Sidebar Element Starts Here -->
<section>
<h1>Advertisement</h1>
<!-- BuySellAds Zone Code -->
<div style="margin-top: 15px; margin-left: 30px;"></div>
<!-- End BuySellAds Zone Code --></section></aside>
<!-- Another Sidebar Element Ends Here -->
<!-- Article Element Starts Here -->
<article id="contents">
<!-- Article's Header Element Starts Here -->
<header>
<h1><a title="How to make your website Readable [Tips]" href="http://www.dzyngiri.com/?p=774">
How to make your website Readable [Tips]</a></h1>
</header>
<!-- Article's Header Element Ends Here -->
<img src="images/featured_Image.jpg" alt="Featured Image 01" />

An important aspect of font selection while designing a website,
for one reason or another, I didn’t take in consideration is the
readability of the “fonts”: “now” that you have the possibility to
choose the font you want for your website, you have to be careful
not to base the choice only on the aesthetic ( excited for the new
CSS3), since the ability to set a certain font doesn’t necessarily
mean that it’s the right choice, simply because some fonts are
more readable than others [...]

[<a href="http://www.dzyngiri.com/?p=774" target="_blank">Read more</a>]

<!-- Article's Header Element Starts Here -->
<header>
<h1><a title="Gliding Divs Using jParallax Plugin [Tutorial]" href="http://www.dzyngiri.com/?p=760">Gliding Divs Using jParallax Plugin [Tutorial]</a></h1>
</header>
<!-- Article's Header Element Ends Here -->
<img src="images/glding_divs.jpg" alt="Featured Image 02" />

jParallax turns a selected element into a ‘window’, or viewport, and all its
children into absolutely positioned layers that can be seen through the viewport.
These layers move in response to the mouse, and, depending on their dimensions
(and options for layer initialisation), they move by different amounts, in a parallaxy
kind of way [...]

[<a href="http://www.dzyngiri.com/?p=760" target="_blank">Read more</a>]</article>
<!-- Article Element Ends Here --></div>
<!-- Div wrapper2 ends here -->

<!-- Footer Element Starts Here -->
<footer id="copyrights">
<small>© 2012 <a href="http://www.dzyngiri.com/" target="_blank">Dzyngiri</a></small>

<a href="http://www.dzyngiri.com/?page_id=23" target="_blank">About Us</a> -
<a href="http://www.dzyngiri.com/?page_id=29" target="_blank">Advertise</a> -
<a href="http://www.dzyngiri.com/?page_id=5" target="_blank">Contact Us</a>
<address>Go back to <a href="#">Tutorial to download</a></address></footer>
<!-- Footer Element Ends Here --></div>
<!-- Div Wrapper Element ends Here -->

CSS

Lets create different id’s for various modules like sidebar, logo, main content and all.

/*
Main Styles
*/
#Wrapper{ width: 90%; margin:0px auto;}
#Wrapper2{ overflow:hidden; border:1px dotted #ddd;}
#header {
	width: 100%;

}

.navigation {
	text-align: left;
	display: block;
	line-height: 50px;
	padding: 5px 0px;
}

.navigation a {
	display: inline-block;
	margin: 0px 4px;
	padding: 0px 6px;
	color: #aaa;
	line-height: 30px;
	font-size: 15px;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #fff;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.navigation a:hover{
	color: #333;
}
.navigation a:active{
	background: #fff;
}

#title h1 a, #title h1 a:hover, #title h1 a:hover, #title h1 a:hover  {
	margin: 40px auto 20px auto;
	padding: 15px auto;
	display: inline-block;
	text-decoration: none;
	color: #444;
	-webkit-font-smoothing: antialiased;
	border-bottom: 6px solid transparent;
	text-rendering: optimizeLegibility;

}

#title h1 a:hover {
	border-bottom: 6px solid #eee;
}

#title h2 {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
	color: #6190ca;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
	line-height: 140%;
	padding:5px 0px;
}

#title h2 small {
	color: #000;
	font-size: 13px;

	font-weight: bold;
	text-transform: uppercase;
}

#title h2 a {
	text-decoration: none;
	color: #999;
}

#contents{
	min-height: 408px;
	width: 65%;
	float: left;
	padding:15px;
	overflow:hidden;
	line-height:21px;
}

#contents img {
	-moz-box-shadow: 2px 2px 10px #ccc;
	-webkit-box-shadow: 2px 2px 5px #ccc;
	box-shadow: 2px 2px 10px #ccc;
	border:#ffffff solid 8px;
	margin-top:15px;
	border-radius:6px;
	height:80%;
	width:80%;
}
#contents h1{ padding:5px 0px;}

#sidebar-wrapper {
	float: left;
	width:29%;
	padding:10px;
	border-right:1px solid #ccc;

}

#logo{ background:url(../images/logo.png) no-repeat; height:80px; width:289px;}

.sidebar {
	float: left;
	padding: 10px;
	width:90%;
}
.sidebar li{ padding:5px 0px;}
blockquote{ padding:10px; margin:0px 0px; border-bottom:1px solid #dedede;}
blockquote:before {
content: '\201C';
}
blockquote:after {
content: '\201D';
}
#copyrights{border-top:3px solid #CCC;border-bottom:3px solid #CCC;}
#copyrights p{ float:left; margin:10px 15px 0px 0px;}

Now we are done with the basic structure of our page. So, let’s make it responsive now. Starting with CSS, media types were used to apply CSS for approximately all the standard screen resolution (you can have a look in this post for Media Queries for Standard screen resolution)

@media all {
	#Wrapper,#logo,#navigation ul li a {
		transition:all 0.5s linear;
-o-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
	}
}

@media screen and (min-width: 1401px){
	#Wrapper{ width: 1300px; margin:0px auto;}
	#contents{
	width: 65%;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
	#Wrapper{ width: 1100px; margin:0px auto;}
	#contents{
	width: 65%;
	}

}

@media screen and (min-width: 961px) and (max-width: 1200px) {
	#Wrapper{ width: 960px; margin:0px auto;}
	#contents{
	width: 65%;
	}
	#contents h1{ line-height:40px;}
}

@media screen and (min-width: 859px) and (max-width: 960px) {
	#Wrapper{ width: 830px; margin:0px auto;}
	#navigation ul li a{ font-size:12px; padding:0px 11px;}
	#contents{
	width: 63%;
	}
	#contents h1{ line-height:40px;}
}

@media screen and (min-width: 761px) and (max-width: 860px) {
	#Wrapper{ width: 740px; margin:0px auto;}
	#navigation ul li a{ font-size:12px; padding:0px 11px;}
	#contents{
	width: 63%;
	}
	#contents h1{ font-size:30px; text-align:left; line-height:30px;}
}

@media screen and (min-width: 641px) and (max-width: 760px) {
	#Wrapper{ width: 620px; margin:0px auto;}
	header{ text-align:center;}
	#navigation{ height:190px;}
	#navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
	#navigation ul li a{ font-size:11px; padding:0px 0px; width:100%;}
	#contents{
	width: 55%;
	font-size:16px;
	}
	#contents h1{ font-size:25px; text-align:left; line-height:30px;}
	#comments h1,.sidebar h1{ font-size:16px; text-align:left; line-height:normal;}
	#sidebar-wrapper {
	float: left; font-size:14px;
	width:30%;clear:both;
	}
	#logo{ background:url(../images/logo2.png) no-repeat; height:55px; width:200px; margin-left:auto; margin-right:auto;}
}

@media screen and (min-width: 421px) and (max-width: 640px) {
	#Wrapper{ width: 420px; margin:0px auto;}
	header{ text-align:center;}
	#navigation{ height:190px;}
	#navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
	/*.navigation a{ float:none; font-size:16px; padding:0px 0px; width:100%; text-align:center; text-transform:uppercase;}*/
	#contents{
	width: 95%;
	font-size:14px;position:relative;
	}
	#contents h1{ font-size:22px; text-align:left; font-weight:bold; line-height:normal;}
	#comments h1,.sidebar h1{ font-size:15px; text-align:left; line-height:normal;}
	#sidebar-wrapper {
	float: none; font-size:14px;
	width:95%;clear:both;
	}
	#logo{ background:url(../images/logo2.png) no-repeat; height:55px; width:200px; margin-left:auto; margin-right:auto;}
}

@media screen and (min-width: 320px) and (max-width: 420px) {
	#Wrapper{ width: 320px; margin:0px auto;}
	header{ text-align:center;}
	#navigation{ height:190px;}
	#navigation ul li{ float:none; text-align:center; border-bottom:1px solid #dedede; }
	.navigation a{ float:none; font-size:13px; padding:0px 0px; width:100%; text-align:center; text-transform:uppercase;}
	#contents{
	width: 95%;
	font-size:14px;position:relative;
	}
	#contents h1{ font-size:18px; text-align:left; font-weight:bold; line-height:normal;}
	#comments h1,.sidebar h1{ font-size:14px; text-align:left; line-height:normal;}
	#sidebar-wrapper {
	float: none; font-size:13px;
	width:95%;clear:both;
	}
	#logo{ background:url(../images/logo3.png) no-repeat; height:41px; width:150px; margin-left:auto; margin-right:auto;}
}

@media screen and (min-width: 0px) and (max-width: 319px) {
	#Wrapper{ width: 100%; margin:0px auto;}
	header{ text-align:center;}
	#navigation{ height:190px;}
	.navigation a{ float:none; font-size:13px; padding:0px 0px; width:100%; text-align:center; text-transform:uppercase;}
	#contents{
	width: 95%;
	font-size:14px;position:relative;
	}
	#contents h1{ font-size:16px; text-align:left; font-weight:bold; line-height:normal; }
	#comments h1,.sidebar h1{ font-size:14px; text-align:left; line-height:normal;}
	#sidebar-wrapper {
	float: none; font-size:13px;
	width:95%;clear:both;
	}
	#logo{ background:url(../images/logo3.png) no-repeat; height:41px; width:150px; margin-left:auto; margin-right:auto;}
}

You can have a look what exactly we have created. If you have any query, confusion, feedback regarding the topic, then do comment below.

Tags css3, design, featured, html5, template, tips, websites