Création de modèles de présentation adaptatifs

Vous pouvez créer des modèles de présentation adaptatifs afin que les pages et les éléments du magasin soient optimisés pour les navigateurs Web sur les ordinateurs de bureau, les tablettes et les appareils mobiles.

Procédure

  • Si vous créez des pages de magasin en utilisant des modèles de présentation par défaut dans l'outil de composition Commerce, le conteneur est déjà adaptatif par défaut, c'est-à-dire que les modèles de présentation par défaut utilisent un système de grille fluide.

    Pour obtenir une liste complète des modèles adaptatifs disponibles dans l'outil de composition Commerce, voir Modèles d'agencement adaptatifs.

  • Si vous utilisez votre propre conteneur ou modèle ex nihilo, pensez à consulter les instructions ci-dessous.

    Avant de commencer, assurez-vous que vous avez créé votre modèle de présentation dans l'outil Commerce Composer.

    Si vous choisissez d'utiliser un système de grille fluide, les instructions ci-dessous permettent de rendre la présentation adaptative :

    1. Assurez-vous que votre modèle est adaptatif, par exemple, en utilisant un système de grille fluide. C'est-à-dire que vous devez diviser le conteneur en lignes et en colonnes en utilisant les classes CSS mises à disposition par le système de grille fluide. Pour plus d'informations sur le système de grille fluide, voir Conception Web adaptative : Présentations et grilles fluides.
    2. Une fois les lignes et les colonnes créées, étiquetez certaines cellules sous forme d'emplacements en utilisant la bibliothèque de balises (taglib) de l'outil de composition Commerce.
    3. Ajoutez des comportements adaptatifs aux emplacements en utilisant les classes CSS fournies par le système de grille fluide, par exemple, en activant l'empilement des colonnes. Pour plus d'informations sur l'empilement des colonnes, voir Conception Web adaptative : empilement des colonnes
    4. Facultatif : Si nécessaire, personnalisez les comportements adaptatifs des emplacements en utilisant des règles CSS personnalisées avec les requêtes de média.
    5. Testez et déboguez votre nouveau modèle de présentation adaptative pour vous assurer que le modèle de présentation fonctionne dans différentes largeurs d'écran et différents widgets.