Skip to content

Getting started with Responsive Web Design

This article provides new users with ten easy-to-follow steps for designing a website on Responsive Web Design principles from scratch. RWD may look complicated, but this article will make it easy for you.

To enable mobile devices to access websites, many web developers have historically created a fixed width web design (typically 980px) and then created a separate dedicated ‘mobile’ site for devices. By replacing the ubiquitous ‘www’ of the web address with ‘m’ (for example, m.adonline.id.au), this system of dual websites was seen as a good way of attracting mobile users to a website.

Unfortunately there are many problems with this approach, in particular:

  1. Mobile websites are often designed to a (smaller) fixed width and so despite their purpose, still don’t look good in all mobile devices.
  2. Having two websites dilutes ones SEO authority.
  3. Browser (user-agent) sniffing is often used to redirect users to either the ‘www’ or ‘m’ website and this approach is highly unreliable.

In May 2010, Ethan Marcotte write an article for A List Apart about a concept he called “responsive web design“. In his article, he outlined a method for making a website ‘adapt’ to its audience by automatically resizing in response to the browser window in such a way that the same website (and markup) would work equally as well on a desktop as it would a mobile device.

I love both the concept and the philosophy of responsive web design (sometimes called adaptive web design), but it does have its critics and it’s not the total solution. In particular, some people have pointed out that one of responsive web design’s primary tools for resizing images for mobile browsers and devices are either bandwidth-heavy, code-heavy, memory-taxing or all three. One has even complained that it breeds boring websites.

There are also a number of arcane arguments about ‘responsive’ versus ‘adaptive’ web design, but for the purposes of this article, I shall steer clear of these debates and proceed with the assumption that the two terms are synonymous.

I will also make the assumption that readers of this post are interested in proceeding with a responsive web design, but don’t know where to begin.

Beginning a responsive web site can be tricky, and it took me ages to create this rather simple website using this new approach. Nevertheless, I learnt a great deal from this exercise and this article will serve as a good starting point so that designers can get their head around some of the key concepts and approaches.

Step 1: Change your thinking!

Many web designers have adapted to the changing demands of coding sites that validate with the W3C validator, rather than using proprietary code. Designers have also adjusted to CSS3 and HTML5. Responsive web design is another significant change from the old, familiar ways.

In the past, you would have set-up DIV elements with fixed width. With responsive web design (RWD), you will need to forget absolutes. Your dimensions will mostly be relative. Whilst this can be a big mental hurdle to leap over it’s integral to RWD.

In creating RWD site, you will need to envisage that a large proportion of your site’s users will be navigating with their fingers and not their mouse. Consequently, mouseovers out and some buttons, links, menus and features will need to be reconfigured.

Step 2: Bookmark some useful tools

Emulators make the testing of your website easy and allow developers to get a rough idea of how a site will look without having to purchase multiple devices or incurring data charges

Emulators aren’t foolproof but I have found these to be generally reliable and accurate:

For checking designs in older versions of Internet Explorer, I have always found that the NetRenderer to be reliable.

Step 3: Fix the viewport

The first practical step when creating a RWD site  is to tell mobile browsers not to resize your website. Normally when you load a website on a mobile device, the page will be shrunk so that it fits into the browser window. The user then manually zooms in. This makes sense for a 980px-width website but many devices will even do this for your mobile-ready website.

The trick here is to add this line of code into your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This piece of valid code tells mobile devices not to zoom out as a default.

Step 4: Install ImgSizer.js

These days, images form a major part of most website’s presentation. Unfortunately the bulk of images are too big to fit on a mobile browser. Thankfully Ethan Marcotte has developed a script called ImgSizer.js that will resize the images on your page relative to the browser window width. You can see it in action at adamdimech.com/english.

Marcotte has bundled his JavaScript code into a single file which can be downloaded from his site.

The code doesn’t work in IE6 or less, so I suggest the following conditionally-commented code in your <head> be used to implement the JavaScript on your RWD website:

<!--[if ! lte IE 6]><!--><script type="text/javascript" src="http://www.example.com/js/img-sizer.js"></script><script type="text/javascript">// <![CDATA[
    addLoadEvent(function() {
         if (document.getElementById && document.getElementsByTagName) {
              var aImgs = document.getElementById("content").getElementsByTagName("img");
              imgSizer.collate(aImgs);
         }
    });
// ]]></script><!--<![endif]-->

If you have a general hatred of IE6 (as I do), then  you can dispense with the conditional comments.

Step 5: Install css3-mediaqueries.js

You will need to use CSS3 media queries, but many older browsers won’t natively support these. Thankfully, Wouter van der Graaf came to the rescue with his css3-mediaqueries.js code, which will allow all browsers to support media queries in CSS.

Wouter suggests that the JavaScript file be minified and added immediately prior to the <body> tag within the <head>. You can download it here.

Because IE9 fully supports CSS3, I use a conditional comment so that only older versions of IE will download the script.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Step 6: Commence with some CSS housekeeping

Before we begin our CSS formatting, we need to prepare our page for RWD.

The first  part is to condition our <body> tag in CSS so that there are no margins and the height will always remain 100% of the screen. This will ensure that the greatest amount of screen is available for use.

html, body {height: 100%;}
body {margin: 0px;}

In order for images to fit within any screen, they need to be scaled. There are several ways to do this (aside from using ImgSizer.js) but a good starting point is to make all images have a width of 100%. No height value is necessary; the browser determines the height that will proportionately constrain the image’s dimensions. As long as no other width-based image styles override this rule, every image will load to the width of its containing DIV unless the viewing area becomes narrower than the image’s original width.

Using a 100% image width in combination with a containing div and ImgSizer will ensure images scale beautifully.

Unfortunately, max-width is not supported in older versions of Internet Explorer, so a conditional comment is also included, denoted with an asterisk.

img {
	max-width: 100%;
	border-style: none;
}
*img {
	width: 100%;
	border-style: none;
}

The last step is to ensure that a vertical scroll bar is always displayed in the browser. Because the proportions of the website are all relative, the sudden appearance of a scroll bar (which could be triggered by an interactive component on your website) will cause your site to jump. In CSS, we can use this simple trick to ensure that the bar is always there, thus preventing jumping.

html { overflow-y: scroll;}

Step 7: Design your container <div>

Whether you use Microsoft Expression Web, Adobe Dreamweaver or another programme for designing your pages, you may find that some of the following code does some strange things to your WYSIWYG interface. Of course these aren’t WYSIWYG design tools, so the golden rule is to test and retest within a server environment, using multiple browsers.

To design my website, I am going to use a fluid layout but I am also going to utilise the max-width feature of CSS3. This is important because once a page moves beyond a certain width, reading becomes difficult. So max-width shall be used to ensure that the site doesn’t expand to 100% on really large desktop monitors.

To begin my page, I shall create a container div, to which I shall assign the ID #container.

This is my complete page code so far:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="path/to/stylesheet.css" rel="stylesheet" media="all" type="text/css" />

<!--[if lt IE 9]>
<script src="path/to/css3-mediaqueries.js"></script>
<![endif]-->

<!--[if ! lte IE 6]><!--><script type="text/javascript" src="path/to/img-sizr.js"></script><script type="text/javascript">// <![CDATA[
    addLoadEvent(function() {
         if (document.getElementById && document.getElementsByTagName) {
              var aImgs = document.getElementById("content").getElementsByTagName("img");
              imgSizer.collate(aImgs);
         }
    });
// ]]></script><!--<![endif]-->
<div id="container"></div>

The CSS code for #container is thus:

#container {
	padding: 0px;
	margin: 0px auto 0px auto;
	width: 90%;
	min-height: 100%;
	max-width: 980px;
	min-width: 120px;
	position: relative;
}

When using a fixed-width design in the past, my #container <div> would be 980px wide. In this RWD code, you will see that I have used the max-width attribute to ensure that the #container <div> doesn’t exceed 980px but can be reduced to 120px. You do not need to set a max-width for a website (or an element), but if you have a lot of text, it’s worth considering to ensure the site’s readability. Ultimately this decision will depend on the nature of your site’s content. In any case, one doesn’t need to state the relative width of the #container <div> as the browser will assume that it’s 100% unless it’s specified by the max-width, where applicable. This enables the  site’s fluidity.

You will also see that the #container <div> has automatic left and right margins, to ensure that it floats in the middle of the page.

Step 8: Design your structural <div> elements

From here, you can design the rest of the structural elements of your website. There are several approaches to this.

One method suggests that beginners create fixed-width <div> elements, then convert the fixed-widths to percentages. The logic behind this is very sound and I can say that I have used this technique with much success. That said, one will quickly develop the ability to work in percentages rather than pixels and it will all become second nature.

The following is some sample CSS code for creating two columns:

#two-columns {
	position: absolute;
	width: 100%;
	display: block;
	overflow: auto; 
}
.column-left {
	margin-left: 0px;
	position: relative;
	width: 70%;
	height: auto;
	float: left;
	display: inline-block;
}
.column-right {
	position: relative;
	width: 30%;
	height: 80%;
	float: right;
	display: inline-block;
}

Both columns are contained within the #two-columns <div>. This ensures that the column <div> elements are kept together and the 100% width ensures that they don’t break out of the #container <div>. The column on the left has a width of 70% whilst the one on the right has a width of 30%. Both of these widths are relative to #two-columns, which itself is 100% of the width of #container.

Step 9: Make your design more fluid with @media queries

The above design may look good on a desktop with a screen width of 1100px or 800 px or even on an iPad. But how will it look on an iPhone with a screen width of 320 px? An iPhone viewer would see the above website with a left column of 224 px and a right column of just 96 px, which is very small indeed.

One way to get around this is to change the presentation of a website, depending on the viewing size. To do this, we use @media queries in CSS3. Because css3-mediaqueries.js has been installed (as per Step 5), @media queries will be supported by all major browsers (including IE7 and above).

Using the above example, we may wish to tell the browser that we’ll display two columns where the width is greater than 450 px. If it becomes less than this, we shall stack the information into two blocks instead:

#two-columns {
	position: absolute;
	width: 100%;
	display: block;
	overflow: auto; 
}

.column-left {
	position: relative;
}

.column-right {
	position: relative;
}

@media screen and (min-width: 450px) /* Controls when screen greater than 450px */ {
.column-left {
	margin-left: 0px;
	position: relative;
	width: 70%;
	height: auto;
	float: left;
	display: inline-block;
}
.column-right {
	position: relative;
	width: 30%;
	height: 80%;
	float: right;
	display: inline-block;
 }
}

@media screen and (max-width: 450px) /* Controls when screen less than 450px */ {
.column-left {
	position: relative;
	width: 100%;
	height: auto;
	float: left;
	display: block;
	margin-bottom: 4%;
}
.column-right {
	position: relative;
	width: 100%;
	height: auto;
	float: left;
	display: block;
 }
}

If you look very carefully, you will see that the CSS code is broken into three sections:

  1. Style information that applies regardless of the screen width (all of #two-columns and the position attribute of .column-left and .column-right.
  2. Style information that applies where the screen is more than 450px.
  3. Style information that applies where the screen is less than 450px.

You will notice that some of the attributes change  because the layout has changed. In graphical terms, this is what we want to achieve:

You can see that by using the @media queries, one can re-organise the layout of elements to better suit the screen width. This need not simply apply to column sizes.

One can also use @media queries to change font sizes, depending on the screen width. In the example below, the font is 20px when the screen is more than 150px, 22px when it’s more than 600px wide and 30px when the screen width is greater than 750px.

@media screen and (min-width: 150px) {
.article {
    font-size: 20px;
  }
}

@media screen and (min-width: 600px) {
.article {
	font-size: 22px;
  }
}

@media screen and (min-width: 750px) {
.article {
    font-size: 30px;
  }
}

Or one can display or hide elements too. In this example, the ‘story’ element is hidden when the screen width is less than 500px.

@media screen and (max-width: 500px) {
.story {
    visibility: hidden;
  }
}

You can also hide images, but be careful because in most circumstances, the iPhone will still download a hidden image (thus increasing page load times).

The opportunities for creativity with @media queries are endless.

Step 10: Step back and analyse

Responsive web design is a brilliant tool for making websites universally accessible, but there are some limitations to its functionality.

For instance, many websites employ horizontal drop-down menus. Whilst these can be adapted for RWD, this can be a very complicated and tricky procedure that needs a lot of testing to ensure universal functionality.

In any case, and despite your best efforts, elements will compress differently as the screen width reduces and so the positioning of images may shift a bit. Therefore, you will need to test your website carefully and satisfy yourself that the images are in the correct positions for all screen widths and for all browsers.

Finally, one needs to be careful about bandwidth. Images make websites look great, but they vastly increase download times, which are even worse on portable devices. The creation of a RWD website gives one an opportunity to review what is and what isn’t important in terms of content on a page.

This article is designed to provide users with a beginning point for creating a website using Responsive Web Design principles. If you follow these 10 steps, you’ll be well on your way to creating an impressive RWD site.

If you have any comments or questions, feel free to leave a comment at the bottom of this page. Enjoy!

   

Comments:

11 responses to “Getting started with Responsive Web Design”

  • Written by awais saleem on 24 May 2012:

    sir i have a problem that is when i open my rwd website open in ie than it shows very bad results kindly please help me

  • Written by MaxymusBoopathy on 16 June 2012:

    Awesome Information.Its very helpful for me.Nice and Easy explanation thanks a lot

  • Written by Ram on 24 August 2012:

    Nice tutorial, it would be be better if you publish more tip and tricks about RWD

    • Written by Adam Dimech on 26 August 2012:

      G’day Ram. I’d love to write more about RWD in future and that is my plan. Time is a bit tight at the moment, but please do stay tuned…

  • Written by CD on 4 September 2012:

    hey there – this was a really comprehensive article that helped me heaps today- thank you very very much :-)

  • Written by Adam Dimech on 4 September 2012:

    Glad I could be of some assistance :)

  • Written by sunshinedesign.com.au on 8 January 2013:

    Thanks for providing this resource online.

  • Written by sailesh on 28 March 2013:

    how do i change the potion of the div.

    like:

    have in html:
    one
    two

    Get output as:

    two
    one

  • Written by Retina on 31 March 2013:

    A great article on Responsive web design. but need to update little now. and one important thing there is all in one emulator from Opera.

    http://www.facebook.com/OperaMobileEmulator

  • Written by John on 4 April 2013:

    Awesome!

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.