Created

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:

file

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:

file

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:

file

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:

file

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:

myImage.adapt.620.high.jpg

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:

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

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):

file

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.

COMMENTS

  • By APK - 10:26 AM on May 31, 2014   Reply
    Many Thanks.
  • By <a href="http://www.amazon.com/Summer-Leather-Vest-Men-Genuine/dp/B00D9AD0D2/">Genuine Leather Vest</a> - 11:37 PM on Jun 01, 2014   Reply
    Your blog is quite helpful for me
  • By Genuine Leather Vest - 11:40 PM on Jun 01, 2014   Reply
    Your blog is quite helpful for me
    • By Genuine Leather Vest - 11:40 PM on Jun 01, 2014   Reply
      Your blog is quite helpful for me
      • By tidung.net - 5:04 AM on Jun 02, 2014   Reply
        Thanks.
        • By apk - 11:21 AM on Jun 06, 2014   Reply
          Thanks.
          • By Jasa SEO - 11:31 AM on Jun 08, 2014   Reply
            Many Thanks.
            • By Tattoos - 4:38 PM on Jun 08, 2014   Reply
              Many Thanks.
              • By step up height - 6:52 AM on Jun 09, 2014   Reply
                Step up height increaser is an incredible height increasing formula that can increase your height up to 4-6 inches, which is way faster than any other product.
                • By loft conversion - 7:49 AM on Jun 09, 2014   Reply
                  Step up height increaser is an incredible height increasing formula that can increase your height up to 4-6 inches, which is way faster than any other product.
                  • By Best Cash Back Sites - 7:38 AM on Jun 10, 2014   Reply
                    Step up height increaser is an incredible height increasing formula that can increase your height up to 4-6 inches, which is way faster than any other product.
                    • By cipto junaedy - 12:03 PM on Jun 10, 2014   Reply
                      thanks for sharing
                      • By agen bola terpercaya - 12:07 PM on Jun 10, 2014   Reply
                        greats post bos
                        • By Xbox Customer Services Number - 5:47 AM on Jun 11, 2014   Reply
                          Really, this new version offers support for responsive design.
                          • By click here - 7:18 AM on Jun 11, 2014   Reply
                            Really, this new version offers support for responsive design.
                            • By male enlargement pills - 2:44 PM on Jun 11, 2014   Reply
                              Male Enhancement Pills 100% SAFE & NATURAL, Would you like Bigger, Harder Erections & More Intense Orgasms? Try Male Extra Risk Free Today .....
                              When it comes to the junk in your (swimming) trunks, size does matter - or at least it does to male athletes.
                              A recent study has revealed that the bigger your package, the more highly regarded you will be in the locker room.
                              Not only are men with larger penises 'idolised' by their teammates, but they are often central to team camaraderie and the focus of 'banter'.
                              • By male enlargement pills - 2:55 PM on Jun 11, 2014   Reply
                                Male Enhancement Pills 100% SAFE & NATURAL, Would you like Bigger, Harder Erections & More Intense Orgasms? Try Male Extra Risk Free Today .....The analyze, which explored masculinity in sport and how sportsmen interact with their bodies, was carried available by Dr Christopher Morriss-Roberts, in his PhD research at the actual University of Brighton.
                                The size of other men's penis when in the homosocial (same-sex) environment "helped specific sporting males climb up a new social hierarchy of importance", notices Dr. Morriss-Roberts.

                                • By penis enlargement pills - 3:03 PM on Jun 11, 2014   Reply
                                  Male Enhancement Pills 100% SAFE & NATURAL, Would you like Bigger, Harder Erections & More Intense Orgasms? Try Male Extra Risk Free Today .....He studied the actual behaviour of eight athletes, as well as four self-identified gay men and also four self-identified straight men.
                                  The experience of sizing each other up occurs in spite of sexuality and type of hobby, he notes. "All participants noted that they can looked at each other’s cocks inside locker room. "Although bigger isn't always better. Doctor. Morriss-Roberts noted that if a man's penis was very large, teammates often doubted the power to use it properly - something that will need to be proven.
                                  "There was an understanding of which as an athlete you would have to be sexually active; it added substantially to masculine capital, and the qualities associated with a sporting hegemonic mate, " they says.
                                  • By led - 3:24 AM on Jun 12, 2014   Reply
                                    I have been reading out many of your articles and i can claim pretty nice stuff. I will make sure to bookmark your blog
                                    • By birthday cake - 4:26 AM on Jun 12, 2014   Reply
                                      really good tips and tricks all in Responsive design with adaptive image thanks for this arikel
                                      • By Menu Hoka-Hoka Bento - 2:19 PM on Jun 12, 2014   Reply
                                        Considerably, this post is really the sweetest on this notable topic. I harmonise with your conclusions and will thirstily look forward to your incoming updates. Saying thanks will not just be sufficient, for the phenomenal clarity in your writing. I will directly grab your rss feed to stay informed of any updates. Admirable work and much success in your business dealings!&nbsp; Please excuse my poor English as it is not my first tongue.
                                        • By Paket Ultah Hokben - 2:20 PM on Jun 12, 2014   Reply
                                          Let me start by saying nice post. Im not sure if it has been talked about, but when using Chrome I can never get the entire site to load without refreshing many times. Could just be my computer. Thanks.
                                          • By Harga Delivery - 2:20 PM on Jun 12, 2014   Reply
                                            Great stuff from you, man. Ive read your stuff before and youre just too awesome. I love what youve got here, love what youre saying and the way you say it. You make it entertaining and you still manage to keep it smart. I cant wait to read more from you. This is really a great blog.
                                            • By pete - 9:51 AM on Jun 13, 2014   Reply
                                              File is located in the /libs/foundation/src/impl/src/main/java/com/day/cq/wcm/foundation/impl/AdaptiveImageComponentServlet.java
                                              • By Menu Kombo KFC - 11:23 AM on Jun 15, 2014   Reply
                                                I must admit that this is one great insight. It surely gives a company the opportunity to get in on the ground floor and really take part in creating something special and tailored to their needs.
                                                • By Bakmi GM Delivery - 11:26 AM on Jun 15, 2014   Reply
                                                  that has proven popular for many but, as with any blog, it’s about finding a writer/blogger who is passionate about their topic and is professional about their presentation of information.
                                                  • By Obat Keputihan - 9:30 AM on Jun 22, 2014   Reply
                                                    Many Thanks.
                                                    • By toko buku islam - 2:28 AM on Jun 27, 2014   Reply
                                                      science is very useful
                                                      • By Best Weight Loss Pills - 7:55 PM on Jun 29, 2014   Reply
                                                        With a structured programme in place, Carr-Mullings started seeing results.

                                                        "By enough time for my wedding I needed to change my wedding dress, and by September of these year, I lost a full of 30 pounds, " she stated.
                                                        • By Weight Loss Pills - 8:23 AM on Jul 02, 2014   Reply
                                                          Melissa felt a kinship together with Heidi Powell, who is also a functioning mother. However, she did not know really what you should expect. Heidi did not allow Melissa to produce any excuses during the yr that she helped Melissa arrive at her desired weight loss aim. She knew that Melissa ought to face her inner, emotional and also psychological problems, transforming her inner in addition to her outer self. Melissa had to try to think of a way to celebrate the girl late husband’s life, rather than continue to mourn for his loss.
                                                          • By Weight Loss Pills that Work - 8:42 AM on Jul 02, 2014   Reply
                                                            Melissa and Heidi mention her next weight loss aim, which they decide will become 165 pounds. Melissa says that she gets met a new boyfriend, Kirk, who is beginning to may play a role in her life.
                                                            • By cara daftar di bisnis libertagia - 1:33 PM on Jul 02, 2014   Reply
                                                              Appreciate the recommendation. Let me try it out. Also visit my page free Psn codes
                                                              • By click here for more information - 6:30 AM on Jul 03, 2014   Reply
                                                                Really Nice.Tthis new version offers support for responsive design.
                                                                • By Jual Furniture Jepara - 3:01 PM on Jul 04, 2014   Reply
                                                                  Nice information. Thank you for sharing it with us!
                                                                  • By airul - 10:54 AM on Jul 06, 2014   Reply
                                                                    Thanks.
                                                                    • By drug lawyer - 7:58 AM on Jul 11, 2014   Reply
                                                                      These days she gets nervous when people drive over the speed limit in movies, but at some point in the past she must have been a bit of a thrill seeker, because she used to dismount from her skis directly onto the dock at high speeds.
                                                                      • By read more - 6:26 AM on Jul 12, 2014   Reply
                                                                        Good post. Helpful and useful.
                                                                        • By cek tagihan pln - 4:54 PM on Jul 12, 2014   Reply
                                                                          i really look tools from adobe. i like it.

                                                                          ADD A COMMENT