Creating a simple responsive HTML5 Template

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

20 Comments Already

  1. Great tutorial
    This helps me alot

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

    Public CommentUserThankyou for the useful tutorial!!
  3. 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
  4. could you or someone please help me to put css and js code in ONE SINGLE file with HTML? So that i dont have to link to other outside link if it is possible to do so. My reason is i have no file hosting and i want to try it on single HTML file which i could run through my browser..

    Public CommentUsercould you or someone please help me to put css and js code in ONE SINGLE file with HTML? So that i dont have to link to other outside link if it is possible to do so. My reason is i have no file hosting and i want to try it on single HTML file which i could run through my browser..
  5. Generally tutorial is about HTML5 specification is more legible than html4

    Public CommentUserGenerally tutorial is about HTML5 specification is more legible than html4
  6. Thnx for the great tutorial, but it’s not working on my Nokia Lumia windowsphone.

    Public CommentUserThnx for the great tutorial, but it's not working on my Nokia Lumia windowsphone.
  7. I really appreciate a lot. I’ve learnt it now.

    Public CommentUserI really appreciate a lot. I've learnt it now.
  8. Pro Tutorial…thanks

    Public CommentUserPro Tutorial...thanks
  9. learning html5 from zero..
    help me to know basic about them.
    .thanks.

    Public CommentUserlearning html5 from zero.. help me to know basic about them. .thanks.
  10. Thanks for the tutorial. I just tried it out on my HTC Sense (WIndows phone) and it isn’t responsive for some reason. Just seeing the desktop version. Any thoughts? The code is responsive if I resize my browser on my laptop / desktop, but for some reason the media queries aren’t working on my Windows Phone.

    Public CommentUserThanks for the tutorial. I just tried it out on my HTC Sense (WIndows phone) and it isn't responsive for some reason. Just seeing the desktop version. Any thoughts? The code is responsive if I resize my browser on my laptop / desktop, but for some reason the media queries aren't working on my Windows Phone.
    • not sure, they are working fine in htc and iphone browser? is it windows vs android issue? will check and confirm.

      Member of Dezzain.comAdministratornot sure, they are working fine in htc and iphone browser? is it windows vs android issue? will check and confirm.
      • Hey Richie, unfortunately all I have access to is my HTC Sense, which is running Windows. Not sure about Android.

        Public CommentUserHey Richie, unfortunately all I have access to is my HTC Sense, which is running Windows. Not sure about Android.
  11. Greetings from Florida! I’m bored to death at work so I
    decided to check out your blog on my iphone during lunch break.

    I enjoy the knowledge you provide here and can’t wait to take a look when I get home.

    I’m amazed at how quick your blog loaded on my mobile ..
    I’m not even using WIFI, just 3G .. Anyways, awesome blog!

    Public CommentUserGreetings from Florida! I'm bored to death at work so I decided to check out your blog on my iphone during lunch break. I enjoy the knowledge you provide here and can't wait to take a look when I get home. I'm amazed at how quick your blog loaded on my mobile .. I'm not even using WIFI, just 3G .. Anyways, awesome blog!
  12. very useful and direct to the point tutorial.
    thanks for sharing, its useful.:)

    Public CommentUservery useful and direct to the point tutorial. thanks for sharing, its useful.:)
  13. a useful tutorial, thanks.

    Public CommentUsera useful tutorial, thanks.
  14. Thank’s man !

    Public CommentUserThank's man !
  15. nice tutorial. i was looking for ‘simple responsive html5 template’ in google and found your site. hoping to read more from you.

    Public CommentUsernice tutorial. i was looking for 'simple responsive html5 template' in google and found your site. hoping to read more from you.
  16. thanks Mariane and Wall. will be posting couple more html and wordpress tutorial soon.

    Member of Dezzain.comAdministratorthanks Mariane and Wall. will be posting couple more html and wordpress tutorial soon.
  17. Very simple and nice tutorial, I’ve never seen such a useful and handy tutorial, thanks for sharing it with all and I hope I’ll get some more such tutorials from your site. Thumbs up!

    Public CommentUserVery simple and nice tutorial, I've never seen such a useful and handy tutorial, thanks for sharing it with all and I hope I'll get some more such tutorials from your site. Thumbs up!
  18. very simple and straight to point html5 tutorial. thanks
    ps: any wordpress tutorial i can read?

    Public CommentUservery simple and straight to point html5 tutorial. thanks ps: any wordpress tutorial i can read?

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>