Parmi ces nouveautés, il y désormais la possibilité d’intégrer dans la page AMP une barre latérale pour le menu de navigation, des boutons de partage sur les réseaux sociaux, des classes CSS dynamiques et des accordéons pour découvrir du contenu masqué au départ.
Sidebar avec <AMP-SIDEBAR>
Les éditeurs s’appuient en général sur une navigation claire pour guider les lecteurs à travers leurs sites, et les utilisateurs s’appuient sur une conception claire pour obtenir la valeur totale du contenu. C’est pourquoi Google a décidé de faciliter l’intégration de la barre de navigation pour une meilleure expérience pour le développeur et l’utilisateur final.
La balise <amp-sidebar> d’AMP est un conteneur polyvalent pour le contenu qui est disponible immédiatement, mais ne bloque jamais le contenu quand il n’est pas nécessaire. Ainsi, quand elle est activée par un clic de l’utilisateur, la barre latérale de navigation sort de sa “cachette” depuis le côté de l’écran, comme on en voit dans les applications mobiles.
Cette barre de navigation qui se plie et se déplie sur le côté peut être personnalisée et ne gênera jamais la lecture du contenu principal.
Affichage en accordéon avec <AMP-ACCORDION>
Selon Google, les éditeurs de contenu ont besoin de tirer le meilleur parti de chaque once d’espace sur un appareil mobile, mais cela ne signifie pas de faire abstraction du bon contenu. Même sur les ordinateurs, l’utilisation d’une section réductible (dans des onglets) est un moyen populaire pour éventuellement afficher des informations détaillées sous une rubrique de niveau supérieur.
Alors, apporter une solution à AMP avec un composant librement personnalisable permet d’agrandir ou réduire une section en cliquant sur son en-tête.
La balise <amp-accordion> peut être intégrée en même temps que la balise <amp-sidebar> pour construire un menu hiérarchisé.
Vous pouvez même imbriquer un <amp-accordion> à l’intérieur de <amp-sidebar> pour obtenir des niveaux de hiérarchie qui conviennent le mieux à la structure de votre site. Documentation ici.
Boutons sociaux avec <AMP-SOCIAL-SHARE>
Lorsqu’un utilisateur souhaite partager un contenu AMP qu’il a lu, il est important de lui faciliter la tâche pour lui permettre de promouvoir votre contenu, et donc d’amplifier sa portée.
La balise <amp-social-share> fournit désormais des boutons faciles à implémenter pour partager la page en cours de lecture avec une série de boutons de partage sur les réseaux populaires tels que Facebook, Google+, LinkedIn, Pinterest et Twitter.
Et il est possible de les personnaliser et d’ajouter d’autres boutons sociaux supplémentaires..
Tout contenu partagé depuis une page AMP sera visible sur les réseaux sociaux en question, que ce soit sur le Web, le Web mobile ou les applications de ces réseaux sociaux. Documentation ici.
Classes de style avec <AMP-DYNAMIC-CSS-CLASSES>
En parlant de partage de contenu AMP (voir ci-dessus), avec toutes les nouvelles plateformes pour la découverte et la consommation de contenu qu’AMP rend possible, ne serait-il pas agréable d’adapter le contenu en fonction d'où vient l’utilisateur et comment il le voit ?
La balise <amp-dynamic-css-classes> offre aux éditeurs le contrôle pour facilement personnaliser les éléments de style selon le contexte d’origine et d’appareil des utilisateurs. Si les utilisateurs ont cliqué sur un lien depuis un site partenaire spécifique ou un réseau social, les éditeurs peuvent styliser différemment le contenu sur lequel ils arrivent.
Ne serait-ce que pour remplacer des morceaux de contenu par d’autres, pour garantir la meilleure expérience utilisateur. Documentation ici.
Comme promis par Google, au fil du temps, d’autres fonctionnalités utiles aux éditeurs viendront compléter la gamme. Espérons toutefois que cela ne va pas finir par compromettre l’affichage instantané recherché depuis le lancement de ce projet AMP.
