Responsive Design Tutorial - Part 1

Responsive Design Tutorial – Part 1

By Steve on

In this multi part 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}

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″/>
<title>Responsive Design | Part 1</title>
<style type=”text/css”>
body{
background:#EBEBEB;
font-family:Arial, Helvetica, sans-serif;
color:#3C3C3C;
}

.box{
background:#FFF;
border:1px #666 solid;
padding:10px 20px;
margin:40px;
text-align:center;
border-radius:8px;
box-shadow:0px 0px 5px #999;
}
</style>
</head>
<body>
<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>
</body>
</html>

{/code}

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;
}
}

{/code}

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;
}
}

{/code}

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 - responsive_design_part1.zip.

Part 2 coming soon…

About Steve

Steve is the lead developer/geek!. Steve likes soup; perhaps a little too much as it seems to be all he eats?! He's currently into his fitness and aiming to shed lots of excess weight and get fighting fit.

Related Posts
Comments (2)
  1. manoj

    Amazing tutorial…i think it is the best tutorial ………..
    But it can become more better if u tell how one DIV comes below when we resize it….

    Reply
    1. Steve

      Thanks for your comment manoj… not sure what you mean by telling how one div comes below, as all three divs stay where they are in the example.

      If you mean how to move divs below and above each other when resizing, in another example, this would be done either by floating them left and right – so first two are floated left, last is floated right, and then resized you can make third float left and first two float right – thus making the third div show up before the first two…. if that makes sense!?! Other method would be to use javascript to move the divs about on resize – Example of this can be found here – http://www.mainstay-property-events.co.uk/news/.

      Reply

JOIN THE CONVERSATION - LEAVE A COMMENT