Go Responsive on Joomla

Maggie Sawyer October 26, 2015

[Joomla + Responsive Design = Great Website or Blog?]

As of 2015, The ‘Big Three’ Content Management Systems are WordPress, Drupal, and Joomla! All three are free of cost, open-source CMSs with a sizable development community and considerable millions of   connoisseurs in the form of fans, followers and critics.

Joomla is the preferred choice of all those who wish to combine Drupal’s code-strength with WordPress’ user-friendliness. It’s hugely popular with e-commerce and social-networking sites, and its fame is growing fast. It’s also the only one of the three most popular CMSs which lists “being responsive” in its core features.

Now we know that’s not much, but since most CMSs are still struggling to keep pace and adapt to new mobile-friendly ways of designing, we’ll take what we can get. We are not going to deny, Joomla’s declaration is a bit comforting, considering that as of April 2015, Google has started ranking mobile-friendly websites higher on mobile searches.

This, perhaps more than anything else, has made it final. Instead of considering mobile-friendly sites practically an afterthought, we need to buckle and get responsive, regardless of the CMS you are using.

Responsive Web Design: Status Quo in 2015

Despite its sudden upsurge in popularity, the concept of mobile-friendly websites is a relatively new one. Many developers are still testing the waters before fully delving into it.

Responsive Joomla

Before RWD became en vogue, many developers would create web-apps (mobile-friendly versions of full sized websites) and be done with it. Now that practice is still prevalent, mostly because practices in responsive designing itself are not stable. However, with more than 20,000 different types of Android devices out there (all of them with different dimensions and screen resolutions), a web-app with multiple pre-defined resolutions is not going to cut it.

As for the Content Management Systems, most of them are in the same boat when it comes to adapting to mobiles. The current practices include light device detection and presenting content with the help of respective templates for tablet, desktop, mobile, etc. Then there are plugins and special responsive themes, which will do the same. Users are supposed to be appeased with template switching based on best guessing.

However, we are not here to hate.

New Norms in Responsive Designing

So far the practice had been to design a website as usual and then make it mobile friendly (hence afterthought). However, a new approach is quickly taking becoming best-practice technique in responsive designing. They are now putting Mobile-first.

Instead of designing for desktop and squashing/simplifying everything down to later fit a smaller device (read: mobile), more and more designers are going the opposite way. Starting with a baseline mobile-friendly design, further layout affects are applied with cascading style sheets and fluid grids, when the screen dimensions become large enough to be somewhat practical. This covers all basics with a vast array of screen dimensions and specialized devices.

The beauty is in its simplicity. Instead of scaling down, scale up.

Joomla’s progress on its way to being Responsive

Joomla’s version 3 was released in 2012 and since then it comes packed with Bootstrap that can be used everywhere, backend and frontend alike. That is especially great news for all those trying to work their way up to being responsive. In the CMS race, Joomla just got ahead a little.

Joomla Version 3

Now Bootstrap itself is a pretty kickass framework. It’s super-stylish and effortlessly efficient. It’s compatible with most browsers and can be neatly tricked into being the same with older versions of more stolid ones (I’m talking IE6 and 7). All the basics of responsive design are covered in Bootstrap, namely fluid grids, flexible images/media, and of course, the classic media queries.

To make Joomla even more accessible, Bootstrap 3 comes with ARIA codes and specific only-for-screen-reader styles.

How can you go responsive on Joomla?

Joomla is definitely ahead in the race of being responsive, as evidenced by thousands of free and premium templates available all over the internet, built for Joomla and completely responsive.

It’s not that easy though. The extensions on your website need to be before you throw in a template and consider yourself done.

If your extensions: plugins or components, or pretty much anything else, are not responsive, you can mess up your site big time by installing a responsive template.  That said, it means you need to be super careful and meticulous while selecting extensions. Make sure that all your front-end extensions have been upgraded to responsive versions and update them before you install a responsive template on your Joomla site.

Why should you go responsive on Joomla?

We all know the apparent future-proofing benefits of responsive web design, so I’m not going to harp on about that. Great design, scalability, adaptability, better reach, content-first-core, etc. are all well known and documented benefits. They apply to every all websites going responsive. Then why would you specifically choose to go responsive on Joomla?

…Because responsive design is still in development stage.

Joomla bridges the (quite sizeable) gap between the user-friendly, simple WordPress and code-heavy, technical Drupal. As an independent standing development platform, that provides a lot of scope for experimentation and creativity. You’ll need both when you’re trying to go responsive.

Joomla powers huge, popular websites like ebay and online portals for Harvard University and MTV Greece. It works particularly well for small and medium businesses, hence its popularity with the e-commerce portals.

Wrapping Up

The steep learning curve that comes with this CMS may frighten some beginners into backing off quick and early. But once you master the basics, you’ll find out why Joomla has such a rabidly loyal fan following.

It’s just difficult enough to be exciting.

Leave a Comment

Login to your account

Can't remember your Password ?

Register for this site!