Happy Employees == Happy ClientsCAREERS AT DEPT®
DEPT® Engineering BlogAdobe

Adobe Experience Manager authoring capabilities in 2024

In this article, we’ll take a look at everything AEM has to offer to an enthusiastic content author with a penchant for productivity.

Sitting in the “leaders” spot of CMS analysts’ reports for the last 15+ years, AEM has long been known as the content author’s paradise.

Although the way content editing works in 2024 is very different from what it was a decade ago, Adobe is a major player in this evolution. With the rise of SPAs and frontend frameworks, an abundance of new channels consuming content as structured data, and everything going cloud, we’re happy to see AEM continue to set standards and stay ahead of the pack. In this article, we’ll take a look at everything AEM has to offer to an enthusiastic content author with a penchant for productivity.

AEM’s classic webpage editor

Funny how time flies — the new state-of-the-art website management "Touch" UI launched with AEM 6.0 in 2014 is what we now (unofficially) call “classic”, while the legacy UI called “Classic” proper is but a fading memory… Anyway, that’s what this editor is — a classic standard for visual component-based webpage assembly with everything edited in context, much copied across the industry.

AEM standard page editor

Authors create pages based on templates. Templates are user-editable and very flexible — they can carry collections of allowed components, apply policies to configure the same components differently for each template, and drive structure with mandatory and optional components and initial content.

Once in the page editor, authors drop components from a sidebar or click to add them where they need them. Later they can just drag the components around the page into a new position. Selecting a component in the page brings up relevant commands and the dialog for component configurations, behaviours and styling. The page’s own metadata like titles, SEO properties, or data and commerce integrations is also quickly accessed from the page editor.

Importantly, this editor is where we also work with Experience Fragments (XFs). This allows authors to extract random parts of webpages with one or more components and extract them into reusable preformatted blocks. This is a great way to author and single-source offers, banners, and such — edited in separation and without a URL of their own, XFs can be placed in many pages and updated across multiple locations with a single edit. XFs are also easily pushed from AEM to Adobe Target to power testing and personalization activities — that way, an AEM author can create XF-based offers, and Target users can apply them as needed.

From the editor, authors have immediate access to AEM Assets, the central DAM holding all of the images, videos and documents. They can navigate DAM locations and filter assets by titles or metadata like tags or media type, then drag directly into the page or into component dialogs. No need to link multiple crops of the same image for responsive websites like with many other CMS — AEM Assets can take care of these automatically, so only one master asset needs to be managed and placed in pages.

This is the proven experience in managing web-channel content specifically. And when some content is common across several channels, that data is managed in a headless fashion but placed in webpage components just as easily as content fragments. With many companies recently learning the hidden costs of going fully headless the hard way, the WYSIWYG webpage editor is as popular as ever, upholding the golden mean of modern content management — manage web-only content in visual web components; keep omnichannel data headless and channel-agnostic.

You might have also heard of the SPA editor. While, indeed, it allows editing single-page applications in AEM, it is not a different editor. You can treat it more like a tech enabler — once configured, it simply allows editing SPAs in the same familiar page editor. Given the complexities and limitations of setting up the SPA editor in AEM, it’s giving way to the new Universal Editor, which we’ll look at later.

Visual site tree management

Alongside the page editors, AEM offers visual management of website structure in intuitive trees (among other useful views). Any node in that tree functions as a folder and a page at the same time, so just go ahead and create pages under pages without worrying about 404s for folders without any content to display. Pages can be copied and moved in the tree, which directly translates into the URL structure of the published website. This being visual and intuitive is a welcome change from simpler CMS that requires tedious — and pun intended, sluggish — slug and route management for URLs. This is exactly the case with most headless CMS that have no love lost with the web channel, treating it as no more special than any others and not even offering website sitemaps or site searches.

Site tree navigation in AEM Sites

This intuitive tree management makes AEM particularly strong at multisite and multi-language management. With AEM’s translation framework facilitating the process, authors maintain copies of translated content as "language masters" that are manually updated after changes accumulate in the base website language. These “language copies” are then dynamically cloned (as “live copies”) for reuse to one or more country sites that need content in that language. For example, France, Switzerland, and Canada sites would clone the content from the French language master branch, and Austria, Germany, and Switzerland would mirror the German language master. Alongside these managed pages, authors can add ad hoc ones at any time on any country site, creating effective combinations of global vs. local content.

In this browsing UI, once one or more pages or sections are selected, all relevant management, publication, and approval commands are immediately available in context.

Content Fragment editor

So what about headless content?

AEM natively supports every scenario on a spectrum between traditional ("coupled" or "headful") website operation and fully headless content with API delivery. Every instance of any headless content type in AEM is a directly editable object in the DAM, called a content fragment (CF). Admins can visually model the structure for content fragments (an exercise similar to crafting content models in other CMS), and authors get a slick, focused editor.

AEM's updated Content Fragment editor

The editor provides access to CF fields and variations (alternate sets of fields), surfacing the relevant controls for each field type and practical metadata. This editor can also be customized to expose custom commands or additional fields.

Content fragments are, in essence, JSON data, which immediately allows serving them via AEM’s APIs and GraphQL interface, as well as linking them to the familiar web authoring components. However, their headless nature makes them impossible to preview — the editor can’t know which fields will every possible channel picks and how they will be visualized. And that’s where the Universal Editor comes to the rescue.

Universal Editor

As one of the latest additions to the author’s toolset in AEM, the Universal Editor (UE) delivers on a seemingly simple promise: no matter how your website is engineered, it can be edited in the UE, and your changes will seamlessly flow back to whatever content sources there are behind it. In time, that can even be a mix of Adobe and non-Adobe sources, but for the time being, any websites managed in AEM are supported — traditional (HTL-based), headless, hybrid, SPAs and the latest ultra-performant addition, sites on Adobe Edge Delivery Services.

AEM's Universal Editor

It takes minimum developer effort to add UE compatibility to any website front end. Then the magic kicks in: authors visit the webpage’s URL in the editor, click around and see the page come alive with editable components and their configurations. Moreover, any changes they make sync right back to the content source. If that source is a content fragment — it will be modified without the author needing to find that fragment and change it through the non-visual CF editor. And if the source is a traditional page or an EDS website, the changes will persist in AEM's content repository just as well.

Most practical editing features, like the rearrangement of components on the page and adding new ones, are already supported, but as of 2024, the UE is still new and not yet at feature parity with the classic page editor. Yet it’s easy to envision the future where it fully takes over, replacing the Touch UI page editor first for the use cases covered with the SPA editor and gradually for all the other ones. E.g., with Edge Delivery Services, Adobe is betting on the UE rather than the classic editor to provide visual authoring for content natively stored in AEM (as opposed to content served via cloud documents — more on that below).

AEM and Edge Delivery Services

First things first: EDS is not a feature of AEM, it is actually a globally distributed content delivery infrastructure used by AEM as well as other Adobe solutions like Experience Platform and Adobe I/O. However, AEM benefits immensely from the ability to deliver lightweight websites at top speeds with Lighthouse 100 web vitals thanks to this global delivery layer and content loading optimisations.

As far as authors are concerned, this very new addition to AEM also brings a radically new concept of document-based authoring. The underlying idea is simple: every webpage starts as a document somewhere. It undergoes some editing, proofreading, and approvals — but then it has to be copied and pasted into CMS components or content fragments piece by piece. If only we could skip the copypasting and just continue using that document as a page source directly as is! Well, with EDS, you do exactly that: put your docs and sheets in Microsoft Office 365 or Google Workspace in a folder structure that mimics the website, and their content magically turns into your EDS website’s pages. Talk about shortening the learning curve! Was there any resume in the last 20 years where the candidate did not claim to be an expert in Office apps? With EDS in AEM, that’s all you need to author professional websites (although it’s not the only way to for author EDS).

With very few simple formatting conventions, documents feed the pages and their metadata, and sheets power the forms, tables and configurations. Adding a component is just a matter of adding a table with data.

It’s important to remember that cloud documents are not the only way to publish to EDS. AEM can deliver content that it stores and manages natively to EDS as well — authors edit it using the Universal Editor. Being native to AEM, such websites support most AEM features including multi-site management.

It is also possible to use EDS to render super-performant Adobe Commerce web fronts and easily extend the standard PDP pages with custom offers.

EDS is a great solution for smaller projects and campaigns, but it’s not too difficult to start migrating entire website sections. With AEM as a Cloud Service, Adobe provides CDN-level controls to serve parts of the same website with EDS and others from AEM Publishers. The authors would simply edit different parts of the website in different editors offered by AEM.

DITA editor for AEM Guides

Say what? Let’s unpack that a little:)

Editing technical documentation and manuals, product information sheets, legal documents and annual reports, corporate filings and other thorough, well-organised or regulated information is a world in itself. A world where a lot depends on consistent application of terminology and convenient reuse of copy fragments, assembly from modular copy blocks, versioning, and easy repurposing of text for publishing in various formats.

DITA is an XML-based file format purpose-built for exactly those purposes. Modular “topics” are authored with clear structure (think focused content blocks) and can reference other topics. They are then assembled into maps that represent articles or collections of articles. With AEM Guides, DITA data is natively supported with another dedicated editor (as well as with a FrameMaker integration for those who prefer it for DITA work).

DITA editor in AEM Guides

With AEM Guides, the base experience can be likened to working with content fragments. Authors pick templates that define topic structure similar to how the CF models define CF structure. Unlike CFs, a DITA topic template is not as restrictive — authors can repeat and rearrange elements. The elements represent different sections like body text, headings, info blocks, process steps, tables, etc. DAM media is immediately available for placement as it sits in the same repository — AEM Guides is built on top of AEM Assets.

AEM Guides authors also get DITA-specific tools to assemble topics into maps and then further link some maps into larger maps, depending on how they organize their body of work. They have explicit control over document versions and metadata to automate the data-driven assembly of documentation for different products or customers. Right from the editor, they can take part in reviews and then publish the final maps as website content, PDF, or other document formats — or serve the content headlessly. The look and feel are defined in templates for each individual output type, so DITA editors don’t need to worry about anything but the logical structure of their content.

The modular nature of DITA content makes it very practical for translation. Rather than send entire large documents for (re)translation, with modular content, it’s easy to only translate new or changed topics, saving time and budgets. And the whole process is managed with AEM’s native translation framework, so the incoming translations are directly integrated into the right context, avoiding error-prone copypasting.

DEPT® is one of very few Adobe solution partners in the world implementing AEM Guides for our clients worldwide. If modular document management sounds like something your business needs, we can explain everything you need to know about the solution and implement it on your existing or new AEM setup.

DEPT® as your Adobe partner

We skipped over a couple of things, like the visual editor for Adaptive Forms in AEM Forms or most things DAM, but we are always there to cover anything and everything AEM or Adobe Experience Cloud if you need help or consultation. Do reach out, and we’ll help you get the most out of your Adobe investment with the help of our 500+ experts worldwide.

As an Adobe Experience Cloud solution partner, we take in the requirements of your business and implement AEM to make sure it is set up to bring the most value for your investment. A big part of that is not tech — it’s the process for efficient management of your content operations and content supply chain. We help you set up and optimize the content practice and enable authors to be productive and self-sufficient in their content entry and management activities.

Together, we assess the most suitable setup to help your editors do their job with the least friction and implement your AEM websites and headless content pipelines using an optimum combination of the options explained in the article. And suppose ever the capacity of your in-house content teams maxes out. In that case, we step in to offer quick and competent authors who take care of your BAU tasks while at the same time contributing improvements for the optimization of the process and toolset. Get in touch!