Smarter ideas worth writing about.

Making Sense of Mobile with CQ5


Apparently this mobile concept isn’t going anywhere, and it’s making it extremely difficult to figure out how to design websites. We used to only have to worry about desktop screen resolution on 17” monitors, so the rule “design for 1024x768” was sufficient. Now there are cell phones, tablets, car dashboards, and refrigerators with browsers in them. Who knows what else is coming! No one has mandated that these devices all maintain 1024x768 resolutions, so we have a problem. How do we build sites that are equally as engaging and effective when viewed on all devices? Fortunately, CQ5 has some good answers to that question.


CQ5 Mobile

Adobe provides an add-on module to CQ5 for detecting requests from different devices and acting accordingly. At the developer level it includes some APIs for dealing with these requests a number of different ways. At the content authoring level there are some really good hooks into this device detection, such as:

  • Set up “device groups” or classifications of mobile devices based on pieces of functionality and/or screen resolution. This means you don’t have to design for each of the thousands of different screens out there. You can group them into generalities and design according to those rules. This feature is backed by WURFL (Wireless Universal Resource FiLe), a dataset of all devices and what their capabilities are. A fairly recent version of WURFL ships with CQ5.
  • Author mobile sites inside of device emulators that allow you to see your site as it will appear in different devices. If you want to author your site in an iPhone, you will preview your site in an iPhone emulator, respecting the correct resolution. You can also test device rotation on devices that support the feature. The emulators tie in closely to the device groups, and are a great tool used to test how your site will react to requests from different devices.
  • The content author context never changes when switching between mobile and non-mobile.  You have the same access to DAM assets, the same authoring functionality, the same design elements, and the same hooks into SiteCatalyst and Test & Target. This makes it that much easier for authors to create seamless experiences across multiple devices.

While architecting your site using CQ5 Mobile, there are options. Do you want one site that readjusts its layout according to the device? Do you want a separate mobile and non-mobile site? A hybrid of both? The building blocks are definitely available.


Option 1 – Single Site for Mobile and Non-Mobile

If you want a single site that knows how to readjust itself based on device, you’ll want to build your site using the provided mobile components as a framework. The standard page components in CQ5 simply don’t have the appropriate wiring to deal with the mobile functionality. By extending the foundation CQ5 mobile page component, the page inherits the appropriate hooks to render content differently according to screen size. The advantage is a simpler authoring experience and a simpler implementation. Authors have one site to worry about that always looks good, regardless of device.  The disadvantage, however, is that you have to make the assumption that your mobile and non-mobile site will have the exact same pages and content. It’s also a little harder to design this type of site from a user experience perspective, because there are so many more variables to consider.


Option 2 – Completely Separate Mobile Site

On the other hand, you can build a completely separate mobile site. In this scenario mobile and non-mobile page components can be completely separate. Both sites provide the same authoring experience, just treated as separate content. If you’ve purchased CQ5 Multi Site Manager, you can create “live copies” of parts of your non-mobile site. This means when an author updates content on the non-mobile site, it will automatically synchronize down to the mobile site. Then, on the mobile site authors can add or remove certain pieces of content as desired. This method provides a lot more flexibility from a content authoring standpoint and is a bit less complex for the development team. On the other hand, the approach is more difficult to configure administratively, because it has more moving parts. The added flexibility also makes content authoring a little more complicated.


Option 3: PhoneGap

Another option exists, but we won’t go into a ton of detail about it. In fall of 2011, Adobe acquired the popular, cross-platform mobile app compiler called PhoneGap. This solution allows you to build mobile applications (not websites) using HTML/CSS/JavaScript and then cross-compile them into native formats for iOS, Android, etc. Through PhoneGap, you can integrate your CQ 5.5 WEM content into native, mobile applications. If you’re interested, here is a good link to some of the CQ5.5 documentation about PhoneGap. Check out our Mobile Application Development blog for some great content about the mobile solution domain.


Adobe holds the multi-device experience as one of its top priorities for the digital marketing platform.  The web experience management piece, CQ5, is at the forefront of that priority.  Building a multi-device experience is difficult, but the tools provided by CQ5 make it a much more achievable goal.