Responsive Design Tutorial - Part 1

Responsive Design Tutorial – Part 1

By Steve on February 21, 2012

In this multi part Responsive Design Tutorial we will take you through the basics of understanding responsive design in web design through some simple demo examples which you can follow along with at home. The who, what’s and why’s behind responsive design can be found in our previous post “What is Responsive Design?“, be sure to read it to gain valuable background information on this hot subject before proceeding to our examples!

Part 1 – A Basic Example of Responsive Design

Copy the following code into your text editor/notepad and save the file as index.html.

{code type=html}

<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″/>
<title>Responsive Design | Part 1</title>
<style type=”text/css”>
font-family:Arial, Helvetica, sans-serif;

border:1px #666 solid;
padding:10px 20px;
box-shadow:0px 0px 5px #999;
<div class=”box one”>This div will turn to RED if the viewing area is greater than 900px</div>
<div class=”box two”>This div will turn to YELLOW if the viewing area is between 600px and 900px</div>
<div class=”box three”>This div will turn to GREEN if the viewing area is less than 600px</div>


Open this up in a browser which supports media query (basically anything other than IE 8, IE7).  Resize the window width by dragging the side of the window and the three divs should resize with the windows nicely. You didn’t realise it, but this is your first step to responsive design – WELL DONE!  View this file on any size screen and you will be able to view it as intended due to the fact that the div’s have no widths set and respond to the browser width dynamically (or responsively!).

Next step is to implement CSS media queries – the logic behind any responsive design.  Open up your index.html file in your text editor and add the following lines of code to the <style> section of the head;

{code type=css}

/* min-width */
@media screen and (min-width: 900px) {
.one {
background: #D5120D;


This is your first media query.  All media queries need to be added to the end of any style sheet to overwrite any styles already applied. What we have added is a condition to query the media minimum width; and if the width of the device/browser is greater than 900px then the first div with class “one” will have a background colour of red(ish!). Resize your browser and you will see the top div change from red to white depending on the width of your browser.

Add the following code after your first media query:

{code type=css}

/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
.one {
background: #D5120D;
.two {
background: #F0DF0F;

/* max-width */
@media screen and (max-width: 600px) {
.three {
background: #0DF246;


Now resize your browser window and you will see the three divs change colour depending on the browser size.

You have now created a webpage (albeit very simple!) which changes in design depending on the width of the end users browser/device.  Instead of background colour, this could easily have been the toggle of css property “display” from “none” to “inline-block”, or the position or float of each div to suit the width.

The completed file can be downloaded here –

Part 2 of our Responsive Design Tutorial coming soon…

Falkon blog post featured image for post - WordPress Templates

WordPress Templates

Ever wanted to customise a single page in WordPress with the template system but never knew how? Its simple with...