Creating a responsive design using CQ5 templates

Question

I'm investigating Adobe CQ5 and would like any advice on how to integrate its drag-and-drop UI to create a responsive website. It seems as if it works on a concept of fairly bland templates with components that can be dropped in pretty much anywhere, including things like "three-column control" - which would make designing a responsive grid structure very hard (as it would be hard to prevent users from dropping in a control that could ruin the layout).

Does anyone have any experience or advice on this? I'm really looking for deep technical details on the structure of templates vs components (paragraphs), and where/how to manage to the CSS.

Answer 1

CQ5 offers ways to control what can be done within a template, so thinking that components "can be dropped in pretty much anywhere" may be misleading. Page templates are designed and configured so that you control which components can be added to a certain area of a page. This allows you to only make those components available that will work with the template layout, excluding components that would wreck the layout. Then authors are only allowed to use things that will work. If they attempt to drag a component onto a paragraph (parsys) where that component has not been configured as available, the UI will not allow them to use it there. So CQ actually makes it easy to prevent users from dropping a control somewhere that would ruin the layout.

This is outlined a bit here:

• http://dev.day.com/docs/en/cq/current/howto/components_develop.html#Adding%20a%20new%20component%20to%20the%20paragraph%20system%20%28design%20%20%20%20%20mode%29 which states that

"The components can be activated (or deactivated) to determine which are offered to the author when editing a page."

When it comes to CSS and JavaScript, you can create a client library and then include the relevant client library on the page. Backend CQ functionality will take care of combining multiple CSS (or JavaScript) files into a single minified file to allow for a single HTTP request of an optimized file. This it outlined a bit here:

• http://dev.day.com/docs/en/cq/current/developing/widgets.html#Including%20the%20Client-Sided%20Code%20in%20a%20Page as well as
• http://dev.day.com/docs/en/cq/current/howto/taglib.html#%3Ccq:includeClientLib%3E

So you might develop several components that share a client library, then when any of the components is added to a paragraph the client library will be included on the page. You may also want a CSS library that applies to all the templates to give a common look and feel, yet allow components to add their own when they are used.

These guidelines for using templates and components outline how you provide control, yet flexibility:

• http://dev.day.com/docs/en/cq/5-5/developing/developing_guidelines_bestpractices.html#Guidelines%20for%20Using%20Templates%20and%20Components

Answer 2

I'll document our successful WIP experience with RWD and CQ5

Assumptions: A well documented style guide.

Our First Steps: Modified existing column control component css to utilize twitter bootstrap grid css. Create a base page property allowing two different classes on the grid container to be set and inherited by child pages. (container||container-fluid). Leverage out-of-the-box components where ever possible. All component widths inherit the width of their parent container allowing for components to be dropped into any location within a template.

Issues: The out-of-the-box column control component can not be nested. We are looking into building a custom column control component.

Takeaways: this is an evolutionary project and we are constantly iterating.

Answer 3

With the recent launch of AEM 6.0, they have an example website called as Geomatrixx Media. This website is responsive.

You can take this example as reference and start building on top of it.