Points d'arrêt d'une plage de pages dans le magasin type Aurora
Les pages de conception de sites Web adaptatifs sont redimensionnées dynamiquement et affichent un contenu différent sur les différents appareils utilisés pour accéder au magasin. Par défaut, le magasin type Aurora comporte trois délimitations de plage de pages pour prendre en compte les ordinateurs de bureau, les tablettes et les appareils mobiles.
Points d'arrêt de plage de pages par défaut
Les points d'arrêt de plage de pages par défaut sont définis à l'aide de déclarations CSS3 Media Query dans le fichier CSS suivant :
- WC_eardir/Stores.war/storedir/css/styles.css
Le tableau ci-dessous récapitule les délimitations de plage de pages dans le magasin type Aurora :
| Unité | Point d'arrêt de la plage | Plage de pages |
|---|---|---|
| Bureau | RWD-C | 1 281 pixels CSS et plus |
| Tablette | RWD-B | 601 à 1 280 pixels CSS |
| Mobile | RWD-A | 600 pixels CSS et moins |
Les navigateurs Web pris en charge actuels pour les magasins types comprennent les déclarations de requête CSS3, ce qui permet de mettre à jour les flux de contenu et de présentation des pages. Lorsque vous utilisez un navigateur pour ordinateurs de bureau non pris en charge, le redimensionnement manuel de la fenêtre ou le changement de résolution de l'écran entraîne une reprise lorsque le site destiné aux ordinateurs de bureau est affiché.
Plage d'affichage pour ordinateur de bureau
Le magasin type Aurora dans la gamme pour ordinateurs de bureau de 1 281 pixels CSS et plus n'implique pas de masquer ou de réduire des éléments de la page.
Par exemple, dans la page d'accueil :
- L'en-tête du magasin contient toutes les informations, comme les sélections de rayon disponibles et les informations sur le magasin.
- L'image d'arrière-plan du site est centrée et visible entièrement.
- Les widgets affichent simultanément davantage de contenu à l'écran.
- Les images de la vitrine s'affichent en grand format.
- Il n'y a pas de barres de défilement latérales visibles pour le magasin. Par conséquent, le contenu du magasin n'est pas réduit en une plage d'affichage réduite.
Capture d'écran de la page sur un ordinateur de bureau
Plage d'affichage pour tablette
Le magasin type Aurora dans la plage pour tablettes de 601 à 1 280 pixels CSS masque ou réduit certains éléments de la page.
Par exemple, dans la page d'accueil :
- L'en-tête du magasin contient moins d'informations que dans l'affichage destiné aux ordinateurs de bureau, moins de sélections de rayon disponibles et d'informations sur le magasin, par exemple.
- L'image d'arrière-plan du site est visible entièrement. En revanche, sa plage d'affichage est réduite et remplit l'écran, au lieu d'être centrée dans l'écran comme sur l'affichage destiné aux ordinateurs de bureau.
- Les widgets affichent moins de contenu à la fois à l'écran par rapport à l'affichage destiné aux ordinateurs de bureau.
- Les images de la vitrine sont légèrement plus petites que sur un ordinateur de bureau.
- Il n'y a pas de barres de défilement latérales visibles pour le magasin. Par conséquent, le contenu du magasin n'est pas réduit en une plage d'affichage réduite.
Capture d'écran sur une tablette
Plage d'affichage pour appareil mobile
Le magasin type Aurora dans la plage mobile de 600 pixels CSS et moins masque ou réduit la plupart des éléments de la page.
Par exemple, dans la page d'accueil :
- L'en-tête du magasin contient moins d'informations que sur un ordinateur de bureau ou une tablette : il y a une seule sélection de rayon disponible et d'informations sur le magasin.
- L'image d'arrière-plan du site est visible entièrement. En revanche, sa plage d'affichage est réduite et elle est masquée par les widgets de la page.
- Les widgets affichent moins de contenu à la fois à l'écran par rapport à l'affichage destiné aux ordinateurs de bureau.
- Les images de la vitrine s'affichent dans un format bien plus petit que sur un ordinateur de bureau ou une tablette.
- Il n'y a pas de barres de défilement latérales visibles pour le magasin. Par conséquent, le contenu du magasin n'est pas réduit en une plage d'affichage réduite.
Capture d'écran de la page sur un appareil mobile
Zones d'une page
La vitrine adaptative utilise l'espace de pagination des façons suivantes :
- En-tête et pied de page
- La quantité d'informations affichée par l'en-tête de la page dépend de la taille de la fenêtre d'affichage. Par exemple :
- L'en-tête de l'affichage sur un ordinateur de bureau contient toutes les informations, comme le choix des rayons et les informations sur le magasin disponibles.
- L'en-tête de l'affichage sur une tablette contient moins d'informations, pour ce qui est, par exemple, du choix des rayons et des informations sur le magasin disponibles, que sur un ordinateur de bureau.
- L'en-tête de l'affichage sur un appareil mobile contient moins d'informations, pour ce qui est, par exemple, du choix des rayons et des informations sur le magasin disponibles, que sur un ordinateur de bureau ou une tablette.
- Barres de défilement latérales
- Le contenu du magasin, comme les facettes et l'affichage des catégories, peut être réduit dans la barre latérale et est, en général, réduit initialement dans les plages d'affichage inférieures.
- Remplissage
- Il n'y a pas de marge intérieure visible à gauche et à droite du contenu du magasin, quelle que soit la taille de l'appareil ou de l'écran. Par conséquent, le contenu du magasin n'est pas réduit en une plage d'affichage réduite.
Images
Dans la vitrine adaptative, les images se comportent dynamiquement en fonction de la taille de l'appareil et de l'écran. Par exemple :
- Images d'arrière-plan
- Les images d'arrière-plan sont redimensionnées dynamiquement. Par exemple :
- L'image d'arrière-plan du site pour ordinateur de bureau est centrée et visible dans son intégralité.
- L'image d'arrière-plan du site pour tablette est visible dans son intégralité. En revanche, sa plage d'affichage est réduite et remplit l'écran, au lieu d'être centrée dans l'écran comme sur l'affichage destiné aux ordinateurs de bureau.
- L'image d'arrière-plan du site pour appareil mobile est visible dans son intégralité. En revanche, sa plage d'affichage est réduite et elle est masquée par les éléments de la page, comme les emplacements e-Marketing et les listes de produits.
- Images du site
- Les images du site sont redimensionnées dynamiquement. Par exemple :
- Les images de la vitrine destinées aux ordinateurs de bureau sont trop grandes.
- Les images de la vitrine destinées aux tablettes sont légèrement plus petites que celles destinées aux ordinateurs de bureau.
- Les images de la vitrine destinées aux appareils mobiles sont bien plus petites que celles destinées aux ordinateurs de bureau ou aux tablettes.
- Widgets
- Les widgets du site sont redimensionnées dynamiquement. Par exemple :
- Le widget d'emplacement e-Marketing à faire défiler pour ordinateurs de bureau affiche simultanément quatre produits à l'écran.
- Le widget d'emplacement e-Marketing à faire défiler pour tablettes affiche simultanément deux produits à l'écran.
- Le widget d'emplacement e-Marketing à faire défiler pour appareils mobiles affiche simultanément deux produits à l'écran, dans une taille réduite par rapport à celle destinée aux tablettes.
Evénements tactiles
Le magasin type adaptatif inclut des événements pour gérer les entrées tactiles des écrans tactiles et des touch pads. Les widgets ci-dessous sont optimisés pour les événements tactiles et de pointage par défaut en prenant en charge le glissement :