Lorsque vous réalisez un Site Web Adaptatif, il est important d'établir pour chaque Page une hiérarchie des contenus afin de pouvoir identifier quels contenus doivent rester et comment ils doivent être disposés lorsque le Site s'affiche à des définitions inférieures à celle du bureau.
Dans WebSite X5 la définition des modifications de chaque Page en fonction des points de rupture configurés s'effectue dans la fenêtre Paramètres Adaptatifs.
Cette fenêtre présente une Barre Adaptative avec la liste des points de rupture activés ainsi qu'une Grille qui reproduit la configuration de Page définie pour le point de rupture sélectionné : la première chose à faire est de définir le classement des Objets présents.
Définir le classement des Objets signifie établir dans quel ordre ceux-ci doivent être disposés lorsque la largeur de la fenêtre du Navigateur n'est plus suffisante pour permettre leur affichage en mode bureau.
Dans la Grille, chaque Objet inséré présente l'icône associée au type de contenu (Texte, Image, etc.) et un numéro indiquant la position occupée dans le classement.
En réalité, les Objets sont automatiquement classés par le programme, mais ce classement par défaut pourrait ne pas correspondre au classement souhaité, c'est pourquoi il est conseillé d'en vérifier l'exactitude selon les contenus et, le cas échéant, d'intervenir en le modifiant manuellement.
Pour activer la modalité de classement des Objets, vous devez sélectionner l'Affichage Bureau et cliquer sur le bouton 
Classement: les Objets insérés deviennent semi-transparents et certains sont encadrés en rouge pour indiquer qu'ils peuvent être sélectionnés.
|
Le processus de classement vise à disposer tous les Objets présents dans une Page afin de pouvoir les linéariser dans le bon ordre. Le programme évalue toutes les possibilités de classement et encadre chaque fois en rouge uniquement les Objets pouvant être sélectionnés sans provoquer de discontinuité dans le processus de classement qui empêcherait la linéarisation de tous les Objets. |
Vous pouvez alors commencer par cliquer sur un Objet parmi les Objets encadrés afin de déterminer le premier Objet. Une fois l'Objet sélectionné, celui-ci devient de nouveau complètement opaque et affiche le numéro associé dans le classement. Tous les autres Objets restent encore semi-transparents et, le cas échéant, les numéros qu'ils affichent sont mis à jour.
Selon l'Objet sur lequel vous avez cliqué et la manière dont tous les Objets sont insérés dans la Grille de mise en page, la liste des Objets encadrés parmi lesquels vous pouvez choisir l'Objet suivant dans le classement change au fur et à mesure.
Pour mieux comprendre ce passage, examinons l'illustration en exemple :
Image 1. Structure de départ
Avec cette configuration de Page, lorsque vous lancez la modalité Classement, le programme encadre en rouge tous les Objets de la première ligne parce que vous pouvez choisir le premier de la liste uniquement parmi ceux-ci.
En cliquant sur l'Objet 1, la situation sur la Grille change comme suit :
Image 2. Clic sur 1: choix entre 2, 3 et 4
Comme le montre l'illustration, en cliquant sur l'Objet 1, vous confirmez sa position et le programme demande alors de choisir le deuxième Objet entre les Objets 2, 3 et 4.
Le classement décrit représente uniquement l'un des classements possibles : en fonction des contenus, il pouvait être opportun de définir comme premier Objet du classement un autre Objet présent dans la première ligne de la Grille.
En continuant avec cet exemple, supposons que nous avons confirmé la position des Objets 1, 2 et 3. Le programme offre alors la possibilité de choisir sur quel Objet cliquer entre le 4 ou le 5.
Image 3. Choix entre 4 et 5
Le choix de cliquer sur l'Objet 4 ou sur l'Objet 5 a un impact sur les choix suivants. En effet, dans le premier cas, vous déterminez une structure de Page qui s'articule sur deux ligne, tandis que le deuxième cas engendre une structure articulée sur deux colonnes.
Image 4. Clic sur 4: structure en lignes
Image 5. Clic sur 5: structure en colonnes
Durant la procédure de classement, vous pouvez configurer des structures où créer des Blocs d'Objets : dans l'Image 5, par exemple, les Objets 1, 2, 3 et 4 forment un Bloc tandis que les Objets 5 et 6 en forment un autre. Un Bloc d'Objets se comporte comme s'il s'agissait d'un Objet unique et, pour plus de clarté, est dessiné sur la Grille dès qu'il est formé.
Image 6.
Image 7.
Les images 6 et 7 montrent comment la différence des choix de classement entraîne des Blocs d'Objets différents et donc des structures de Page différentes.
En règle générale, un Bloc d'Objets ne doit pas nécessairement rester tel quel pour tous les Affichages.
Image 8. Bloc d'Objets dans
l'affichage Bureau
Image 9. En rendant l'Objet 4 non visible, le Bloc ne se forme plus dans l'affichage suivant
Dans l'image 8, par exemple, les Objets 1, 2 et 3 forment un Bloc parce qu'ils sont accompagnés de l'Objet 4 disposé sur les deux lignes. En revanche, si on insère une interruption de ligne entre le Bloc et l'Objet 4 (fonction disponible dans l'édition Pro) comme dans l'image 9, ou si on rend invisible l'Objet 4, dans l'Affichage suivant, les Objets 1, 2 et 3 ne sont plus accompagnés d'autres Objets et ne forment plus un Bloc.
Lorsqu'un Bloc d'Objets reste inchangé dans tous les Affichages (sauf dans l'Affichage Smartphone, où la Page est complètement linéarisée) et qu'il n'est pas possible d'intervenir pour le diviser, ce bloc est défini Bloc Indivisible. Les Blocs Indivisibles sont également dessinés sur la Grille et mis en valeur par une couleur différente de celle des Blocs normaux.
Image 10. Exemple de Bloc Indivisible
L'image 10 illustre un exemple de Bloc Indivisible. Comme on peut le voir, la disposition "en fleur" des Objets ne permet pas d'identifier une structure en lignes ou en colonnes: ceci réduit considérablement les possibilités de classement, ne permet pas d'insérer des Interruptions de ligne entre les Objets concernés (fonction disponible dans l'édition Pro) et ne permet pas de rendre invisible un Objet sans rendre automatiquement invisibles tous les autres Objets du Bloc. Donc, même s'ils sont gérables, lorsque la structure présente des Blocs Indivisibles, il est conseillé de revoir la disposition des Objets pour essayer de la simplifier et avoir plus de liberté d'action.
Pour conclure, on ne peut pas affirmer de manière générale qu'un classement est plus correct ou meilleur qu'un autre: tout dépend des contenus présents et des résultats attendus. Une fois qu'un classement a été défini, il convient de vérifier l'affichage de la Page aux différents points de rupture configurés dans le Navigateur en local. Si les contenus continuent à se positionner de manière cohérente, cela signifie que le classement établi fonctionne correctement et qu'il peut être maintenu.
Bonnes pratiques :
- |
|
- |
|
- |
