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 ver­sion offers sup­port for respon­sive design. So what does this mean exactly? And how can you lever­age the new fea­tures to ensure your web­site is respon­sive as well, let’s find out!

First things first, it’s impor­tant to define what respon­sive design means exactly. Even though we’ve cov­ered the topic in the past (in this post), it can be hard to under­stand pre­cisely what this term implies. There are loads of resources avail­able on the net of course, but I find that this small sam­ple illus­trates the con­cept really well: it’s really just about mak­ing sure your web­site design can adapt to var­i­ous res­o­lu­tion and devices and offer an opti­mal user expe­ri­ence in all cases.

So how is this sup­ported in CQ 5.6? With two main features:

  • Respon­sive design pre­view in authoring
  • Geometrixx Media

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

When author­ing con­tent in CQ 5.6 you will notice that most fea­tures that you were used to in pre­vi­ous ver­sion are still here, includ­ing the small mag­ni­fy­ing glass allow­ing you to switch to Pre­view mode. How­ever when you click you will imme­di­atly notice a small difference:

We can now select the device we’re tar­get­ting and adapt the user expe­ri­ence accord­ingly, this is really con­ve­nient, as it saves the has­sle of resiz­ing the browser win­dow man­u­ally. Note that the list of avail­able devices is just indica­tive, you can very sim­ply add new devices or mod­ify the exist­ing 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 sim­u­la­tor in action:

Of course I did not choose a ran­dom web­site. This lit­tle guy is the new mem­ber of the Geometrixx fam­ily: Geometrixx Media, this web­site was designed for cus­tomers in the media and pub­lish­ing space, and it illus­trates a num­ber of new 5.6 fea­tures, includ­ing respon­sive design.

To illus­trate this here is how this web­site looks on var­i­ous devices:

Now let’s see how we achieve this in Geometrixx Media, and how you can lever­age this sam­ple to kick off your respon­sive design work. The two main con­cepts here are:

  • Media queries.
  • Adap­tive image component.

Nowa­days most design­ers are famil­iar with media queries, this CSS 3 fea­ture allows us to define dif­fer­ent styles for dif­fer­ent screen sizes. This is the cor­ner stone of any respon­sive website.

For instance if you open the Geometrixx Media design you will notice sev­eral 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 work­ing with media queries.

Next let’s have a look at the adap­tive image com­po­nent. As you’ve prob­a­bly noticed the lay­out is not the only thing that changes when we resize Geometrixx Media, images are also resized on-the-fly, using the adap­tive image com­po­nent. If you look at the actual code of the com­po­nent (under /apps/geometrixx-media/components/adaptive-image) you will see that all we do here is use media queries to load the right image depend­ing on the screen resolution.

Images are then suf­fixed with spe­cific selec­tors to obtain the right size, for example:

myImage.adapt.620.high.jpg

Will gen­er­ate a ren­di­tion of “myImage.jpg” with a with of 620px.

The actual magic hap­pens in a servlet, the code of which is avail­able here:

/apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
/AdaptiveImageComponentServlet.java

 

It’s sim­ply extends the Abstrac­tIm­age­Servlet to pro­duce the new image in real time, based on a pre-defined list of widths that is con­fig­ured in the Felix con­sole (as to avoid hacks like spec­i­fy­ing a huge res­o­lu­tion to slow down the server):

To ensure the right image is reloaded in real time when resiz­ing the browser a cou­ple 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 mim­ics the Pic­ture ele­mentpro­posed for the HTML5 spec.