How to Create a Responsive Website in 10 Minutes?

Responsive web design. Though it is believed that the arrival of mobile apps has completely brought down the interests of responsive web designs in the minds of entrepreneurs, I would rather say, it still has the charisma and it is the reason why it is very much in practice today. Also, it is found to be most cost-effective method to take any website to mobiles. So, why not create a responsive website for your business  today, that too under just 10 minutes? Inspired? Today, I’ll guide you how to set up one for enticing your mobile-savvy customers.

Before getting started, I’d like to emphasize that this tutorial is aimed at beginners and not at expert developers. In order to create this tutorial, what exactly a beginner should know is HTML, CSS and CSS Media Queries. That’s it!

Get ready to create a new responsive website like the one I’ve shown below in 10 minutes now!

Responsive web design layout

Step 1: Setting up the layout of website

<!DOCTYPE html><html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Responsive Design</title>

</head>

<body>

<div id=”site_wrapper”>

<header id=”header”>

<hgroup>

<h1></h1>

<h2></h2>

</hgroup>

<nav id=”main_nav”>

<ul>

<li><a href=”#”>menu1</a></li>

<li><a href=”#”>menu2</a></li>

<li><a href=”#”>menu3</a></li>

</ul>

</nav>

</header><!– END header –>

<section id=”left_column”>

<article>

<header>

<h3>Lorem Ipsum is simply dummy text</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry

</p>

</header>

</article><!– END article –>

</section><!– END page_content –>

<aside id=”sidebar”>

<h3>Lorem Ipsum is simply dummy text</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry

</p>

</aside><!– END sidebar –>

<footer>

<p>Copyright 2013 </p>

</footer>

</div><!– END site_wrapper –>

</body>

</html>

Step 2: Adding meta tags

You must know that you have to add the following line within head section of your webpage:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Meta tags are extremely crucial for promoting your business online and adding them perfectly on your website doubles your chances of success online.

Step 3: Adding js support for internet explorer

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js“></script>

<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js“></script>

<![endif]–>

Step 4: Coding with responsive CSS

<style type=”text/css”>@media screen and (max-width: 650px) {

#header {

height: auto;

}

#page_content {

width: auto;

float: none;

margin: 20px 0;

}

#left_column{

width: 100%;

float: none;

margin: 0;

}

/*** Navigation ***/

#main_nav {

position:relative;

min-height: 30px;

}

#main_nav ul {

background: #fff;

border: 1px solid #ddd;

padding: 5px 0;

position: absolute;

width: 40%;

}

#main_nav ul li {

display: none;

margin: 0;

}

#main_nav ul li.current {

display: block;

}

#main_nav ul li a, #main_nav ul li.current a {

background: 0;

display: block;

padding: 5px 10px;

}

#main_nav ul li.current a {

color: #333;

}

#main_nav ul:hover li {

display: block;

}

}

Conclusion

I hope the tutorial was useful to beginners who wish to set up a responsive website within a short period of 10 minutes. If you’ve any alternate methods using which designing a responsive website within 10 minutes, please add your opinion via comments.

Realated Posts

2 thoughts on “How to Create a Responsive Website in 10 Minutes?

  1. Hitesh

    Nice Post. This one helps very basic learner to create responsive design site.

  2. Jim Duffy

    Thanks for the coding provided here. For beginners that are looking to construct a website, will find this very useful. Expecting more tutorial like this.

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 lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">