RocketTheme Blog

Unless you have been living under a rock for the past year you will have noticed a growing trend in web design called "Responsive Design". The premise of responsive design is that with the prolific growth in mobile devices, and their vastly varied display sizes, a web site can be designed to adapt to these platforms utilizing media queries. The previous leading school of thought was that the best approach was to provide a mobile specific view that was independent of the main design. This concept quickly became unmaintainable with the popularity of larger display phones and tablets. While we have up to this point been releasing templates and themes based on the older trend, with next month's release we are moving towards the newer responsive trend. This is the first part in a series of articles that outline RocketTheme's journey down this road.

The Rise of Responsive Frameworks

For the past few years, fixed grid design based on popular grid solutions like 960 Grid, Blueprint, YAML and others became the de facto solution to CSS design in a world dominated by desktops and laptops. We embraced this philosophy when we created the original Gantry Framework selecting the 960 grid system as our basis due to its flexibility, lightweight design and browser compatibility. With the growing popularity of responsive layouts and the gradual demise of more traditional fixed grid systems, a whole slew of responsive frameworks have been developed. Some of the more well known include Foundation by Zurb, Frameless, Inuit CSS, and Bootstrap. Even though Gantry was built on a fixed grid system, there have been some intrepid users that have converted it to be responsive by integrating these grid systems and for specific applications, this has worked well. Unfortunately a responsive design involves more than just the template, it involves every extension that is visible on your site, so all the elements have to play nicely together.

Plans for the Responsive Compatibility

Let's step back and discuss our plans for the Gantry Framework. If you have spent any time developing with RocketTheme templates and themes for Joomla and WordPress, you will undoubtedly know that we build these designs on top of the Gantry Framework that we originally developed at the end of 2009 and soon after released as its own GPL project. It has evolved over that time, first getting ported to WordPress, and then to Joomla 1.6, 1.7 and 2.5. Currently it sits at version 3.2 for Joomla, and 1.24 for WordPress. We have been planning to unify these versions under a shared code-base for the core parts of the framework and at the same time provide a radical new version that would address many of the most requested features from our users, including of course, responsive design. Frankly our plans were a little over ambitious and our goal of a summer 2012 release became more and more unrealistic. We had to take a step back and rethink the road-map.

What we decided was to incorporate some of the most critical requests and enhancements into the next version to be called Gantry 4 and push back our more ambitious but less urgent plans into the following release, Gantry 5. The new plans for Gantry 4 call for a smaller and more focused release that will address the following points:

• New responsive front-end Gantry template based on Bootstrap's grid system
• Refreshed back-end administration UI
• Minor administration performance optimizations
• LESS for base CSS with PHP-based compilation into CSS. We will provide various options including ever-page load, manual, and also change-based recompilation for maximum flexibility during development to production life-cycles
• General merge of Joomla and WordPress code-bases
• Many front-end performance optimizations related to class loading, caches implementations, and rendering

We hope to get this release done and dusted in the next couple of months. I think you will be very pleased with this release as it will be the most significant Gantry release to date, and be fully backwards compatible with our existing releases.

Responsive August Joomla Template Release

Taking this a step further, we decided we didn't want to wait even for Gantry 4 to release a responsive design because we could do that effectively even with our current Gantry version 3 without any core-changes required. This is a pretty amazing feat considering that we developed Gantry before there was any concept of responsive design. We just designed it with so much flexibility that we are able to do everything we need with template-only modifications. Earlier this year when we developed RokSprocket, our super-flexible and provider-agnostic content module, we made sure we built all the layouts with responsive design in mind. RokGallery was built before the responsive trend, but we will be releasing an update shortly that enables responsiveness as well as touch events for mobile compatibility. In short our upcoming August Joomla template release, along with RokSprocket and RokGallery will be responsive. Over the next few months we'll be updating our other extensions to provide responsive compatibility as needed.

In part 2 of this series we'll cover our responsive solution in more detail.