In order to speed up development of a site within CQ5, it helps adopting the following process:
- Devise templates and components for the site based on mockups
- Implement a standard HTML for all templates and components
- Develop the components necessary
- Develop CSS/JS necessary to support the components
Using this approach, the front end team can develop the CSS/JS necessary for the site in parallel with the developers implementing the components and templates for CQ5. Instead of using a waterfall model where the front end team develops the basic HTML structure first and then provides the code to the CQ5 developers, this approach makes sure the CSS/JS works well within Adobe CQ.
To further minimize the risk of browser incompatibilities and to make sure the site will also look good on mobile devices from the start, it helps adopting a basic CSS/JS framework, commonly known as grid systems.
Some grid systems to consider are:
The grid systems have a well known html structure and features such as reflow that help on smaller screens. Developing your components with a grid system in mind will also make sure the developed components can be reused in the future with a different stylesheet and make your CQ5 projects faster to implement and easier to adopt to a new site style and new features provided by the grid system.
The Adobe CQ5.5 version uses 960gs for the default geometrixx site, however, choosing twitter bootstrap will provide you with more out of the box functionality commonly found on today’s website.
update: we released a bootstrap templating integration for Adobe CQ 5.5 today. See the following link for more information