Social Networks

After my first tutorial How To Create A Responsive Menu this is the very simple simple responsive web design with html5 and css3 media queries. No matter even its smartphone resolution 320 px or very large desktop (1360 or 2560 px) your site will automatically adjust according to the resolution of the screen. Believe me next future of the web design is only in responsive design, because your site will be read on large scale of the devices like iPhone, iPad, Smartphone, Laptop, Desktop etc.

Download Source

 

Demo

 HTML Code:

Click here to view the HTML Code implementation.

< !doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
 
<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
 
<title>Demo: Responsive Web Design With Media Queries</title>
 
<!-- main css -->
<link href="style.css" rel="stylesheet" type="text/css"/>
 
<!-- media queries css -->
<link href="media-queries.css" rel="stylesheet" type="text/css"/>
 
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
 
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
< ![endif]-->
 
</head>
 
<body>
 
<div id="pagewrap">
 
	<header id="header">
 
		<hgroup>
			<h1 id="site-logo"><a rel="nofollow" href="#">Demo</a></h1>
			<h2 id="site-description">Your Site Description</h2>
		</hgroup>
 
		<nav>
			<ul id="main-nav" class="clearfix">
				<li><a rel="nofollow" href="http://onlinewebapplication.com/">Home</a></li>
				<li><a rel="nofollow" href="http://onlinewebapplication.com/?s=social+media">Social Media</a></li>
				<li><a rel="nofollow" href="http://onlinewebapplication.com/?s=wordpress">WordPress</a> </li>
				<li><a rel="nofollow" href="http://onlinewebapplication.com/?s=Internet">Internet</a></li>
			</ul>
			<!-- /#main-nav --> 
		</nav>
 
		<form id="searchform">
			<input type="search" id="s" placeholder="Search"/>
		</form>
 
	</header>
	<!-- /#header -->
 
	<div id="content">
 
		<article class="post clearfix">
 
			<header>
				<h1 class="post-title"><a rel="nofollow" href="#">Your Latest  Post Title</a></h1>
				<p class="post-meta">
				  <time class="post-date" datetime="2011-05-08" pubdate>Jan 9, 2013</time> <em>in</em> <a rel="nofollow" href="#">Category</a></p>
			</header>
			<figure class="post-image"> 
 
			</figure>
			<p>Paragraphtext.</p>
 
			<h3>Vimeo Video</h3>
			<div class="video">
				<iframe src="http://player.vimeo.com/video/38584262" width="550" height="400" frameborder="0"></iframe>
			</div>
			<!-- /.video -->
 
			<h3>YouTube</h3>
			<div class="video">
				<object width="500" height="400">
					<param name="movie" value="http://www.youtube.com/v/LSft7jZXRMA?version=3"/>
 
					<param name="allowFullScreen" value="true"/>
 
					<param name="allowscriptaccess" value="always"/>
 
					<param name="wmode" value="transparent"/>
 
					<embed wmode="transparent"  src="http://www.youtube.com/v/LSft7jZXRMA?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
				</object>
			</div>
			<!-- /.video -->
 
		</article>
		<!-- /.post -->
 
	</div>
	<!-- /#content --> 
 
 
	<aside id="sidebar">
 
		<section class="widget">
			<h4 class="widgettitle">Sidebar</h4>
			<ul>
				<li><a rel="nofollow" href="#">WordPress</a> (3)</li>
				<li><a rel="nofollow" href="#">Design</a> (23)</li>
				<li><a rel="nofollow" href="#">Design </a>(18)</li>
			</ul>
		</section>
		<!-- /.widget -->
 
		<section class="widget clearfix">
			<h4 class="widgettitle">Flickr</h4>
			<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8.&display=latest&size=s&layout=x&source=user&user=52839779@N02"></script> 
		</section>
		<!-- /.widget -->
 
	</aside>
	<!-- /#sidebar -->
 
	<footer id="footer">
 
		<p>Tutorial by Web Designer Wall</p>
 
	</footer>
	<!-- /#footer --> 
 
</div>
<!-- /#pagewrap -->
 
</body>
</html>

CSS3 Media Queries

Click here to view the CSS3 Media Queries implementation.

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
 
	/* pagewrap */
	#pagewrap {
		width: 95%;
	}
 
	/* content */
	#content {
		width: 60%;
		padding: 3% 4%;
	}
 
	/* sidebar */
	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}
 
	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}
 
}
 
/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
 
	/* header */
	#header {
		height: auto;
	}
 
	/* search form */
	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
		z-index: 100;
		height: 40px;
	}
	#searchform #s {
		width: 70px;
	}
	#searchform #s:focus {
		width: 150px;
	}
 
	/* main nav */
	#main-nav {
		position: static;
	}
 
	/* site logo */
	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}
 
	/* site description */
	#site-description {
		margin: 0 0 15px;
		position: static;
	}
 
	/* content */
	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}
 
	/* sidebar */
	#sidebar {
		width: 100%;
		margin: 0;
		float: none;
	}
	#sidebar .widget {
		padding: 3% 4%;
		margin: 0 0 10px;
	}
 
	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}
 
}
 
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
 
	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
 
	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}
 
}

Simple Responsive Web Design

Download the source code and try your self. Let me know in case any query.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>