» » » You are reading »

Creating a simple responsive HTML5 Template

50% OFF WP Themes Christmas Sales Get 50% discount on WP Themes purchase with discount code: MERRYXMAS http://www.magpress.com

HTML5 is a new semantic HTML markup. Although its still new and more tidy up work in progress, many web developer already started using HTML5 in their web design and development. Starting a standard needs on making a website.

Step by step on creating a simple HTML5 template

Step by step on creating a simple HTML5 template

Today i’m going to show you how to create a simple responsive html5 template.

Some rules for HTML5 were established:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

I’m using 2 developer tools for this tutorial but any html/php/css/ editor will be sufficient.

Step 1 – create a blank HTML5 template

First we will create a blank canvas (index.html) for the starting HTML5 template.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>

<body>
</body>

</html>

Step 2 – adding the new HTML5 markup

HTML5 introduce a new html markup such as

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

Here we are going to make sure every block were properly align, the main objective were to make the html markup for HEADER, NAVIGATION, CONTENT, SIDEBAR and FOOTER.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>

<body>
<div id="wrapper">

<!-- start html block -->
<header></header>
<nav></nav>
<section class="content"></section>
<aside class="sidebar"></aside>
<footer></footer>
<!-- end html block -->

</div>
</body>

</html>

You might notice the additional #wrapper. this is essential for global css adjustment control when using responsive media query later on.

Step 3 – adding code into html5 markup

Now we will add html code into each HTML5 markup block

a) Add <header> inner html code

<header>
<hgroup><h1 class="site-title"><a href="#">Simple HTML5 Template</a></h1></hgroup>
</header>

b) Add <nav> inner html code

<nav>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Parent Page</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two with child</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a></li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

c) Add <section class=’content’> inner html code
Here i will use <article> html5 markup for all the repeated posts

<section class="content">

<!-- post 1 -->
<article class="post">
<h1 class="post-title"><a href=#">This is a title for post</a></h1>

<!-- adding post meta -->
<div class="entry post-meta">
<span class="post-author">Richard KS</span>
<span class="post-date">20th March 2013</span>
<span class="post-category">Tutorials</span>
<span class="post-tag">HTML5, CSS3 and Responsive</span>
<span class="post-comment">10 Comments</span>
</div>

<!-- adding post content -->
<div class="entry post-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

</article>
<!-- end post 1 -->

</section>

d) Add <aside class=’sidebar’> inner html code

<aside class="sidebar">
<ul class="widget-sidebar">

<!-- some sample list -->
<li class="widget widget_categories">
<h3 class="widget-title">Categories</h3>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Parent Category</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a>
<ul class="children">
<li><a href="#">Grandchild One</a></li>
<li><a href="#">Grandchild Two</a></li>
<li><a href="#">Grandchild Three</a></li>
</ul>
</li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Category 3</a></li>
</ul>
</li>

<!-- some sample text block -->
<li class="widget widget_text">
<h3 class="widget-title">Text</h3>
<div class="textwidget">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</li>

</ul>
</aside>

e) Add <footer> inner html code

<footer>
<div class="footer-left">Copyright@ 2013 HTML5.com</div>
<div class="footer-right">Privacy Policy - About Us</div>
</footer>

Without css stylesheet added, here’s how the HTML5 markup will look like

with no css and js

with no css and js

Step 4 – adding the css for the html5

Create a new empty stylesheet css (style.css)
add this code to your index.html after <title> </title>

<link href="style.css" rel="stylesheet" type="text/css">

1. Download normalize css and copy paste the entire css to the new stylesheet
2. add the below followup also to the new stylesheet, right after the normalize css code.

body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0; 
margin:0;
}

*, html { line-height: 1.6em; }

article img { width:auto; max-width:100%; height:auto; }

.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }

#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}

/* css for <header> */
header {
	padding: 1em 0;
	margin: 0px;
	float: left;
	width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }


/* css for <nav> */
nav {
	display: block;
	margin: 0 0 2em;
	padding: 0px;
	float: left;
	width: 100%;
	background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
	
nav ul {
	padding: 0;
	list-style: none;
	position: relative;
	display: inline-table;
	z-index: 9999;
	margin: 0px;
	float: left;
	width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;}

nav ul li:hover a {color: #fff;}

nav ul li a {
	display: block;
	padding: 1em;
	font-size: 1.125em;
	color: #ccc;
	text-decoration: none;
	margin: 0px;
	background-color: #000;
	border-right: 1px solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}

nav ul ul {
	background: #5f6975;
	border-radius: 0px;
	padding: 0;
	position: absolute;
	top: 100%;
	width: auto;
	float: none;
}
nav ul li:hover {
	background: #5f6975;
	color: #FFF;
}
nav ul ul li a:hover {
	background-color: #4b545f;
}

nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}

nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}	


nav ul ul ul {
position: absolute; left: 100%; top:0;
}

/* css for <section class='content'> */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}

/* css for <aside class='sidebar'> */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul {
	width:100%;
	margin: 0px;
	padding: 0px;
	float: left;
	list-style: none;
}
aside.sidebar ul li {
	width:100%;
	margin: 0px 0px 2em;
	padding: 0px;
	float: left;
	list-style: none;
}
aside.sidebar ul li ul li {
	margin: 0px 0px 0.2em;
	padding: 0px;
}
aside.sidebar ul li ul li ul li {
	margin: 0px;
	padding: 0px 0px 0px 1em;
	width: 90%;
	font-size: 0.9em;
}
aside.sidebar ul li h3.widget-title {
	width:100%;
	margin: 0px;
	padding: 0px;
	float: left;
    font-size: 1.45em;
}

/* css for <footer> */
footer {
	width: 98%;
	float:left;
	padding: 1%;
	background-color: white;
	margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }

Step 5 – adding the @media query css3 for mobile friendly

at the bottom of the style.css, add this css code

/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } /*lets add some background color so we know which dimension we're in */
#wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}

/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } /*lets add some background color so we know which dimension we're in */
#wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}

Step 6 – adding jquery, modernizr and html5shiv into <head>

Download Modernizr and upload it to the same directory as your new html file.
add below code before end of </head>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="modernizr-latest.js" type="text/javascript"></script>

With css stylesheet and javascript added, here’s how the HTML5 markup will look like

with css and js

with css and js

You are almost done!

Now try re-size your browser to 768px or 468px wide. The template will now be responsive and re-size according to your browser size. If you can, test them live in ipad or iphone.

Preview the HTML5 Template here

That’s all, hope you find this tutorial useful and share it.

Creating a Responsive Simple HTML5 Templatehttp://cdn.dezzain.com/1/2013/03/html5-template.jpghttp://cdn.dezzain.com/1/2013/03/html5-template-150x150.jpg Richie KS Tutorialscss3,Editor Picks,html5,responsive
Step by step on how to create a responsive simple html5 template that are mobile friendly. Good starting point for developer on developing a html5 website

22 Comments Already

  1. hey i just ask, are all browsers supoort HTML5 and CSS3 ?

    Public CommentUserhey i just ask, are all browsers supoort HTML5 and CSS3 ?
  2. This was a great tutorial: easy to understand, concise and to the point. Thank you!

    One Question: The template doesn’t use jquery or modernizr, does it?

    Public CommentUserThis was a great tutorial: easy to understand, concise and to the point. Thank you! One Question: The template doesn't use jquery or modernizr, does it?
  3. Great tutorial
    This helps me alot

    Public CommentUserGreat tutorial This helps me alot
  4. Thankyou for the useful tutorial!!

    Public CommentUserThankyou for the useful tutorial!!
  5. Nice Article ..

    God job Mr Richie KS, you are the best blog author, design and programers

    Thanks for your Nice Article

    Public CommentUserNice Article .. God job Mr Richie KS, you are the best blog author, design and programers Thanks for your Nice Article
1 2

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>