RocketTheme Blog

We covered some of the implementation details of supporting responsive design in Gantry 4 in the previous article, and in this article we're going to explain how responsiveness impacts extensions. A question that has come up several times since we started these articles is, with Gantry 4 will my site be responsive? The short answer is no, but the long answer is that it could be, but it takes more than just the framework to make that happen. Let me explain in more detail...

Responsiveness - The Big Picture

For the sake of simplicity, we'll use Joomla as an example, but the same basic premises apply for other platforms such as WordPress. In the diagram below you can see that a typical site is built on top of several layers.

The first layer, the Gantry 4 framework provides the key responsive elements that underpins the rest of the elements involved.

The second layer is the template that is built on-top and relies on the responsive functionality of the Gantry 4 framework. This has to be tailored to take advantage of those responsive features and provide style for any elements in the alternative layouts.

The third layer, and the one which we'll focus on in this article, contains the extensions that provide the functionality for the site. Think of showcases, galleries, blogs, navigation, etc. Basically anything that provides a mechanism for navigation or displaying content. Extensions have to be compatible with responsive layouts so they can adapt cleanly to the display size of each layout. Also in sizes that are primarily the realm of mobile devices, additional touch events may be helpful in providing ease of use compared with traditional 'click' events.

The last layer, the fourth layer, is the content itself. Content has to be crafted explicitly to support responsive layouts. Any fixed width elements of content such as images, maps, etc, can easily break a responsive layout.

As you can see, to create an effective site that functions properly in a variety of layout sizes, these four elements all have work in harmony with each other. If any one layer is not fully responsive, the layout will break.

Our Extensions

In order to be fully responsive, the extensions have to be so also. Of course we are only able to do this for our own extensions, for any 3rd-party extensions you wish to use, will have to be validated to ensure they will work properly in responsive layouts. We have many extensions in our portfolio, but the most popular ones are RokSprocket and RokGallery.

RokSprocket

From the very genesis of it's development, RokSprocket was designed with responsive layouts in mind. Even though we didn't actually have support at the time, we knew it was coming, so we made design decisions to ensure there would be little modification needed. While working on the upcoming Joomla template we found that it worked well out of the box, but we did take the opportunity this month to move the Mosaic layout into the core of RokSprocket and provide it with some base styling.

We also implemented touch events to allow you to 'swipe' to change tabs, headlines, features and lists. This makes RokSprocket an excellent solution for responsive site building.

RokGallery

RokGallery was written over a year ago, before the popularity of responsive design brought it to the mainstream web development community. We have updated the front-end display elements such as modules and component view to ensure that RokGallery functions properly in various layouts. To accomplish this we added a new, visually identical showcase layout style called "Showcase Responsive". To ensure backwards compatibility the existing showcase style has been renamed to "Showcase Fixed", and this is not compatible with responsive layouts. Along with this change, we've also added a new option in the Gallery Picker editor button, you can now insert images in a new responsive format into your content. This will allow images to resize down as the layout requires.

Similar to RokSprocket, we've also added 'swipe' touch gestures to RokGallery so you can change images by merely swiping right or left rather than having to touch a small button. Currently Supported devices for these touch events include iOS(iPod Touch, iPhone, iPad) and Android (2.2+).

Other Extensions

RokPad2 is a new code editor that provides much of the power and functionality of a desktop editor, for your Joomla website. When RokPad2 was rewritten recently we fully tested it in responsive layouts, so this extension is already ready for use in any upcoming responsive design project.

Our other extensions will receive updates in the coming months to ensure they all have responsive capabilities, so please be patient while we get these reworked.

Media Queries in JavaScript

With the release of the upcoming responsive-capable RokSprocket and RokGallery extensions, we've created a new helper class that these utilize. RokMediaQueries.js provides a unified system that enables extensions to add media query listeners.

Media query listeners are a new browser feature that allow JavaScript to interact with the CSS media queries. This is key functionality if you need your JavaScript powered extension to redraw itself when your layout changes from one size to another. The alternative to this is to use browser polling of the view-port which can put a significant load on your browser and drastically effect performance. Media query listeners are supported in all modern browsers including Chrome, Firefox, Safari, and IE10 and we've also added a JavaScript fall-back for Opera and IE9.

We believe this is the best real-world solution, and browsers prior to these are not commonly used in mobile devices where these layout changes are relevant.

If you would like to take advantage of the RokMediaQuery functionality in your own extensions, you just need to ensure the RokMediaQuery.js is loaded and use it like this:

{codecitation class="brush:javascript"}
  var rand = function(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); };
  var myFunction = function(){
  var color = [rand(0, 255), rand(0, 255), rand(0, 255)];
  document.body.style.backgroundColor = 'rgb(' + color.join(',') + ')';
  };
  
  RokMediaQueries.on('every', myFunction);
  {/codecitation}

In the code above, when ever a media query is triggered by your layout changing size (either a browser resizing, or a device rotating), the myFunction() class will be called. In this demo example, a different random background color would be applied to the body.