Develop your Adobe AEM project in this order!

Did you know there is a certain order that most successful Adobe® AEM project are developed?  While this might sound elementary to some,  deviating from this order will certainly increase your development time and you will ultimately lose efficiencies gained by using this order.

From start to finish, your AEM project should be developed in this order:

  1. Static mark-up development
  2. Content page template creation
  3. Site structure creation
  4. Content-managed components (no dynamic content)
  5. Navigation components
  6. Scaffolding creation
  7. User configuration
  8. Services integration (dynamic content)
  9. Content entry
  10. Site search
  11. Workflow configuration and development

Why does this order matter?  Let’s take a look…

 

1. Static mark-up is complete

“Get the mark-up ready or don’t start coding at all.”

Never, ever, ever begin an AEM project without approved creative and a majority of the static mark-up that represents the page content completed. Templates, scaffolding, and components all depend on this structure (or snippets of the mark-up) for their creation.   At a minimum, the mark-up for general content pages containing the navigation, hero-space components, header/footer, right-rail should be ready.  From these, you can create a majority of the components.  I’m less concerned about that one-off Investor Relations page you have hidden in your footer. Get the mark-up ready representing a majority of your site, or don’t start coding at all. There is too much re-work to be done if the structure changes, which greatly outweighs the delay of  simply waiting.

 

2. Content page templates

Which template will get the most usage?  Forget those hidden pages in your footer links for now. Let’s get to the meat of the site where most of the content will be created and develop those templates first.  Once these are created, we can start assembling your basic site structure.  You will use the mark-up created in step 1 to develop these templates.

Do you have too many templates available to your content authors? Be sure to read my upcoming article on Limiting the Number of Templates and Components.

 

3. Site structure configuration

Once you have the basic content page created, you can begin assembling the structure of your site to include language branches and individual section landing pages, like “Products” or “Partners”. There won’t be anything on the pages at this point, but the bones of the site begin to take shape.  We will cover the right way to structure your site to support multiple regions and languages in a future lesson.

 

4. Content-managed components

Always work on the most basic, straight-content managed components before anything that requires services integration or other dynamic content.  These are the easiest components to complete and can be divided up between the development team without much dependency on each other.  Completing these first also allows you to start content entry and functional testing of the content page template and basic components.

 

5. Navigation components

Navigation components are anything that allows the user to, well, navigate around the site. Duh.  These include the main navigation, utility links in the header, footer links, breadcrumbs, language branch switching components, and any ‘calls-to-action’ like buttons, links, lists of links, etc.  Primary navigation and breadcrumb trails should be driven off of the site structure itself, so having this structure in place (as shown in step 3) is key.

 

6. Scaffolding creation

The Scaffolding feature in AEM is under-used and should be used when you create multiple pages of a certain type over and over again.  News and press releases, product detail pages, partner profiles, are great examples of pages that should use Scaffolding. A press release always has a headline, sub-head, author, date, body copy, and likely some boilerplate information about the company at the bottom of the press release.  Forcing a content author to manually assemble a page by dragging and dropping individual components like Title, Rich Text, Image then editing those individual components is way too time consuming.  Scaffolding essentially gives them a single form to fill in, and the values of the form are distributed to the individual components (created in step 4) through code when the page is saved. The effort to create a Scaffolding page and dialog is minimal but the time saved by using it repeatedly is immense.

 

7. User configuration

“Create a Group for each major section of the site.”

Now that you have the basic structure of the site created (including indivual landing pages for major sections of the site), you can configure the Users and Groups that will interact with those sections.   Start by creating a Group for each major section of the site (Products, Resources, Press Releases) and assign the appropriate permissions for the group to allow adding, editing, and deleting pages within that branch of the site.  Create Users and assign them to the Group. So, if “Joe” is a content author who is in charge of creating Press Releases, add him to the “Press Release” group and you’re done.  This way, you do not have to assign permissions to each individual.  These groups will come into play when we configure the approval workflow in step 11.

 

8. Services integration

You now have a decent representation of the site built, and now it’s time to breathe some life into it.   Services integration refers to any content such as stock ticker, Twitter feeds, login and registration services, CRM integration, e-Commerce, Google Maps, etc that gets added to a page that doesn’t involve a content author.   Due to the static nature of an AEM site, where the pages are pre-compiled into static mark-up, the dynamic content shown on the page should be retrieved and displayed using AJAX after page load.  This involves creating intermediate services layer that can retrieve content either from the JCR, or pass through to external service providers to retrieve the content.

 

9. Content entry

We have pages, we have components, we have Scaffolding, and we have services. Now we can enter some real content into the pages.  You’ll need this content for step 10.   This is also a good time to Tag the pages to associate similar content across parts of the site.

 

10. Site search

I recommend doing this near the end of development cycle for two reasons: 1) your services layer is now complete and ready to integrate with either your external search provider or internal search service and 2) we now have actual content to crawl and display in our search results.  Creating search functionality earlier in the project forces you mock up fake results which is really a waste of developer time.  Use real content.

 

11. Workflow configuration and development

I’m lazy, so I love the integrated workflow feature in AEM and use it extensively to automate processes to approve, publish, replicate, ingest content, etc.  Content authors create pages and submit them to the approval workflow for review. Once the content is reviewed and approved, the approving group can  publish the content to the live site automatically by clicking the APPROVE button.  I will explain in detail how to create an approval workflow model in a future article. But think about all the manual steps you do repeatedly during content creation and publishing and 9 times out of 10, these tasks can be automated using workflow.

 

 

Advertisements

One thought on “Develop your Adobe AEM project in this order!

  1. Looks good.

    However a quick question on using Scaffolding for content type. To me it takes away AEM beauty of in-context editing and so I will vote for a product detail template. Another thing will be that with scaffolding detail page will become 2 steps process than one. Would like to know your thoughts on this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s