How to Design Mobile Responsive Web Layout using HTML5 in a Minute ~ Coding Savvy
Coding Savvy FB Twitter Google
» »

How to Design Mobile Responsive Web Layout using HTML5 in a Minute

I have received so many tutorial requests from my reader on how to build a website and how to make your website mobile responsive. Especially now that Google has stated clearly that mobile responsiveness of website has been added to the list of top prioritized components that will be used to rank webpages on their search engine. We are going to create a mobile responsive website layout in just a minute in this tutorial, We are going to be using the latest released HTML version, HTML5 and CSS3 but to make sure that our layout work on older browsers we will use Modernizr, Modernizr is a JavaScript toolkit that allows web developers to use new CSS3 and HTML5 features without worrying about older browser support you can read more on their website http://Modernizr.com.JQuery is also one of the most widely used JavasScript library to make sure that the JavaScript code we will user works across all browsers without having to worry about cross-browser issues you can also know more about JQuery on their website https://jquery.com/.
How to design mobile responsive website with HTML5, CSS3 and JQuery in a minute

Download Script Live Demo
Our aim is to create a world class website that will respond according to the screen sizes of all gadget starting from smart-phones,tablet, notebook and laptops. Nobody want their site to be so boring to visitor. If users need to scroll across page width to get what they want your website will be loosing a very huge amount of traffic from mobile users. Giving the fact that the rate of mobile users online is multiplying everyday, It is time for your website to be mobile responsive.
We are starting with responsive layout design because website layout is the foundation to how contents on your website is structured and organized, If your site will be responsive the layout is the right place to make it happen. The layout that we are going to design will have two sidebar, left and right sidebar but the right side bar will have more priority over that on the left. I believe people put more important contents on the right sidebar. On the mobile view of the layout the left sidebar will disappear but whenever the screen gets bigger the left sidebar will return to it original position. I believe this is necessary because loading both sidebars might kill your mobile visitors memory, Normally we are to give mobile user just the article view in the middle but for flexibility,easy navigation and averts we are going to include the right sidebar to display necessary contents. Let first create a plain HTML5 file and import modernizr and JQuery:
<!doctype html>


<head>
 <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Responsive Layout Design</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

<script src="js/libs/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>
<body>

</body>
</html>
Adding the no-js class to the HTML opening tag automatically initiate Modernizr when the document is loaded, JQuery need no initiation but should be included at the beginning of the document for proper usage.
Our layout is going to have three sections  the header, main and the footer, The header section is going to contain things that are meant to be displayed at the very top of the website i.e Logo,Links,ads e.t.c.,The main section will house the articles and the two sidebar while the footer section will contain thing that are to be display ate the very bottom of the website i.e Copyright e.t.c.
 Let include the sections in the previous layout :
<!doctype html>


<head>
 <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Responsive Layout Design</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

<script src="js/libs/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>
<body>


<div id="header">
        <div id='logo'>
        <h2>LOGO</h2>
        </div>       
        <div id='nav'>

<h2>Links</h2>
</div>
</div>


 <div id="main">


<div id='leftbar' class="sidebar">
        <div class='content'>
        Side Block
         </div>  
    </div>



<div id='article'>
       <div class='content'>
        <h1>Lorem ipsum</h1>
        <h3>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." </h3>
        <p>

</div>
</div> 

<div id='rightbar' class="sidebar">
        <div class='content'>
        Side Block
         </div>
       
    </div>

</div> 

    <div id="footer">
        <h2>Footer</h2>
           
    </div>

</body>
</html>

Now that the layout sections are in position let add some CSS to them:
*{margin:0px;padding:0px}
body{font-family:arial}
#header
{
    background-color: #E6CE1A;
    border-bottom:2px solid #333;
    padding:20px;
    overflow:auto;
    color:#fff;
}
#main
{
    padding:10px 10px 10px 10px;
  
}
#footer
{
    min-height:10px;
    background-color:#dedede;
    border-top:2px solid #333;
    padding:20px;
    clear:both
}
.menubar,#article,.sidebar{border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px;}
#article,.sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto; }
.content{padding:20px}

#leftbar{display:block;} 

We are going to make this sections responsive based on popular screen sizes (768px,480px,1140px) using the newly introduced @media and don't forget that we want to hid the left sidebar when the screen size is very small to save space.
*{margin:0px;padding:0px}
body{font-family:arial}
#header
{
    background-color: #E6CE1A;
    border-bottom:2px solid #333;
    padding:20px;
    overflow:auto;
    color:#fff;
}
#main
{
    padding:10px 10px 10px 10px;
  
}
#footer
{
    min-height:10px;
    background-color:#dedede;
    border-top:2px solid #333;
    padding:20px;
    clear:both
}
.menubar,#article,.sidebar{border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px;}
#article,.sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto; }
.content{padding:20px}

#leftbar{display:block;} @media only screen and (min-width: 480px)
{
  
#header
{
background-color:#cc0000;   
}

#main
{
    padding:10px 20px 10px 20px;
}

}
 @media only screen and (min-width: 768px){
#header
{
background-color:#006699;  
}
#article
{
float:left;
width:51%;
margin-left:2%;
}

#rightbar
{
float:right;
width:25%;
}
#leftbar
{
float:left;
width:20%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}
#main
{
    padding:20px 30px 20px 30px;
}

}
@media only screen and (min-width: 1140px) {

    #header
{
    background-color:#E6CE1A;   
}
#main
{
    padding:20px 40px 20px 40px;
}


Now that the layout can withstand the three most popular screen sizes, Let add some demo contents to the layout so that we can see a preview.
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Responsive Layout Design</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="style.css">
    <script src="js/libs/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 </head>
<body>
    <!-- #header -->
    <div id="header">

        <div id='logo'>
        <h2>
LOGO</h2>
        </div>
      
        <div id='nav'>


    <div class="menubar">
<div class="m-menu">

Menu<a href="javascript:void(0);"><span class="menuicon"></span></a>
</div>


<ul class="menu">
<li><a href="#">
Home</a></li>
<li><a href="#">
Link 1</a></li>
<li><a href="#">
Link 2</a></li>
<li><a href="#">
Link 3</a></li>
<li><a href="#">
Link 4</a></li>
</ul>
</div>
        </div>
    </div>

   
    <div id="main">
    <div id='leftbar' class="sidebar">
        <div class='content'>

        Side Block
         </div>
       
    </div>
    <div id='article'>
       <div class='content'>
        <h1>
Lorem ipsum</h1>
        <h3>
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." </h3>
        <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lorem eget nibh facilisis venenatis. Sed porttitor imperdiet turpis quis convallis. Nam bibendum orci dui, et interdum elit euismod a. Proin volutpat gravida elit. Quisque vel auctor ante. Aliquam mollis congue elit, et iaculis erat finibus malesuada. Curabitur venenatis, leo luctus tincidunt cursus, tortor mauris viverra neque, in suscipit orci quam a lacus. Morbi velit orci, egestas nec ullamcorper ut, volutpat in mauris.

Nunc quis magna a tellus ultrices vestibulum. Sed et consequat lacus. Vivamus et pharetra orci. Nullam rhoncus nulla ac blandit auctor. Sed convallis rhoncus tincidunt. Aliquam sit amet ante libero. Vivamus suscipit purus vel felis venenatis commodo.

Etiam ultrices rutrum urna id eleifend. Cras vel luctus erat. Quisque dignissim enim eget erat scelerisque, vitae mollis nulla suscipit. Aliquam pulvinar malesuada neque sed tincidunt. Vestibulum quis varius purus. Donec ultrices sem magna. Sed volutpat at lorem at dictum. Sed sed orci id nulla porttitor ornare. Aenean volutpat risus nunc, fermentum sollicitudin ipsum aliquam vel. Duis quis velit ligula. Suspendisse sed ullamcorper urna. Nam quis posuere enim. </p>
    </div>
    </div>
    <div id='rightbar' class="sidebar">
        <div class='content'>

        Side Block
         </div>       
    </div>       
    </div>    
 
    <div id="footer">
        <h2>
Footer</h2>           
    </div>
</body>
</html>

You should notice the newly included menubar this will stand as the button we will use to toggle the layout menu on mobile phones because out long menu links will be too large for mobile phone screens, This will lead us into creating a mobile responsive menu for this layout. to do that we will need to add more a little CSS and just few lines of javaScript.

@media (max-width: 767px) {
    .menubar{clear:left; height:auto  !important; display: table; }
    .menu{ float: none; width:100%; padding:0px !important; display: none; }
    .menubar .menu > li { width:100%; border-bottom: 1px solid #dedede; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }
    .menu > li:hover, .menu > li:active { background-color:#4682b4;}
    .m-menu { display: inline-block !important; }
    #leftbar{display:none;}
}
.menubar {  width:100%; height:50px; background-color: #606060;  }
.menu { float: left; position: relative; padding: 10px; }
.menubar .menu > li { float: left; line-height: 20px; }
.menu > li > a { color: #ffffff;  font-size: 15px; padding:10px 15px 10px; }
.menu > li > a:hover, .menu > li > a:active { background-color:#4682b4; border-radius:4px; }
.m-menu { display: none; color: #ffffff; font-weight: bold; padding: 5px;  }
.menuicon {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
    position: absolute;
    right: 25px;
    top:61px;
}

Using the CSS code above we are able to create an arrow facing downward on mobile screen to show that they need to press the arrow to view the list of menu items. we will use JavaScript to monitor the click event and make the menu toggle. We are going to add this JavaSript/JQuery code to our head tag.
$(document).ready(function()
{

$(".menuicon").click(function()
{
$(".menu").slideToggle();
});

$(window).resize(function()
{
if($(this).width() < 767)
{
$(".menu").hide();
}
else
{
$(".menu").show();
}

});
})
;
With all this simple steps now we have our fully mobile responsive layout. Here is the final code below:

HTML5

<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Responsive Layout Design</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="style.css">
    <script src="js/libs/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{

$(".menuicon").click(function()
{
$(".menu").slideToggle();
});

$(window).resize(function()
{
if($(this).width() < 767)
{
$(".menu").hide();
}
else
{
$(".menu").show();
}

});
});

</script>
</head>
<body>

    <div id="header">
        <div id='logo'>
        <h2>LOGO</h2>
        </div>
      
        <div id='nav'>
    <div class="menubar">
<div class="m-menu">
Menu<a href="javascript:void(0);"><span class="menuicon"></span></a>
</div>

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

</div>
        </div>
       
    </div>
   
 
    <div id="main">
    <div id='leftbar' class="sidebar">
        <div class='content'>
        Side Block
         </div>
       
    </div>
    <div id='article'>
       <div class='content'>
        <h1>Lorem ipsum</h1>
        <h3>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</h3>
        <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lorem eget nibh facilisis venenatis. Sed porttitor imperdiet turpis quis convallis. Nam bibendum orci dui, et interdum elit euismod a. Proin volutpat gravida elit. Quisque vel auctor ante. Aliquam mollis congue elit, et iaculis erat finibus malesuada. Curabitur venenatis, leo luctus tincidunt cursus, tortor mauris viverra neque, in suscipit orci quam a lacus. Morbi velit orci, egestas nec ullamcorper ut, volutpat in mauris.

Nunc quis magna a tellus ultrices vestibulum. Sed et consequat lacus. Vivamus et pharetra orci. Nullam rhoncus nulla ac blandit auctor. Sed convallis rhoncus tincidunt. Aliquam sit amet ante libero. Vivamus suscipit purus vel felis venenatis commodo.

Etiam ultrices rutrum urna id eleifend. Cras vel luctus erat. Quisque dignissim enim eget erat scelerisque, vitae mollis nulla suscipit. Aliquam pulvinar malesuada neque sed tincidunt. Vestibulum quis varius purus. Donec ultrices sem magna. Sed volutpat at lorem at dictum. Sed sed orci id nulla porttitor ornare. Aenean volutpat risus nunc, fermentum sollicitudin ipsum aliquam vel. Duis quis velit ligula. Suspendisse sed ullamcorper urna. Nam quis posuere enim.
</p>
    </div>
    </div>
    <div id='rightbar' class="sidebar">
        <div class='content'>
        Side Block
         </div>
       
    </div>
       
    </div>
   
  
    <div id="footer">
        <h2>Footer</h2>
           
    </div>


</body>
</html>

and here is the final style.css file:

CSS3

*{margin:0px;padding:0px}
body{font-family:arial}
#header
{
    background-color: #E6CE1A;
    border-bottom:2px solid #333;
    padding:20px;
    overflow:auto;
    color:#fff;
}
#main
{
    padding:10px 10px 10px 10px;
  
}
#footer
{
    min-height:10px;
    background-color:#dedede;
    border-top:2px solid #333;
    padding:20px;
    clear:both
}
.menubar,#article,.sidebar,.m-menu{border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px;}
#article,.sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto; }
.content{padding:20px}

.menubar  ul{list-style:none;width:100%}
.menubar  ul li{padding:4px;margin-bottom:5px;text-align:center;color:#000}
#leftbar{display:block;}

@media only screen and (min-width: 480px)
{
   
#header
{
background-color:#cc0000;   
}
.menubar  ul{float:left;}
.menubar  ul li{float:left;width:16%;padding:4px;margin-right:8px}
#main
{
    padding:10px 20px 10px 20px;
}

}

@media only screen and (min-width: 768px){
#header
{
background-color:#006699;   
}
#article
{
float:left;
width:51%;
margin-left:2%;
}

#rightbar
{
float:right;
width:25%;
}
#leftbar
{
float:left;
width:20%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}
.menubar  ul{float:right}
.menubar  ul li{float:left;width:17%;padding:4px;margin-right:8px}
#main
{
    padding:20px 30px 20px 30px;
}

}

@media only screen and (min-width: 1140px) {

    #header
{
    background-color:#E6CE1A;   
}
#main
{
    padding:20px 40px 20px 40px;
}

}

@media (max-width: 767px) {
    .menubar{clear:left; height:auto  !important; display: table; }
    .menu{ float: none; width:100%; padding:0px !important; display: none; }
    .menubar .menu > li { width:100%; border-bottom: 1px solid #dedede; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }
    .menu > li:hover, .menu > li:active { background-color:#4682b4;}
    .m-menu { display: inline-block !important; }
    #leftbar{display:none;}
}
.menubar {  width:100%; height:50px; background-color: #606060;  }
.menu { float: left; position: relative; padding: 10px; }
.menubar .menu > li { float: left; line-height: 20px; }
.menu > li > a { color: #ffffff;  font-size: 15px; padding:10px 15px 10px; }
.menu > li > a:hover, .menu > li > a:active { background-color:#4682b4; border-radius:4px; }
.m-menu { display: none; color: #ffffff; font-weight: bold; padding: 5px;  }
.menuicon {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
    position: absolute;
    right: 25px;
    top:61px;
}
Hope this help someone, Thank you for your attention.
Download Source Codes
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment