Release notes Atomic Suite v1.2.0

Des nouvelles molécules, améliorations des performances, intégration de reCaptcha et plusieurs d’autres fonctionnalités disponibles dans la nouvelle version d’Atomic !

Améliorations et changements clé :

[+] "Video" molecule #content management

Désormais vous avez la possibilité d’ajouter une vidéo Youtube ou Vimeo directement sur votre site via une molécule dédiée - “Vidéo”. Cette molécule permet d’ajouter une URL youtube ou vimeo, ainsi que d'activer la lecture automatique, changer la largeur ou ajouter une image “placeholder”. Elle est également optimisée au niveau des performances.

Pourquoi c’est important ?

La vidéo est un des types de contenu qu’on ajoute de plus en plus souvent sur les sites. Cette molécule est indispensable pour gérer les pages en toute autonomie.

[+] "Tabs" molecule #content management

Besoin d’ajouter plusieurs détails supplémentaires sur les fiches produit ou d'expliquer les détails du fonctionnement des cartes cadeaux? Désormais vous pouvez ajouter des onglets sur votre boutique. Avec la molécule “Onglets” vous pouvez dispatcher l’information dans plusieurs onglets afin de rendre la navigation sur votre site plus fluide.

La configuration de cette molécule est très simple. Il suffit de choisir un bon emplacement et de créer la molécule principale. Ensuite, vous pouvez ajouter toutes les informations nécessaires : vous pouvez ajouter une description simple ou vous pouvez ajouter des molécules (ex: image, liste de produits) à l’intérieur de chaque onglet.

Pourquoi c’est important ?

Les onglets divisent le contenu en sections significatives qui occupent moins d'espace de l'écran. À cet égard, les utilisateurs peuvent facilement accéder au contenu qu'ils sont intéressés à (plutôt que d'avoir tout le contenu dans les paragraphes).

Les onglets sont visuellement agréables. Mis en œuvre correctement, les onglets peuvent améliorer l'aspect visuel d'un site web.

[+] "Accordeon" molecule #content management

Désormais vous pouvez utiliser la molécule “Accordéon” pour ajouter rapidement de nouveaux contenus sur votre site. Cette molécule est idéale pour créer la FAQ. Pareil que les onglets, vous pouvez ajouter une description simple ou des molécules à l’intérieur de chaque élément d’accordéon.

Pourquoi c’est important ?

La molécule accordéon vous permet de ne pas faire des développements en plus et avoir la main sur tout le contenu de votre site.

[+] Lighthouse improvements #performances

Plusieurs améliorations ont été effectuées au niveau des performances.

Les erreurs suivantes ont été corrigées :

Mobile : Éliminez les ressources qui bloquent le rendu

Une des raisons de cette erreur est liés aux icônes qui mettent du temps à charger. Pour améliorer ce point nous avons intégré les material icônes comme package dans Atomic.

Mobile : Dimensionnez correctement les images

Les images sur la Home page de la démo ont été redimensionnées correctement. A partir de la v1.3.0 on aura un outil qui permettra de changer les dimensions des images automatiquement via le BackOffice.

Mobile : Les éléments d'image ne possèdent pas de width ni de height explicites

Désormais la hauteur et la largeur d’une image sont spécifiées ce qui évite des décalages de la mise en page lors du chargement.

Accéssibilité : Les couleurs d'arrière-plan et de premier plan ne sont pas suffisamment contrastées

Il est très important de respecter les bons ratios de contraste dès le début de la création du site (phase UI).

Afin de rendre le contenu accessible à tous les utilisateurs, il importe de prendre en considération les règles d’accessibilité liées au contraste :

texte de 18 pt, ou 14 pt en gras -> rapport de contraste de 3:1.
tout autre texte -> rapport de contraste de 4,5:1.

Plus d’information : https://web.dev/color-contrast/?utm_source=lighthouse&utm_medium=devtools

Outils de vérification : https://app.contrast-finder.org/

Accessibilité : Les éléments d'en-tête ne sont pas classés séquentiellement par ordre décroissant

Il est important de travailler ce point dès la création du site pour éviter d’avoir la structure incorrecte des éléments d'en-tête. Une correction a été effectuée au niveau du template d’Atomic, ce qui permettra d'éviter des erreurs dans le future dans les templates des sites créés avec Atomic.

Bonnes pratiques : La page utilise des bibliothèques JavaScript frontales présentant des failles de sécurité connues 3 failles détectées

La version 3.6 de jQuery a été ajoutée dans Atomic (v3.4-> v3.6). Il reste encore un problème au niveau de la version de jQuery-UI utilisée par PrestaShop qui n’est pas à jour.

Bonnes pratiques : Les erreurs de navigateur ont été enregistrées dans la console

Une erreur du chargement du logo a été corrigée sur la démo d’Atomic.

Mobile : Supprimez les ressources JavaScript inutilisées -0,6s

Malheureusement, il est impossible de corriger ce problème à 100% car le fichier principal javascript est requis pour le bon fonctionnement du site. Cependant, nous avons activé la fonctionnalité de la minification html par défaut à l'installation d’Atomic. L’activation de cette option est nécessaire pour améliorer les performances.

Autres améliorations : display des images & icons

“Preconnect“ est désormais utilisé pour les polices avec des icônes (utilisé par défaut pour material icons).

Pourquoi c’est important ?

La performance web est le facteur clé pour l’expérience utilisateur ainsi que pour le référencement naturel du site. Dans les cadres de cette version plusieurs améliorations ont été apportées à la page d’accueil du thème Atomic.

Voici les résultats du rapport Lighthouse sur la page d'accueil de la démo Atomic:

Version Mobile

v1.1.2 vs v1.2.0

Version Desktop

v1.1.2 vs v1.2.0

[+] reCaptcha for forms #security #optimization & productivity

Nous avons intégré les configurations de reCaptcha v3 afin de sécuriser tous les formulaires sur le site sans obliger les utilisateurs à faire trop d’actions. Plus aucun test ne sera soumis aux internautes pendant leur parcours sur votre site web. Pour configurer la reCaptcha sur votre site, il suffit d’ajouter les clés et de sélectionner les pages concernées.

reCaptcha sera activée uniquement lorsque l’utilisateur clique sur un champ d’un formulaire. Cela évite d’afficher le badge tout le temps.

Pourquoi c’est important ?

L’utilisation de captcha est indispensable pour la sécurité des formulaires sur votre site. L’activation de captcha au clique permet d’éviter son affichage permanent sur le site et l’afficher seulement au bon moment. La version 3 de reCaptcha est beaucoup plus moderne : en cas d’échec de l’internaute, reCAPTCHA v1 ou v2 pouvait être un frein important à la conversion. reCaptcha v3 permet d’éviter des tests chronophages et de simplifier le remplissage des formulaires par les internautes.

[+] LazyLoad images configuration #performances

Lazy Load est activé pour toutes les images ajoutées dans Atomic lors de création de nouvelles molécules. Cela permet de charger plus rapidement les pages web, même sur les appareils mobiles.

Pourquoi c’est important ?

Lazy Load bloque les téléchargements d'images en dehors de la vue d’utilisateur. Cela signifie que les images ne sont téléchargées que lorsqu'elles deviendraient visibles pour l'utilisateur. Par conséquent, les pages se chargent très rapidement avec Lazy Load. Cette configuration reste option car il ne faut pas activer le lazy loading si l’image est affichée en haut de la page et visible directement après l’ouverture (ex: image principale sur la page d’accueil).

[+] Molecule cache duration config #cache

Pourquoi c’est important ?

Parfois, il peut être nécessaire de modifier les paramètres de cache standard en fonction des particularités du site.

[+] Add & update hooks on the Cart page #Content management #Missing features

Certains hooks standards n’existaient pas dans le thème Atomic (ex : displayWrapperTop). Tous les hooks standards ont été ajoutés sur la page Panier.

Pourquoi c’est important ?

Dans les prochaines versions d’Atomic il y aura des pages dédiées au Panier et Checkout. Il sera possible de visualiser plus simplement les emplacements disponbibles pour l’ajout des molécules sur ces pages. Pour avoir plusieurs options d’affichage il est nécessaire d’avoir le maximum de hooks ajoutés dans le thème.

[+] Add icons to Link molecule #content management

L’atom “icon” a été dans la molécule “Lien”.

Pourquoi c’est important ?

Les icônes rendent la navigation plus fluide. La possibilité d’ajouter une icônes existait auparavant pour la molécule “Titre”, désormais cette option est ajoutée également pour les liens.

**[*] Display in BO : move "Atomic" tab after "Sell"** #UI/UX

A partir de la version 1.2.0 le menu Atomic est déplacé juste au-dessous du menu “Sell” :

Pourquoi c’est important ?

Ce petit changement permet d’avoir un accès plus rapide à l’animation du contenu sur votre site.

**[*] Enable groups via General settings** #UI/UX

Afin de simplifier l’interface de configuration des molécules, nous avons ajouté une configuration globale “Manage groups” dans l’onglet “Atomic Suite”-”Settings”-”General”. Désormais il n’est plus nécessaire de sélectionner des groupes pour chaque molécule si vous en avez pas besoin. Vous pouvez toutefois activer la gestion des groupes à tout moment pour gérer les molécules pour les différents groupes de clients.

Pourquoi c’est important ?

Le plus souvent, les molécules sont affichées pour tous les clients à la fois. La gestion des groupes au niveau de chaque molécule rend l’interface trop complexe et ajoute des paramètres qui ne sont jamais utilisés. Pour l’éviter, l’option d'activation des groupes a été ajoutée.