Creating your AEM Cloud Service Website using Core Components

Adobe brings a set of reusable and production-ready components for its content management system, AEM.?

Their name: The Adobe Core Components.

Their purpose: Speeding up development time.

Let's delve into the styling process within Adobe Experience Manager (AEM), a methodology suitable for new projects utilizing AEM Cloud Service. However, a similar design approach can be applied when working with an on-premise version of AEM.

In fact, the core principles of the styling process remain consistent across all AEM versions, harnessing the power of Adobe Core Components, a library comprising best practice components.

The essence of the styling process can be distilled into three fundamental concepts:

1. Standardized Components:Central to this process are the Core Components, representing the gold standard in component design. They not only serve as a library of web elements but also shape the foundation of the user experience. These components foster collaboration among designers, website owners, and developers by providing a common framework.
2. Low Code Approach:A key facet of the styling process is the embrace of a low-code philosophy. Why reinvent the wheel when you have a robust foundation? Leveraging Core Components significantly reduces development efforts, shifting the focus to component styling. In essence, it involves adapting CSS and JS while leaving HTML largely untouched.
3. Reusability:Lastly, the design elements should be conceived with reusability in mind. Whether for other websites, landing pages, or intranets, the aim is to create components that can be employed across various digital touchpoints.

When organizations opt for AEM and aspire to deliver a consistent user experience across numerous websites and channels, meticulous consideration must be given to information architecture. A well-crafted component library emerges as a linchpin, enabling scalable website implementations.

What are the Core Components in AEM?

Adobe Experience Manager (AEM) provides a set of core components that serve as building blocks for creating and managing web content and digital experiences. These core components are pre-built, customizable elements that help streamline the development process and ensure consistency in design and functionality across AEM websites. Here are some of the key core components in AEM:

1. Text Component: Allows content authors to add and format text content with various styling options.
2. Image Component: Enables the insertion and display of images on web pages, with options for image resizing and alignment.
3. Title Component: Provides a title or heading for content sections, often used for page titles or section headings.
4. Button Component: Allows the creation of call-to-action buttons with customizable text and links.
5. List Component: Provides a way to create ordered or unordered lists of items, such as bullet points or numbered lists.
6. Accordion Component: Offers a collapsible and expandable content container, useful for organizing and presenting information in a compact manner.
7. Tabs Component: Allows content to be organized into tabbed sections, making it easy for users to switch between different pieces of content.
8. Carousel Component: Creates a rotating slideshow of images or content items for dynamic and engaging presentations.
9. Video Component: Embeds and displays video content from various sources, including YouTube and Vimeo.
10. Teaser Component: Highlights or promotes specific content, such as articles or products, often with an accompanying image and text.
11. Navigation Component: Generates navigation menus, including top-level menus, submenus, and breadcrumb trails, to help users navigate the site.
12. Search Component: Provides a search bar and search results display for users to find content within the website.
13. Form Components: Includes various form elements like text fields, checkboxes, radio buttons, and submit buttons for creating web forms.
14. Social Media Sharing Component: Allows users to share content on social media platforms, enhancing the site's social reach.
15. Content Fragment Component: Displays structured content fragments that can be reused across multiple pages and sites.
16. Language Navigation Component: Facilitates language selection and navigation for multilingual websites.
17. Download Component: Offers a way to provide downloadable files such as PDFs, documents, or media files.
18. Embed Component: Embeds external content like maps, social media feeds, or other external webpages within AEM pages.
19. Rich Text Editor Component: Provides a WYSIWYG editor for content authors to create and format rich text content.
20. Article Component: Presents news articles or blog posts with fields for title, date, author, and article content.

These core components are designed to simplify the content creation process, allowing content authors and developers to build web pages and digital experiences efficiently. AEM users can customize the appearance and functionality of these components to align with their specific design and branding requirements.

Adobe Core Components are open source, and you can find them on Github.

How to use the AEM Core Components

To understand the design process and the people, profiles, and roles involved in this process, it’s important to get a better understanding on how to use, extend, and customise Core Components.

Understanding the architecture of a Core Component

To make it simple, a core component can be split into two distinct parts: the backend part and the frontend part.

The backend contains:

• The content model. It defines the structure of the content that can be stored in a component: for example, a teaser might consist of a title, an image, a short description text and a link to the target.?
• The configuration of the components and the edit dialog. These elements let you define what to display, and what an editor can edit, and the options he can use.
• The logic behind the preparation of the content for frontend (also called view).

The frontend part will be in charge of generating the output in HTML:

• A markup language (HTL) is used to bring together content from the backend and HTML elements.
• CSS and JS are used for the styling and effects applied on the elements.

( if you want more specific information, jump to the official and technical documentation of Adobe.)

Customizing a Core Component

Indeed, Core Components can be tailored to your specific needs, allowing you to extend their functionality and avoid commencing custom development projects from scratch.

However, a piece of advice is in order. To retain all the advantages and ensure compatibility with future upgrades, it is imperative to adhere to certain best practices and customization guidelines:

1. Avoid Direct Code Modification:Instead of directly altering the code, opt for extending the existing logic:The Core Component architecture facilitates the extension of content models, dialogs, and component logic, enabling editors to incorporate additional content seamlessly.For instance, if you wish to introduce a "category" field to a particular teaser, simply extend the teaser with a text element labeled "category." Specify how the editor should interact with it in the dialog and how it should be presented in the HTML output.
2. Apply Custom CSS Styles:Style the components by implementing your own CSS styles:Core Components adhere to a standardized naming convention inspired by Bootstrap, simplifying the task for seasoned frontend developers when it comes to applying the website's branding.

By adhering to these best practices, you can harness the full potential of Core Components while ensuring maintainability and compatibility with future updates.

Roles in your team

The customization patterns shed light on the specific profiles or roles required within your website project team to ensure seamless operations.

Essentially, your team should comprise two key roles:

1. AEM Backend Developer:Responsible for configuring and extending the backend logic of the core components.
2. Frontend Developer:Proficient in CSS and JS, specializing in applying the desired look and feel to the HTML structure provided by the Core Components.

Managing design at scale with a flexible system

The front-end developers will play a key role in the implementation process. Once they master the Core Components and style system, the sky will be the limit.

Just by adapting the style of the component, multiple themes could be created for various websites, microsites, landing pages, and more.?

The beauty is: the Core Components stay the same.

You simply adapt their style and assemble them in a new manner for different websites. By setting up a versatile set of components for your digital presence together with various themes, you will be able to manage design and website at scale.

AEM Design Workflow with Core Components

Now that we have a clearer understanding of Core Components, let's delve into the design workflow. We'll address the following questions:

1. How to design a website with AEM using Core Components.
2. How to design a website with AEM without compromising.
3. How to design a website with AEM and expedite the launch.

We'll explore two scenarios: one where the website's UI/UX is still in the conceptual stage, and another where the design is already finalized. Additionally, we'll consider cases involving the migration of an existing website to AEM, with the intention of applying changes later.

Step 1 – Mapping the Mockup to Core Components

In our initial scenario, the website's design remains undefined, and we begin with a blank canvas. Here, two key recommendations come to the forefront:

• Plan the design with Core Components in mind.
• Assemble a team comprising designers and AEM consultants.

It's paramount to incorporate Core Components right from the outset. We strongly advise involving AEM experts from day one, as they will provide invaluable guidance throughout the process.

In other words, refrain from isolating the designer in a solitary creative endeavor and then handing over the completed design to AEM experts and developers for implementation. This approach often leads to user experiences that fail to harness the full potential of the solution, resulting in additional costs, complications, and frustrations.

A common misconception is that a framework constrains the design process. In reality, it serves as an enabler. Collaborating with an AEM expert opens up new vistas and unlocks the true capabilities of AEM.

Together, the designer and the AEM expert will delineate a mockup, including the primary page templates and components to be utilized. This collaborative effort ensures that you harness the full spectrum of what AEM has to offer.

An AEM expert will analyse the building blocks of your current website and map it to Core Components.

With this scenario, there might be some trade-offs:

• Changing the current blocks on your website to map with the Core Components layout and feature. Let’s imagine that you have a teaser with 4 CTA while the teaser Core Component offers only 2 CTA. Here you could decide to adapt your requirements to the Core Components.
• Or, if your requirements are not adaptable, the solution would be to create a custom component, extending the Core Component that fits your current UX and UI.

Anyway, for both scenarios, the goal is to have a mockup of the website where all elements are represented by Core Components.

Step 2 –? Configuration and style in AEM matching the mockup

While the designer will adapt the look and feel of the Core Components in Adobe XD, a AEM backend developer can start the configuration of the page templates and components in AEM.?

This can be done in parallel as both work on the same basis – the defined mockup.

As soon as the design is ready and validated, a frontend developer can start working and applying the right style, CSS and JS to the core components.

Everything is bundled into AEM and ready to be deployed.

Overview of the AEM styling workflow?

To recap, here are the main steps of the design workflow with AEM and Core Components:

1 – Define a mockup based on the Core Components

2 – Create the UI and theme in Adobe XD

3 – Configure the page templates and components, then style the Core Components in AEM?

And do not forget, a critical aspect is to have a mixed team made of designers and AEM experts from the very beginning.

Core Components: Ideal Companions for AEM Cloud Service

Although Adobe Core Components were originally designed for AEM 6.3 prior to the launch of AEM Cloud Service, their synergy with the cloud version of Adobe CMS yields optimal results.

A primary objective of AEM Cloud Service is to facilitate rapid innovation and empower you to concentrate on your core mission: crafting remarkable customer experiences.

With AEM Cloud Service, the burden of managing servers, IT operations, network, security, and related concerns becomes a thing of the past.

Incorporating Core Components into your workflow provides added advantages, expediting both the design and development phases.

Effortlessly piece together the foundational elements to visualize a prototype, and then fine-tune them with minimal backend development.

This approach represents the most effective strategy for tackling any AEM as a Cloud Service project. It not only accelerates your project's time-to-market but also ensures future upgradability.