Steps to build your responsive drupal 7 theme

1) Understand your design and decide on the breakpoints.

2) Start with your theme info file

name = RoboSmart
description = A responsive mobile-first layout for a corporate site.
version = VERSION
core = 7.x
stylesheets[all][] = css/style.css<

3) Create HTML5 pages for each unique page in your website.

Based on the grid system and the nature of your design, download grids from
http://960.org. In the case of the RoboSmart theme we have used a single grid at 600
which is fluid and works for any screen resolution greater than 600px.
Start with the mobile design and move the way up for all the breakpoints. Convert the
HTML5 pages to template files. This step is similar to that of any general drupal theme
except that the same template is applicable for multiple breakpoints. If you are using
HTML5 make sure you start with the declaration in your html.php.tpl file.
Validate the outline your page generates using an outliner. Structure the HTML5 tags
and header tags to achieve the desired outline. Working your way up from the lowest to
the highest breakpoint, i.e starting from the mobile design, is an important aspect of the
mobile first approach.
4) Segregate the styles for the different breakpoints using media queries. Detailed below
options for using media queries.
Multifile option: Embed your media queries in the .info file

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
stylesheets[all and (min-width: 600px)][] = css/grid-600.css
stylesheets[all and (min-width: 600px)][] = css/style-600.css
stylesheets[all and (min-width: 480px)][] = css/style-480.css
stylesheets[all and (min-width: 960px)][] = css/style-960.css
stylesheets[all][] = css/fonts.css

Single file option: Write media queries inline in css files

media all and (min-width: 461px) and (max-width: 900px) {

//embed styles here
}

5) Embed viewport & other mobile/handheld device specific meta tags in the
html.php.tpl file

<meta content="width" name="MobileOptimized"/>

<meta content="true" name="HandheldFriendly"/>
<meta content="width=device-width" name="viewport" />
<meta content="on" http-equiv="cleartype"/>

6) To enable IE support, add Html5shiv, Respond.js and Selectivizr.js files to your

theme.
7) Test your theme in a default Drupal installation. Voila! Here we have a Drupal 7
theme that is responsive.

Behind the sceens...

Media Queries

CSS3 Media queries allow you to check media type and media features and conditionally
load style sheets. This is commonly used to distinguish between screen and print. The
media type print is used to define the printer friendly styles.
media print {
//embed print stylesheet

}
The below media query defines the style sheet for all media types. Also demonstrates the
use of the width media feature. Allows us to define styles for screen widths between
461px and 960px
@media all and (min-width: 461px) and (max-width: 900px) {

//embed styles here

}
Media features are used to define the properties of the user agent. Some of the other
Media features include height, orientation and aspect-ratio.

Mobile friendly meta tags to the html.tpl.php

<meta name="MobileOptimized" content="width"/>

Use to set Narrow layout in devices , introduced by Microsoft.

<meta name="HandheldFriendly" content="true"/>

The HandheldFriendly meta-tag was used initially by older Palm and Blackberry models.
<meta content="width=device-width" name="viewport"/>

Certain browser devices display the web pages by auto zooming. To override this auto
zoom feature for already optimized pages, the viewport meta tag is used. In our case the
width property is used. Here the width property is set to the viewport of the device. The
other viewport properties includes the initial-scale property which controls the zoom
level when the page is first loaded, the maximum-scale, minimum-scale, and userscalable properties which control how the user zooms in and out of the page. The
viewport meta tag is widely supported by modern smartphones and not limited to iOS,
and Android devices.
<meta http-equiv="cleartype" content="on"/>

Enables clear type for Windows mobile devices. For more details on the Mobile friendly
meta tags refer Mobile boilerplate at github. Mobile boiler plate is the best practice
baseline for your mobile web app. (https://github.com/h5bp/mobile-boilerplate )

Optimizing for IE

To enable IE support add Html5shiv, Respond.js and Selectivizr.js files to your theme.
What does html5shiv.js do?
IE9 supports html5 partly, IE8 and below do not support HTML5. The html5shiv.js uses
the document.createElement(tag) to create new elements and forces IE to render the
CSS styles to these generated HTML5 tags. (http://code.google.com/p/html5shiv)

What does selectivizr do?

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute
selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr
will do the rest. (http://selectivizr.com) Selectivizr makes about 25 css3 style elements
work in IE 6-8.
What does Respond.js do?
The goal of this script is to provide a fast and lightweight script to enable responsive
web designs in browsers that don't support CSS3 Media Queries - in particular, Internet
Explorer 8 and under. It's written in such a way that it will probably patch support for
other non-supporting browsers as well (https://github.com/scottjehl/Respond)