:::: MENU ::::

How To Make Responsive Layouts With HTML5/CSS3

How To Make Responsive Layouts With HTML5/CSS3

How To Make Responsive Layouts With HTML5/CSS3 Demo


Much has been talked about HTML5 and CSS3 in past few years. CSS3 is already in a good shape and HTML5 will be finishing all the milestones in 2014 according to The HTML Working Group.

The good stuffs from CSS3 that we praise the most are :

and many more.

HTML5 also came up with all the required goodies as:

and so on.

Later on, its being announced that HTML5.1 will be coming in 2016 with lot of other important  features. So with all this facts and figures we can easily make out that by holding hands of both of them will not cause any harm to web developers/designers but definitely will secure their future happiness.

What Is “Responsiveness”(For Websites)?

When we use the word “Responsive” in the context of websites, the first thing that comes to our mind is that the design layout should adopt all the possible devices who can render web pages.

The current scenario is that in IT industry, its really important for a website to be absolute responsive for better readability of the online contents in different environments. Using HTML5 and CSS3 this practice is growing virally from past few years.

The Structure

Now today we will build our first responsive design layout with HTML5 and CSS3. We will go for a very basic design first. Later on we can handle more complex designs.

Our project folder structure will look like this.

How To Make Responsive Layouts With HTML5 CSS3_Folders

The design that we are trying to get would be very clean. Something like below.

How To Make Responsive Layouts With HTML5 CSS3_template

Basic HTML5 Setup

The first thing that you should know is that it requires an HTML5 doctype declaration at the top:

We will set the meta character to utf-8 because we will be using special characters in our project and we want the browser to parse them correctly.

To enable the responsive nature of HTML5 web pages, you have to place the correct meta tag inside the head of the webpage.

The above meta tag is quite self-explanatory in nature. We are setting the width of the page to the width of the device and initially scaling it to 1, i.e. default size.

Now we have to add a css file where we will make the webpage alive. Lets create a .css file inside styles folder and lets name it as styles.css. We will place it inside the head tag.

Our HTML5 template should look like this

The Body Container

We will add body class to our body tag. Now to make every portion of our template structure fluid, we will make each section separately. The navigation will be contained in header tag, very important HTML5 tag. For navigation HTML5 provides a tag called nav. The code will look like this:

Here we will add a class mainHeader to our newly created header tag. The logo for the company sits inside. Then the nav tag comes holding the unordered list inside. The first list item should be activated by default, that’s why we added the class active to that.

The main container holds two articles inside. We will add a HTML5 section tag for the main container with a class name mainContent. Inside it we will have two HTML5 article tags. Both will have header, footer and content tag in it. We can use as many header or footer tag as we need. Its good for SEO also because google bot gives extra attention to headers and footers.

The Markup

Both the article tags have a class named topContent and bottomContent as followed. For footer text we have added p tag and specified a class named post-info. For writing article content, HTML5 has come up with content tag and its great for better understanding.

For side panel we have specific tag in HTML5 called aside. We will use them for our three different side widgets.

The Markup

Those three aside tags will have a class named top-sidebar, middle-sidebar and bottom-sidebar as mentioned.

The last part would be the copyright section by adding a footer tag with class named mainFooter.

The Markup

This is it for our HTML5 template, now we will dive into CSS3 to spice up our web page.

The Style Sheet

The basic styling and the structure that we will follow is:

The Stylesheet

Here the notable stuff is we are defining the body background, a behavior, h2 color and centered content alignment.

The header portion of our document should have a nice styling.

The Stylesheet

Here the logo width would be 30% of it’s parent. It should have a top and bottom margin of 2%. The navigation should have a nice background, so we specified that. We have given it a rounded corner of 5px and its height might be 40px. Inside the navigation, the ul elements shouldn’t have any style, for that we have set its property list-style value to none. We made it center aligned also. Those list element should be left floated and its display should be inline. List items are having a tag inside. We have styled them with white color, some padding around, defined the height and provided the border radius to give a nice look and feel. On hover or when its active, we will give them another background color for different feel.
The mainContent will have the 70% width of the total document and it should be floated to left. We will give a nice border radius to it. Inner elements topContent and and bottomContent will have a white background color, some padding/margin and lastly will have a nice border radius. For the author information we will stylize the post-info p tags also.

The Stylesheet

Now for the sidebar we will give all the aside tags same feature. It will have the width that is left by mainContainer. It must float to left to get the same row. We have specified the background color of it, given some padding/margin and also given some nice border radius.

The Stylesheet

And lastly for our copyright section we will give it all the available width, a 40px height, a nice background color, a border-radius and finally we will float it to left. Inside our mainFooter we have p tag. We will give its width and color and also place it center with a padding around.

The Stylesheet

Now its done for the desktop/laptops i.e bigger screen that can have more than 700 pixels inside. But for smaller screen like tablets and smartphones we need to specify some different style. For smaller devices all the components should come vertically because there is not much space available horizontally. CSS3 provides a very useful attribute called @media which can detect many device specific attributes. Thankfully it detects device width also. By using that we can do some more optimization for other useful devices. The default attributes will remain same if we don’t change it inside our @media query.

The main @media specific query would look like this.

The Stylesheet

Here we will be doing some required optimization for those devices whose width property lands in between 150px to 700px. Inside our query block we can change the body width to 90%. Already the body is center aligned by the default behavior written previously.

The Stylesheet

For header section we will change the image width to 100%. Our nav should come like a vertical list, we can specify its height as 160px. We don’t need any left padding for ul list inside. The list item should expand to 100% and its text alignment should be centered. Inside each li element we have anchor tags, we should give them a nice padding around and could specify heights.

The Stylesheet

For mainContent we will give it the maximum available width and some padding around it. For small screen we are not going to show the author, so we can hide the post-info p tags. Articles should have some top margin and those aside tags should come at bottom. We will give them 94% of available width and also some required padding around. And lastly the footer tag also needs the complete available width.

The Stylesheet

That’s all for the HTML5 and CSS3 based basic template building.

Important Stuffs To Notice

For responsive design its must to include proper meta tags. Its very important that we should go for percentage width for all the individual components so that it occupies the screen relatively. Apart from that some coders do prefer nested @media queries. I personally don’t recommend that because maintaining the style would be difficult afterwards.


You can have a look at How To Make Responsive Layouts With HTML5/CSS3 Demo here. We have a Download option also so that you can keep a working copy in your machine. I hope you have gained something out of this article. This article will be successful if even one of you feels the necessity of using these fabulous technologies.

HTM5 and CSS3 both are the closest friends of mine, who’s yours?

Indrajit Das
Follow me

Indrajit Das

Co-founder of CodeStrive [ Kind of a seeker for new dimensions in WEB world, sort of a Thinker, Blogger, Die-Hard Coder, Wash-Room Singer, Football Player, Gamer, Guitar Player, Cartoonist and the list goes on.. ]
Indrajit Das
Follow me

Latest posts by Indrajit Das (see all)

Why You Would Learn Backbone.js
How Fast You Can Strap With Bootstrap
Pride that quarells at self-breath