Mar 06, 2013

Responsive design with adaptive images

Posted by Vianney Baron

As you know CQ 5.6 has recently been released, and if you've seen demos or read the release notes you will have noticed that this new version offers support for responsive design. So what does this mean exactly? And how can you leverage the new features to ensure your website is responsive as well, let's find out!

First things first, it's important to define what responsive design means exactly. Even though we've covered the topic in the past (in this post), it can be hard to understand precisely what this term implies. There are loads of resources available on the net of course, but I find that this small sample illustrates the concept really well: it's really just about making sure your website design can adapt to various resolution and devices and offer an optimal user experience in all cases.

So how is this supported in CQ 5.6? With two main features:

  • Responsive design preview in authoring

  • Geometrixx Media

Let's explore these and see how the magic happens.

When authoring content in CQ 5.6 you will notice that most features that you were used to in previous version are still here, including the small magnifying glass allowing you to switch to Preview mode. However when you click you will immediatly notice a small difference:


We can now select the device we're targetting and adapt the user experience accordingly, this is really convenient, as it saves the hassle of resizing the browser window manually. Note that the list of available devices is just indicative, you can very simply add new devices or modify the existing ones, but it's not the topic of this post (just a small hint: look at /libs/wcm/mobile/components/emulators on your CQ 5.6 instance).

Here's the iPhone 5 simulator in action:


Of course I did not choose a random website. This little guy is the new member of the Geometrixx family: Geometrixx Media, this website was designed for customers in the media and publishing space, and it illustrates a number of new 5.6 features, including responsive design.

To illustrate this here is how this website looks on various devices:


Now let's see how we achieve this in Geometrixx Media, and how you can leverage this sample to kick off your responsive design work. The two main concepts here are:

  • Media queries.
  • Adaptive image component.

Nowadays most designers are familiar with media queries, this CSS 3 feature allows us to define different styles for different screen sizes. This is the corner stone of any responsive website.

For instance if you open the Geometrixx Media design you will notice several CSS stylesheets:


And each of these starts with this statement:

@media (max-width: 480px) {

And that's pretty much all you need to know to start working with media queries.

Next let's have a look at the adaptive image component. As you've probably noticed the layout is not the only thing that changes when we resize Geometrixx Media, images are also resized on-the-fly, using the adaptive image component. If you look at the actual code of the component (under /apps/geometrixx-media/components/adaptive-image) you will see that all we do here is use media queries to load the right image depending on the screen resolution.

Images are then suffixed with specific selectors to obtain the right size, for example:


Will generate a rendition of "myImage.jpg" with a with of 620px.

The actual magic happens in a servlet, the code of which is available here:


It's simply extends the AbstractImageServlet to produce the new image in real time, based on a pre-defined list of widths that is configured in the Felix console (as to avoid hacks like specifying a huge resolution to slow down the server):


To ensure the right image is reloaded in real time when resizing the browser a couple of JS libraries are used, these can be found here:

  • /apps/geometrixx-media/components/adaptive-image/clientlibs/js/matchMedia-polyfill.js which is used to test is a media query applies
  • /apps/geometrixx-media/components/adaptive-image/clientlibs/js/picturefill.js which mimics the Picture element proposed for the HTML5 spec.