There are a multitude of available plugins, themes for every CMS, and different scripts that you can now use in order to complete this action without giving much thought to the work. The problem with this is, what happens when something goes wrong? Are you familiar enough with the code to fix these problems quickly? If your client calls you wondering why their tablet site isn't working correctly, how long will you take to get back to them? Let's be professionals here and take ownership of what we're putting out.

Rome was not built on a bad foundation

Let's start with a very basic foundation. Utilizing the new elements of HTML5, we'll make a layout that is pliable and can be made responsive.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Responsive Web Design</title>
		<link rel="stylesheet" href="css/main.css"/>
	</head>
       <body>
       <header class="main_header">
        	<div class="content">
            	<p>Welcome to a responsive site</p>
            </div>
        </header>
        <div class="page content">
            <article>
                <header>
                  <h1>This is our page</h1>
                  <h2>A page we want responsive</h2>
                </header>
                  <section>
                    <p>Lorem Ipsum would go best here</p>
                  </section>
            </article>
            <aside>
              <header>
                  <h1>Sidebar</h1>
              </header>
              <ul>
                  <li>More info</li>
                  <li>Is always in</li>
                  <li>Unordered lists</li>
              </ul>
            </aside>
        </div>
        <footer class="main_footer">
        	<div class="content">
	        	<p>This website designed by one awesome developer.</p>
            </div>
        </footer>
	</body>
</html>

Now that we have a basic layout, we can begin our styling. We're going to use the Less framework as the groundwork for our CSS. The Less framework was created by Joni Korpi (http://jonikorpi.com/) and is based on the grid system. At the time of writing this, it is in its fourth build. You can head over to the Less Website (http://lessframework.com/) and download the most current edition there.

The first thing that you'll notice is three different available 'main' stylesheets, each with a different pixel size appended to the file name. These give you three different available options to choose from, all of which refer to the size of the text. For the sake of fiting in on the bell curve, we're going to choose the middle option, main-17px.css.

We'll just copy this file's contents and put it into our main.css file in our 'css' directory. If you've tested the page, you'll notice that Less has provided us with background colors, text sizes, and a few other features that give us a leg up on our design. We can always change these down the line, so let's focus on getting our design set up properly first.

Start at the top – Viewport

The declaration of your viewport information is an extremely important step in responsive design, so that's where we'll start.

The viewport option lets the browser know how to handle your site. It will declare the initial scale, whether the user can zoom in, and a slew of other options. These may seem simple and unneeded at first, but once you miss them the first time, you'll soon understand why they're needed.

There are currently two ways to declare the viewport information. For the sake of conciseness, we're going to be going through each and include both in our basic design.

The viewport metatag was developed by Apple and was quickly adopted by many other browsers in an attempt to help satisfy certain mobile development problems. We're going to add this metatag to the top of our site in the header.

	<meta name="viewport" content="initial-scale=1">

There are many different coma delineated options we can add to the 'content' attribute. These options include setting the initial width rendered by the browser and whether a user may zoom in. Setting the width of your website may cause problems when your site is viewed in landscape mode, so we won't add that here. Restricting your website to be viewed at only one size is also a bad move. Simply put, you don't want to restrict your users from viewing your content however they like. To do otherwise is tyrannical. At least, that's my opinion.

The other viewport option we're going to be using is the @viewport CSS rule. It was very nice of Apple to provide the metatag solution, but the W3C felt it needed to take it a step further. To further complicate the matter, IE (as it does) decided to abide only by the W3C ruling instead of common practices. Internet Explorer now ignores the viewport metatag under certain circumstances.

In order to be W3C compliant, and to (once again) work with IE users, CSS Device Adaptation (http://dev.w3.org/csswg/css-device-adapt/) will be used with the @viewport rule. We're going to add this in a <script> tag in the head of our document just in case there's a problem with the server handling our stylesheet.

	<style type=”text/css”>
	@viewport{
	    zoom: 1.0;
	    width: extend-to-zoom;
	}
	</style>

Unfortunately, it won't end there. We need to add just one more rule in this style tag. If you haven't guessed which browser it's for yet, I'll eat my hat. IE requires its own declaration, which is below:

	@-ms-viewport{
	    width: extend-to-zoom;
	    zoom: 1.0;
	}

Just add the previous snippet in our style tag with the standard @viewport rule and we'll be good to go!

Style is everything. No, no. I mean it's most things.

Now that we've configured our layout and all of the initial steps have been taken, let's start playing with our CSS. We're going to want the site to be a certain width, the sidebar to show up on the side (for desktop browsers), and some differentiation between the header, the footer, and the content.

The Less Framework has a preset width for the body at 896 pixels. This may work for a lot of people (if it does for you, make sure that you set its margin to 'auto' so that it stays centered on the largest resolutions), but we are going to want the header and footer to span the width of the page. We're going to take the default CSS for 'body' at line 89, and change it to this:

	body {
		width: 100%;
		padding: 0px;
		background: rgb(232,232,232);
		color: rgb(60,60,60);
		-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	}

Next, we'll style everything with the class 'content.' Make sure that you put this additional code before the media queries at the bottom of our file. We don't want to overwrite any changes we're making to our content based on the browser's width. That would render all of our responsive work moot!

	.content{
		max-width: 896px;
		margin: 0px auto;
		float: none;
	}

We've centered the content portions of our page at 896 pixels. We get this number from the tenth grid. Feel free to make this larger or smaller based on your needs. Now, we're going to give our header and footer different colored backgrounds in order to see our layout a little more clearly.

	header.main_header{
		width: 100%; 
		background: #FFF;
		color: #000;
		padding: 15px 0;
	}

	footer.main_footer{
		width: 100%; 
		background: #222;
		color: #FFF;
		padding: 5px 0;
	}

Now, we can see our layout a little bit better. We know where the site's header and footer end and begin, and we can see clearly that the sidebar and content still need styling. Let's do that now. We're going to use the Flexible Box Model to achieve this.

	.page{
		display: flex;
	}

	.page > article{
		width: 576px;
		margin: 10px 20px 20px 0;
	}

	.page > aside{
		width: 300px;
		margin: 10px 0 20px;
	}

There you have it. It may not be the most beautiful design I've ever seen, but it's a good jumping point for a much better design. Now that we have the desktop site laid out, it's time to make this responsive with the media queries put forth in our Less Framework.

Ground Control to Major Tom: please respond

To get our site responsive, Less is utilizing media queries at the bottom of the CSS file provided. You can see queries specifying Tablet, Mobile, and Wide Mobile all commented to identify each. We aren't going to play with these too much, only add some code to make them pretty when they're scaled down. First, let's ensure that our body's width stays as wide as the viewing area by changing the body's smaller widths to 100%:

	body{
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}

We'll just add this to each of the three media queries to ensure our site looks as it should. Next, we'll make sure that our content stacks on top of each other instead of next to one another. Again, in the next three media queries, add these lines:

	.page{ 
		display: block;
	}
	.page > article{
		width: 96%;
		margin: 10px 2% 20px;
	}
	
	.page > aside{
		width: 96%;
		margin: 10px 2% 20px;
	}

Now when the page is scaled down, you see these two content areas stack.

That's it! The Less Framework provides a starting ground for you to work from to make a great responsive design. All that you have to do is make it your own!