7 tips to build responsive theme in Drupal 7
June 12th, 20131) 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.
Post Refer by : http://www.unimitysolutions.com/blog/7-steps-building-responsive-theme-drupal-7













