The Joomla! Community Magazine™

Responsive Design

Written by | Monday, 31 October 2011 17:00 | Published in 2011 November
As more web enabled devices are released on the market, people are viewing the internet with different tools. Smart phones, tablets, portable gaming devices, car entertainment units and even household appliances, like fridges, have empowered users to stay connected to the internet all day long. 

However, they don't provide the most optimal viewing experience considering that most websites are designed to viewed on personal computers. Having to pinch, zoom and squint at a screen to see what you're reading is both problematic and annoying. For a while, mobile detection solved many of these problems. However, as more and more devices are released on the market, it becomes hard to keep track of the different screen resolutions and detection method required to display corresponding designs and layouts.

Currently, the most effecient solution to the multiple device problems is responsive design. If you haven't caught on to responsive design, then you might be missing out on one of the latest trends in web desing. Instead of relying on frameworks and extensions to do the device detection, individuals work purely off browser resolutions and display different layouts accordingly to match.

Responsive Design

Responsive design changes and adapts a website to how a user may perceive it. Whether it is on a mobile device, tablet or desktop computer, being able to adapt and change the designs and layouts to different resolutions and how they are being viewed can enhance the overall user experience.

It is important to note that this is different to how templating frameworks or plugins may work in Joomla. The 'traditional' or more common method of generating a mobile website is to detect what device the user is using with a particular template framework or Joomla extension and then display a template or layout accordingly.

Responsive design, on the other hand, uses CSS media queries and multiple cascading style sheets to render the layout of the website differently. More interestingly, you can have different displays and layouts depending on the orientation of a device such as a tablet switching from portrait to landscape mode.

This responsive method of design is intended to provide the user with the best experience in terms of visually displaying content to them on the device or platform that they are viewing it on.

This isn't anything new, in fact many websites use similar techniques to display print versions of website which may hide irrelevant elements except for branding and content to preserve printing resources.

Becoming Responsive

Creating a responsive website design for your Joomla website isn't a straightforward process. It requires good if not excellent HTML and CSS knowledge. One method of creating responsive templates is to use media queries.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="/mobile.css" />

This CSS reference will call in the mobile.css file if the maximum screen width is 320px.

This is the same method used to display print version of your website.

<link rel="stylesheet" type="text/css" media="print" href="/print.css" />

The browser will detected what browser resolution you may have and load different style sheets accordingly. This method can also be applied to screen orientations between landscape and portrait layouts.

Another method of implementing responsive templates is to use fluid CSS layouts as opposed to fixed width layouts. Setting your website widths to 100% as well as setting images to resize is a good starting place in creating a website template that can work on many different screen resolutions.

img { max-width: 100%; } or img { width: 100%; } for IE

These techniques don't work in all browsers and should be tested accordingly but the majority of modern browsers and mobile devices will accommodate these methods which is what you're trying to target.

Without getting into the nitty gritty of template coding, more resources on implementing responsive design can be found online.

Would Your Joomla Website Take Advantage of It?

Whether your website can take advantage of responsive design or not is purely dependant on your audience.

If you find that many of your website visitors use mobile devices to access your website, or you engage with your users via Twitter or other mobile orientated social networking platforms, then getting your site across on a nice mobile/responsive design can be quite beneficial.

Future of Responsive Design for Joomla

As more and more businesses and organisations want, and require, responsive design for their websites, we'll start seeing more template companies producing templates for Joomla that are encompassing responsive design.

Seeing a few responsive design features in the core of future Joomla releases or at least distributed with the administration templates can open up a new range of possibilities for managing your Joomla website.

There are already quite a few templates out there that cater to managing Joomla on mobile and other devices other than a desktop or laptop, but imagine being able to quickly load and adapt to different screens and platforms while only using one template, and not requiring different templates for different situations.

Another area where responsive design can hugely help users is in the area of web accessibility. Users who require large amplification of the sites because of visual impairment may find it harder to navigate a website that doesn't adapt to their view point. Responsive user interfaces can vastly improve the usability.

Embracing responsive design to improve web accessibility is a win for everyone. Subtle changes to layouts on different screen resolutions can improved usability and most importantly get your online message read by the intended users.

If you're interested in mobile experience and usability for Joomla, visit http://ux.joomla.org, join in and contribute to the conversations. The end result being a vastly improved user experience in Joomla for all.

Read 29755 times
Tagged under Designers
Peter Bui

Peter Bui

Host of the Joomla Beat Podcast - Podcast about designing, developing, marketing and managing your Joomla website. Also runs PB Web Development. Follow Peter Bui on  Google+

Follow @JoomlaBeat

avatar
Bang on mate. IMO, RWD isn't just the new cool, it is the future. It has to be.

Yeah, 960px fixed-width designs look OK now, but they aren't ideal on a phone. How do you think they might look on the 20,000px monitors that will be with us in just a few years? You wanna look good at 320px and 20,000px? Gonna be tough without RWD :D

I, for one, am diving into mobile-first RWD head first. I am not going to be that last old-skool 'webmaster' claiming the modern equivalent of "table-based layouts are better than CSS because [myth], [myth] and [ignorance]" (we all remember those right?).
VOTES:-2
avatar
960 with adapt.js works. Its similar to respond.js with broilerplate html5. I have tested it myself. I suggest, RWD along with minify with modernizr for better performance.

Helps in reducing http request &amp; compressed js &amp; css files.
VOTES:0
avatar
Hi Peter,

Nice article! I see a bright future for Responsive WD (or as it should be called 'good CSS' ;)

RWD isn't going to do everything of course - in my opinion the bigger change in the web today is a visual point&click vs. touch-context (with a physical context not far off), and classical 'one-site' CMS's are gong to have some catching-up to do with web applications in terms of net-wide integrations of data, apis, etc, so the maximum value is ultimately passed back to the visitor.

All of that said, anything which challenges the orthodoxy of app-store walled gardens and URI-non-compliance is certainly a good thing. I'm for anything that supports web standards in an accessible way, and RWD definitely will. Long live the web! :)
VOTES:-2
avatar
Have to a agree with those comments there.

RWD addresses the screen resolutions but it doesn't address the touch aspect of using a website or the interactive experience a user might have with it. It goes half way to write good CSS but you need just that little bit more to really take the mobile experience further.

I do find it all funny that years ago when I started making website, they were all fluid width sites but as screens got bigger and bigger this was seen as a no no as it made readability of content harder.

Now we need it to be fluid to accomodate for these tiny screens :)

Of course you can use max-width etc to control the look and feel.

Anyway, exciting times! It's making designing more creative as there are so many more variables now.
VOTES:1
avatar
We survived the first browser-hell and the second (IE6) ... we struggle with new daily webstandards and tiny mobile devices... and finally we have to create websites for FRIDGES... where are they going to stop? ;-)

However, I like the article, love the intro.
VOTES:-1
avatar
I think joomla will take the advantage and sure is the future.

Nice article
VOTES:0
avatar
You can find out what is going on at ux.joomla.org/
VOTES:0
avatar
enter your message here...
pepperstreet wrote:
We survived the first browser-hell and the second (IE6) ... we struggle with new daily webstandards and tiny mobile devices... and finally we have to create websites for FRIDGES... where are they going to stop? ;-)

That's the point. RWD is the only sustainable way to do this; one web!

The alternatives, based on browser detection, do definately hark back to the dark days of the browser wars. None of want to go back there.
VOTES:1
avatar
and the new Joomla.org website that just got released is a fantastic example of a responsive website.
VOTES:0
avatar
enter your message here...
Peter Bui wrote:
and the new Joomla.org website that just got released is a fantastic example of a responsive website.

Forgive my pedantry but while @kyleledbetter's redesign of Joomla sites is excellent, and very welcome, it isn't responsive.

Ethan Marcotte (arguably the father of RWD) listed 3 essential criteria for RWD and the Joomla! sites miss 2 of those; flexible images and a fluid grid. For more detail see 'On being responsive' by Ethan: unstoppablerobotninja.com/entry/on-being-responsive/

Kyle's design would be better described as adaptive.
VOTES:0
avatar
Joomla Development India Tuesday, 29 November 2011
This is totally bookmarked and a full-weekend read so I can absorb all the awesome information. Thanks for sharing.
VOTES:0
avatar
Hi all,

I just made my template framework available for free, my Xmas gift to the Joomla community. It's responsive, mobile-first and html5. Lightweight and crazy fast, it contains everything you need to build something awesome.

Some more detail in my blog post here: internet-inspired.com/blog/css-and-html/one-web-template

Merry Xmas all!
VOTES:0
avatar
Thank you for your article, now I get a clearer view about Responsive Design.

Yes, currently there are few Joomla templates ans Joomla extensions are responsive.

I have one question for you: With the Joomla core, would you like to use the PC layout or the mobile layout on iPad?
VOTES:0
avatar
Great article here, Peter.

I stumbled upon this while researching responsive design. Running a design studio where we create websites mostly for small businesses using Joomla! as a CMS, getting responsive design right is absolutely crucial!

I'm going to spend the next few weeks experimenting with responsive Joomla templates in the hopes of creating a &quot;base template&quot; which we can carry through to most of our designs - responsiveness and all! ;)

Thanks for adding a whole bunch of value here.
VOTES:0
avatar
Church Websites Friday, 06 July 2012
We build a lot of websites for churches and have found that most church organizations don't like the visual appeal of the responsive design because of there moduling &quot;blocky&quot; look. This is not to say that we are not going to design them in a responsive layout but it is not an easy transition with non techy visually intense websites for churches. Some churches embrace the simplicity of a responsive design but many are not ready to give up some of the appeal of their fixed width layouts...

It will be interesting to see how it all plays out over the next few years...
VOTES:0
avatar
At last I get a clear view about R D!
Thanks again!
VOTES:2
avatar
Nice blog. Being a responsive designer i know that Bootstrap is very good in developing responsive site. I have developed many site using it. Now, i am working on Joomla and would like to make a responsive site on it. Thanks for sharing such a nice resources.
VOTES:0
avatar
can you please let me know step by step , how to design own joomla 3.2 responsive template
VOTES:0