The world’s worst developer, Joe Gunchy (read more about Joe here) is examining the website wireframes for his new Adobe AEM project to determine how many templates he needs to create. So far, he thinks he needs 17 – maybe more because of all the combinations of how the main content area is divided.
“I make more templates because Content Authors are clueless.” – Joe Gunchy
One page has a single column for the main content that spans the entire width of the screen. He calls this the “single column“ template. On another, the main content area is divided into two equal parts, partitioned at 50%-50%, respectively. He calls this the “two column“ template. Then there’s a “three-column“ page where each column is divided evenly at 33%-33%-33%. He found another two-column page is divided 66% on the left, 33% on the right. He calls this the “two column – 2” template. Wait, there’s one that’s divided 33% on the left, 66% on the right – “two column – 3”! Oops, what about that page where the 66% part of the page is sub-divided into another two columns at 50% each – “two column – 4”? Then there are those product pages, press releases, employee profile pages, whitepaper downloads… Those should probably be another template, right? Joe Gunchy thinks so. Joe Gunchy is an idiot.
“Two column – 76” – Joe Gunchy
When you’re examining website wireframes, do you make a new template to account for every combination of page layout you see like Joe Gunchy did? No way. I would make one template and a Column Control component. That’s all you need.
Despite what Joe Gunchy thinks, content authors are not dumb. With a simple Approval Workflow in place, a content author can and should be given the power to create flexible pages with any combination of page division, components, and content. Let the approving authority decide if it’s assembled to meet brand and style guidelines before publishing the page.
Enough is Enough
Check out the layout below. Notice the main content area of the page is divided into two columns at 66%-33%. Body copy spans the entire length of the left column. Then, the left side is split into two more columns where we put some promotional pods; then three columns below that. How do you accommodate all of these combinations? Let me show you how easy it is to create a page as ‘complex’ as the one below. This site does it the right way.
Introduction to the Column Control
Adobe AEM comes with an out-of-the-box component called “Column Control”. Using ideas from this component in conjunction with the Paragraph System (the drag-and-drop feature of Adobe AEM) gives content authors the ability to divide and assemble a page in countless combinations. Additionally, by adding and configuring a Paragraph System into each column, you can nest other Column Control components to further divide a content area into smaller columns to achieve, say, a 66% column on the left that is sub-divided into a 50%-50% split, etc. Configuring it is easy, and only a little work is necessary to style the columns to allow for the correct padding and margins as they are nested.
Here is the custom Column Control in action. Notice the nesting allowed by first dividing the page into 66%-33%, then we added another Column Control to the left column and selected 50%-50%. We then dragged in whatever content component we wanted into the Paragraph System to represent our content and our page is complete.
Here are the steps to create a custom Column Control component:
- Create a new component named, “Page Division – Column Control”
- Add a drop-down to your dialog with the various combinations of page divisions
- Add a DIV for each column represented by each selection in your component JSP
- Add a Paragraph System to each DIV in the component code to allow nesting.
<cq:include path=”right-par” resourceType=”foundation/components/parsys” />
</div>
- Add a style class for each entry in the drop-down in your CSS
- Configure each parsys in DESIGN MODE to allow dragging/dropping components into them
That’s it. With this one component, you can allow your content authors to create any page no matter how complex the layout may seem. Let the content approver determine if the page meets their guidelines before publishing the page to the world. Give your content author the power and ability to create any page by implementing this powerful component.
Adobe AEM The Right Way 
Really interesting articles about AEM, thank you and kind regards!
Thanks for sharing this article. However I have following queries to see how you fixed it:
1. If there is only one template, to create pages in that fashion would be more work for Authors, I believe. Say for example, author has to create a replica of such pages + other layouts as well, are you recommending them to copy and paste pages and then update contents pages wise?
2. For a free form page like home page it could work, but for something like specific content type, I believe we need to create a specific template since we need to control the domain object for the same unless you say we do it by creating a component which will have its own problems.
3. For just having a template, how are you managing page specific client library since 2 different layouts have to have 2 different client libs for look and feel to be great including responsiveness.
4. For every component, AEM spits Div in HTML which will mean in above scenarios more DIVs which Fronted developer would not like for obvious reasons, how did you handle that in this case?
Thank you for sharing!
Great post! I find myself using 1-2 templates for most every content implementation project, regards of how many templates were created (there was one exception, but we *actually* used every template for those pages).
I find that there isn’t a real need for many templates/components, unless you need something specific…but even then, you have to have a business case to create one. Otherwise, you’re drowning in a sea of components that you have to wade through to get to the one(s) that you actually use.