Designing for flexibility in Adobe Experience Manager (AEM)

By: Nate Steiner / December 19th 2022 / Design
Designing for flexibility in Adobe Experience Manager (AEM)

As a designer, if you can work with what AEM provides out-of-the-box, you’ll be enabling flexibility for authors down the road. This means using dynamic templates which can be altered (potentially affecting many pages without having to modify them individually), leveraging core components (great for common and basic needs), establishing image profiles (so that an image cropping strategy can be applied and served through dynamic media), and selecting other built-in AEM features.

Through a combination of template strategy and class names, significant custom design implementation can be applied without custom component development. It’s not that custom component development should be avoided; rather, it’s best applied to problems not already solved by core components, templates, and policies.

From the perspective of a design and front-end team, here are some recommendations aimed at optimizing out-of-the-box AEM usage effectively. Note that many of these items benefit from being considered prior to a design being created.

As you can probably tell, some of these suggestions are not AEM-specific and would apply to any web development project. Many of these tips also may seem strange if you’re coming from a strictly JavaScript (JS)-framework-only coding environment. You can, of course, develop a headless solution in AEM to pipe data into a single-page application (SPA) interface. If you have the opportunity to establish a regular website that takes advantage of actual pages, then I hope you’ll find these tips to be of use in your design process.