Adobe propose un ensemble de composants Web réutilisables pour son système de gestion de contenu, Adobe Experience Manager (AEM).

Leur nom : les Adobe Core Components.

Leur objectif : réduire le temps de développement.

Mais comment tirer parti de ces Core Components pour réaliser un site Web rapidement ?

Quelle est la meilleure approche en termes de conception et comment les membres de l’équipe doivent-ils collaborer ?

Si votre entreprise utilise AEM ou AEM Cloud Service et que vous souhaitez accélérer le processus de conception tout en suivant les meilleures pratiques du système de style d’AEM, vous êtes au bon endroit.

Aujourd’hui, nous allons expliquer comment éviter une longue phase de conception et de trop nombreux allers-retours entre les différentes parties prenantes.

Nous présenterons le meilleur processus pour concevoir des expériences utilisateur et créer des sites Web à grande échelle :

• vous découvrirez ce que sont les Core Components…
  
• et comment votre équipe de conception et votre équipe de développement doivent collaborer !

Le processus de design avec AEM en un mot

Passons en revue le processus de style avec Adobe Experience Manager.

Le processus convient en particulier aux nouveaux projets avec AEM Cloud Service.

Cependant, vous pouvez adopter une approche de conception similaire tout en travaillant avec une version « on-premise » d’AEM.

En effet, la base du processus de style restera la même pour toutes les versions d’AEM et utilisera les Adobe Core Components, une bibliothèque de composants Web.

L’idée principale du processus de style peut être résumée en trois concepts :

• Utilisation de composants standardisés
  
• Low code, une approche de développement de logiciel qui nécessite peu voire aucun développement
  
• Réutilisation d’une libraire commune d’éléments Web tous vos sites
  

Les bases du design sont définies par les Core Components.

Plus qu’une simple bibliothèque d’éléments Web, ils orienteront la conception de l’expérience utilisateur dès le début et aideront les concepteurs, le propriétaire du site Web et les développeurs à travailler ensemble sur un cadre commun.

Le low code est un aspect clé du processus de style. Pourquoi toujours réinventer la roue ?

Les Core Components servent de base. En les exploitant, les efforts de développement sont considérablement réduits et la tâche principale consiste à styliser les composants. En d’autres termes, à adapter les CSS et JS. Le HTML ne sera pas adapté.

Enfin, les éléments de conception doivent pouvoir être réutilisés sur d’autres sites Web, landing pages ou intranets.

Lorsque les entreprises décident d’investir dans AEM et de créer une expérience utilisateur cohérente sur de nombreux sites Web et canaux, elles doivent envisager une architecture de l’information appropriée.

Une bibliothèque de composants bien conçue les aide à mettre en œuvre des sites Web à grande échelle.

Nous allons maintenant détailler ces concepts, expliquer ce que sont les Core Components et ce que cela signifie de développer l’expérience utilisateur avec les Core Components pour accélérer la conception de votre projet.

Que sont les Core Components AEM ?

Les Core Components sont un ensemble de composants de gestion de contenu Web (WCM) standardisés pour Adobe Experience Manager (AEM).

Ils ont été introduits avec AEM 6.3 et leur objectif est d’accélérer le temps de développement tout en réduisant les coûts de maintenance et en garantissant une meilleure évolutivité.

L’utilisation des Core Components est la meilleure approche recommandée pour démarrer un nouveau projet avec AEM as a Cloud Service. Les Core Components sont prêts pour le cloud. Leur utilisation vous aidera à développer votre nouveau site Web plus rapidement.

Si vous êtes habitué à développer des sites Web, vous avez peut-être remarqué que certains éléments ou modèles d’interface utilisateur sont assez courants. Par exemple, nous créons souvent du texte, des éléments d’image ou des teasers mettant en évidence le contenu des pages connexes.

C’est ce que la bibliothèque de Core Components peut vous offrir. Une liste de trente composants polyvalents comprenant :

• Titre
  
• Texte
  
• Image
  
• Liste
  
• Teaser
  
• Téléchargement
  
• Bouton
  
• Et bien plus…

Ces composants sont conçus pour être flexibles et peuvent être assemblés pour produire presque tous les types de mise en page. 

D’après notre expertise, 80 % à 90 % des composants habituels d’un site Web peuvent être mis en œuvre avec les Core Components et une touche de stylisation.

Prenons un exemple. Comme vous pouvez le voir ci-dessous, il existe quatre variantes de composants teaser couvrant la plupart des cas d’utilisation.

S’il manque quelque chose, vous pouvez toujours personnaliser un Core Component, enrichir un Core Component avec des fonctionnalités supplémentaires ou, dans le cas de scénarios complexes, créer un composant à partir de zéro (ancienne méthode).

Les Core Components Adobe sont open source et vous pouvez les trouver sur Github.

En résumé, les Core Components offrent une approche standard et présentent de nombreux avantages :

• Design-agnostic : les données, la logique et la conception sont entièrement distinctes
  
• Stylisation : ils peuvent être stylisés de différentes manières
  
• Flexibilité : ils offrent une large gamme de configuration
  
• Évolutivité : ils garantissent la compatibilité avec les futures versions d’AEM

Comment utiliser les Core Components AEM

Pour comprendre le processus de conception et les personnes, profils et rôles impliqués dans ce processus, il est important de mieux comprendre comment utiliser, enrichir et personnaliser les Core Components.

Nous n’allons pas trop nous étendre sur les détails techniques, mais il est important de comprendre la structure d’un Core Component AEM.

Comprendre l’architecture d’un Core Component

Pour faire simple, un Core Component peut être divisé en deux parties distinctes : la partie back-end et la partie front-end.  

Le back-end contient :

• Le modèle de contenu. Il définit la structure du contenu qui peut être stocké dans un composant. Par exemple, un teaser peut comprendre un titre, une image, une courte description et un lien vers la cible.
  
• La configuration des composants et la boîte de dialogue d’édition. Ces éléments vous permettent de définir ce que vous souhaitez afficher, ce qu’un éditeur peut modifier et les options qu’il peut utiliser.
  
• La logique de préparation du contenu pour le front-end (également appelé « vue »).
  

La partie front-end sera chargée de générer le résultat en HTML :

• Un langage de balisage (HTL) est utilisé pour rassembler le contenu du back-end et les éléments HTML.
  
• CSS et JS sont utilisés pour le style et les effets appliqués sur les éléments.
  

(Nous utilisons volontairement des termes simples. Si vous souhaitez obtenir des informations plus spécifiques, consultez la documentation technique officielle d’Adobe.)

Customiser un Core Component

Un Core Component peut en effet être customisé. Vous pouvez l’enrichir pour répondre à vos besoins et éviter de vous lancer dans un développement personnalisé à partir de rien.

Cependant, nous avons un conseil à vous donner. Pour conserver tous les avantages et garantir la compatibilité de la mise à niveau, il est nécessaire de suivre les meilleures pratiques et les modèles de personnalisation suivants :

1 ) Ne modifiez jamais le code directement. Élargissez plutôt la logique existante :

L’architecture d’un Core Component vous permet d’étendre le modèle de contenu, la boîte de dialogue et la logique d’un composant et permet à l’éditeur d’utiliser du contenu supplémentaire.

Par exemple, vous pouvez ajouter un champ « catégorie » à un teaser donné. Il vous suffit d’étendre le teaser avec un élément de texte « catégorie », et de définir comment l’éditeur l’utilisera dans la boîte de dialogue, et comment il sera représenté dans le HTML.

2) Stylisez les composants en appliquant vos propres styles CSS :

Les Core Components respectent une convention de dénomination standard inspirée par Bootstrap pour permettre à un développeur front-end expérimenté d’appliquer facilement le style du site Web.

Vous pouvez en savoir plus sur les modèles de customisation ici.

Rôles au sein de votre équipe

Les modèles de customisation nous indiquent le type de profils ou de rôles dont vous avez besoin au sein de votre équipe de projet de site Web pour garantir un fonctionnement optimal.

Vous aurez principalement besoin de deux types de rôles :

• Un développeur back-end AEM chargé de la configuration et de l’extension de la logique back-end des Core Components.
  
• Un développeur front-end maîtrisant CSS et JS qui pourrait appliquer n’importe quelle apparence à la structure HTML offerte par les Core Components.

Nous sommes convaincus que la customisation peut être réduite au minimum et même évitée si vous commencez à concevoir votre site Web à l’aide des Core Components. Nous y reviendrons plus tard.

Gérer la conception à grande échelle avec un système flexible

Les développeurs front-end joueront un rôle essentiel dans le processus de mise en œuvre. Une fois qu’ils maîtriseront les Core Components et le système de style, ils n’auront plus de limites.

En adaptant simplement le style du composant, plusieurs thèmes pourront être créés pour divers sites Web, microsites, landing pages, et plus encore.

Et le meilleur dans tout ça : les Core Components ne changent pas.

Vous adaptez simplement leur style et les assemblez différemment pour différents sites Web.

En configurant un ensemble polyvalent de composants pour votre présence digitale, ainsi que divers thèmes, vous serez en mesure de gérer la conception et le site Web à grande échelle.

Mais comment y parvenir ? C’est ce que nous allons aborder maintenant en vous expliquant comment concevoir avec les Core Components.

Processus de conception AEM avec les Core Components

Maintenant que le concept de Core Components est plus clair, nous pouvons détailler le processus de conception.

Nous répondrons aux questions suivantes :

• Comment concevoir un site Web avec AEM à l’aide des Core Components ?
  
• Comment concevoir un site Web avec AEM sans compromis ?
  
• Comment concevoir un site Web avec AEM et le mettre en ligne rapidement ?
  

Nous allons aborder deux scénarios. Un scénario dans lequel l’interface utilisateur/l’expérience utilisateur du site Web ne sont pas encore créées, et un second scénario dans lequel la conception du site Web est déjà réalisée.

Le second scénario correspond à la migration d’un site Web existant vers AEM et, par conséquent, vous souhaitez migrer votre site Web existant et son style vers AEM.

Étape 1 : mappage de la maquette avec les Core Components

Dans notre premier scénario, la conception du site n’est pas encore définie. Nous commençons par une page vierge.

Les deux principales recommandations sont les suivantes :

• Planifier la conception en fonction des Core Components
  
• Mettre en place une équipe composée de designers et de consultants AEM
  

Il est essentiel de tenir compte des Core Components dès le début. Nous vous recommandons de faire appel à des experts AEM dès le premier jour, car ils vous guideront tout au long de ce processus.

En d’autres termes, ne laissez pas le designer travailler seul sur la conception en faisant intervenir les experts et développeurs AEM uniquement pour la mise en œuvre ultérieurement.

Cela donne souvent lieu à des expériences utilisateur qui n’exploitent pas la solution au maximum et avec des coûts supplémentaires.

Un malentendu courant est qu’un cadre restreint le processus de conception. 

Mais en réalité, c’est tout le contraire. En échangeant avec un expert AEM, de nouvelles perspectives s’ouvriront et cela permettra d’exploiter le plein potentiel d’AEM.

Ensemble, le concepteur et l’expert AEM définiront une maquette comprenant les modèles de page principale et les composants à utiliser. Ainsi, vous bénéficiez du meilleur d’AEM.

Pour le scénario dans lequel la conception de votre site Web est déjà réalisée, par exemple si vous migrez vers AEM as a Cloud Service, vous devez commencer par le mappage des composants.

Un expert AEM analysera les éléments constitutifs de votre site Web actuel et les mappera avec les Core Components.

Ce scénario implique certains compromis :

• Modifier les éléments actuels de votre site Web pour les mapper avec la disposition et la fonction des Core Components. Imaginons que vous disposiez d’un teaser avec 4 CTA, alors que le teaser Core Component n’en propose que deux. Ici, vous pouvez décider d’adapter vos exigences aux Core Components.
  
• Ou, si vos exigences ne sont pas adaptables, la solution serait de créer un composant personnalisé, en enrichissant le Core Component qui correspond à votre expérience utilisateur et à votre interface utilisateur actuelles.
  

Quoi qu’il en soit, dans les deux cas, l’objectif consiste à avoir une maquette du site Web où tous les éléments sont représentés par des Core Components.

Étape 2 : conception dans Adobe XD

Adobe XD est un outil de conception.

Avec Adobe XD, les designers peuvent désormais concevoir à partir des Core Components AEM et examiner comment différents styles peuvent être mis en œuvre via le système de style AEM. Adobe a créé un kit d’interface utilisateur pour les composants AEM.

En utilisant le kit d’interface utilisateur prédéfini basé sur les Core Components AEM, les écarts de conception inutiles sont évités, à savoir le type d’écart qui nécessite plus d’efforts de développement et implique des coûts supplémentaires.

Les étapes pour les concepteurs sont les suivantes :

1. Ils assembleront les Core Components en fonction de la maquette, qui créera la mise en page des différentes pages.
   
2. Ils commenceront ensuite à styliser chaque composant en fonction de l’identité visuelle du site Web et des directives en matière d’image de marque.
   

En suivant cette approche, le développeur back-end configurera tout plus facilement dans AEM. La structure de mise en page représente un modèle de page dans le CMS.

Il est essentiel que la conception du site Web reste synchronisée avec les Core Components.

Un processus similaire peut être effectué dans le cas du scénario 2.

Étape 3 : configuration et style correspondant à la maquette dans AEM

Pendant que le concepteur adapte l’aspect visuel des Core Components depuis Adobe XD, un développeur back-end AEM peut démarrer la configuration des modèles de page et des composants dans AEM.

Ceci peut être réalisé en parallèle car les deux fonctionnent sur la même base : la maquette définie.

Dès que la conception est prête et validée, un développeur front-end peut commencer à travailler et à appliquer le bon style et les bons CSS et JS aux Core Components.

Tout est intégré à AEM et prêt à être déployé.

Présentation du processus de style AEM

Pour résumer, voici les principales étapes du processus de conception avec AEM et les Core Components :

1 – Définir une maquette basée sur les Core Components

2 – Créer l’interface utilisateur et le thème dans Adobe XD

3 – Configurer les modèles de page et le composant, puis styliser les Core Components AEM

N’oubliez pas, la mise en place dès le départ d’une équipe mixte composée de concepteurs et d’experts AEM est un aspect essentiel.

Core Components : le meilleur partenaire d’AEM Cloud Service

Même si les Core Components Adobe ont été créés avec AEM 6.3 avant la sortie d’AEM Cloud Service, ils fonctionnent parfaitement lorsqu’ils sont utilisés avec la version cloud du CMS d’Adobe.

L’un des principaux objectifs d’AEM Cloud Service est de permettre une innovation rapide et de vous aider à vous concentrer sur ce qui compte le plus : créer des expériences clients exceptionnelles.

Avec AEM Cloud Service, vous n’avez plus besoin de vous soucier des serveurs, des opérations informatiques, du réseau, de la sécurité, etc.

L’utilisation des Core Components vous offre des avantages supplémentaires en accélérant la phase de conception et de développement. Assemblez rapidement les Core Components pour réaliser une maquette, puis stylisez-les avec un développement back-end limité.

C’est le meilleur moyen d’aborder n’importe quel projet AEM as a Cloud Service, et cela et vous permettra de passer rapidement à la mise en ligne, tout en garantissant la possibilité de mise à niveau.

Enfin, créez des sites Web d’entreprise plus rapidement avec AEM Cloud Service et les Core Components

La conception pour AEM avec des Core Components est semblable à ce que vous faites déjà pour d’autres projets. Vous vous appuyez sur un cadre qui permet un développement plus rapide.

Le plus important, c’est de concevoir avec les Core Components et de faire appel à un expert AEM dès la toute première étape du processus de conception.

L’expert vous guidera tout au long du processus et vous indiquera la meilleure façon d’utiliser les composants afin d’éviter des limitations potentielles.

Cet article fait partie d’une série de contenus sur AEM Cloud Service, dans lesquels nous expliquons comment passer à AEM Cloud.

Samuel Schmitt

Digital Solution Expert