A few people have asked me how I made the new gench site responsive, meaning its layout adjusts depending on the width of the browser or device. You can see it in action here by simply resizing your browser window (or flip your mobile device from horizontal to vertical or vice versa).

Part of the answer is that I created a Drupal subtheme based on a responsive theme (Omega – but there are others). This is taking care of the actual media queries that create the various sized layouts or “breakpoints.”

Omega comes with four breakpoints (note: the devices are just examples and can vary depending on users’ settings):

• wide (1200px and wider – for larger monitors & apple retina displays)
• normal (960px-1200px – for normal sized monitors and iPad horizontal)
• narrow (720px-960px – for vertical iPad, Kindle Fire, etc.)
• fluid (720px and smaller – for smaller mobile devices and smart phones)

With Omega taking care of this for me, “all” I have to do is style the various breakpoints or make my global styles work at all breakpoints, or realistically, a little of both.

What follows is a very stripped down example of how I’m doing this. The inline comments explain what’s going on. I’m doing this in my subtheme’s sites/all/themes/mytheme/css/global.css file, but there is an alternate method where each breakpoint has its own css file (just remember to add references to any new subtheme css files to your .info file if you do this). In hindsight, I should have split mine up because it is now pretty unwieldy (5,000+ lines of code!).

 /*CSS for genchstyle theme - all breakpoints*/

/*GLOBAL STYLE INFO FOR ALL DISPLAY BREAKPOINTS*/

    h2 {
    color:rgb(204,204,204);
    font-family:Arial,Helvetica,sans-serif;
    font-size:1.2em;
    }

/*MEDIA QUERIES FOR RESPONSIVE DESIGNS*/

/*Wide - larger computer screens and retina devices*/
@media all and (min-width: 1200px) {

    body{
    background:#000 url(../../../../default/files/grate-wide.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:100%;
    }    
}

/*Normal - iPad horizontal & small-to-medium computer screens*/
@media all and (max-width: 1200px) {

    body{
    background:#000 url(../../../../default/files/grate-normal.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:100%;
    }    
}

/*Narrow - iPad vertical & kindle fire, etc.*/
@media all and (max-width: 960px) {

    body{
    background:#000 url(../../../../default/files/grate-narrow.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:90%;
    }

}

/*Fluid - Mobile Devices*/
@media all and (max-width: 720px) {

/*Background - mobile*/

    body{
    background:#000 url(../../../../default/files/grate-fluid.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:90%;
    }

}

I test the different breakpoint styles by resizing my browser window (or using browser developer tools). I also test on a few actual devices, but I do my initial design and testing by just resizing my window.

This technique isn’t just about scaling text and graphics up or down depending on the width of the browser. It can be, but you can also do some pretty amazing things like turn a static menu at wide breakpoints into a tool palette triggered by a button on smart phones. You can also bind javascript/jQuery scripts to the class Omega adds to the mobile breakpoint. In the following example, my script is moving my submenus from the second sidebar to the content region on smart phones….

(function($) 
{Drupal.behaviors.myCustomBehavior = {
    attach: function(context) {
      $('body').bind('responsivelayout', function(event) {
        if($(this).hasClass("responsive-layout-mobile")) {
		  $("#edit-actions").after($(".block-menu-label-menu"));
          $("#block-system-main-menu").after($(".block-menu-studio-menu"));
		  $("section#block-menu-menu-label-menu h2.block-title").before("<a href=\"#\" id=\"label-menu-button\"></a>");
		  $("section#block-menu-menu-studio-menu h2.block-title").before("<a href=\"#\" id=\"studio-menu-button\"></a>");
        }
		else {	  
		$(".block-menu-label-menu").prependTo($("aside#region-sidebar-second"));
          	$(".block-menu-studio-menu").prependTo($("aside#region-sidebar-second"));
		}
      });
    }
  };
})(jQuery);