Dans la Conception de Sites Web Adaptatifs, quel que soit le niveau de complexité du Site que vous souhaitez réaliser, il est indispensable de développer une bonne stratégie pour la gestion des contenus, en analysant non seulement les contenus à insérer, mais également la manière de les présenter :
| ▪ | Quels contenus doivent être insérés dans une Page ? |
| ▪ | Les mêmes contenus doivent-ils être utilisés pour la version mobile et la version bureau ? |
| ▪ | Sinon, quels contenus doivent être éliminés pour la version mobile ? |
| ▪ | Dans quel ordre faut-il disposer les contenus ? |
Une bonne stratégie consiste à faire une liste de tous les contenus qui doivent être présents dans une Page et les classer par ordre décroissant d'importance: ainsi, il est plus facile d'identifier les contenus essentiels, ceux qui doivent toujours rester disponibles et les contenus accessoires qui, en revanche peuvent être cachés lorsque, pour des définitions inférieures, il est nécessaire de présenter uniquement les contenus effectivement utiles. Naturellement, cette opération de classement est à répéter pour chaque Page du Site.
Pour mieux comprendre ce mécanisme, prenons l'exemple classique du Site Web d'un restaurant. Quand le Site s'affiche sur le bureau, il peut mettre en avant les images et les animations qui présentent les différents plats du menu pour intéresser et séduire les Utilisateurs. En revanche, quand le même Site est utilisé à partir d'un dispositif mobile, on peut raisonnablement penser que l'Utilisateur cherche plus à lire les critiques ou à trouver les informations de contact qu'à voir les images de grandes dimensions. Il est ainsi nécessaire d'économiser sur les images pour répondre aux exigences d'un utilisateur qui navigue avec un dispositif moins performant (petit écran, bande pas forcément large, etc.) et qui a besoin d'informations rapides et ponctuelles.
Dans WebSite X5, une fois que vous avez créé la Page telle qu'elle doit s'afficher sur le bureau (voir Comment configurer une Page à l'aide de la Grille de mise en page), vous pouvez configurer les modifications à apporter à la Page en fonction des différents points de rupture activés. En particulier, vous devez procéder comme suit :
| ▪ | À l' Étape 4 - Pages créer la Page en faisant glisser dans la Grille de mise en page les Objets nécessaires et en insérant les différents contenus. La Page ainsi créée est celle qui s'affichera pour les résolutions supérieures au point de rupture Bureau. |
| ▪ | Une fois la composition de la Page terminée, cliquer sur le bouton  Adaptatif pour rappeler la fenêtre Paramètres Adaptatifs. Dans cette fenêtre figure la Barre Adaptative qui repropose tous les Affichages déterminés par les points de rupture activés pour le Site (à l'aide de la fenêtre Définitions et Conception Adaptative). Il est nécessaire de procéder par ordre, en commençant par sélectionner sur la Barre Adaptative l'Affichage Bureau puis en sélectionnant tous les autres Affichages jusqu'à l'Affichage Smartphone. |
| ▪ | Une fois l'Affichage Bureau sélectionné, dans la Grille est reproposée la configuration définie dans la fenêtre Création de la page. Cliquer sur le bouton  Classement pour activer la modalité dans laquelle il est possible de classer les Objets insérés dans la Grille. Su chaque Objet inséré dans la Grille s'affiche un numéro attribué en fonction du classement effectué automatiquement par le programme. |
| ▪ | Modifier l'ordre des Objets en fonction de l'importance attribuée aux différents contenus et à la manière dont vous souhaitez les placer dans la Page. Pour procéder au classement, différentes possibilités s'offrent à vous : |
| • | En configurant Classement | Classer tous les Objets depuis le début, vous devez commencer par cliquer sur l'Objet que vous souhaiter positionner en premier puis procéder en cliquant en ordre sur tous les autres Objets. |
| • | En configurant Classement | Continuer le classement à partir d'un Objet, vous devez cliquer sur l'Objet à partir duquel vous souhaitez procéder au classement. Tous les Objets précédents sont confirmés tandis que vous devez cliquer sur les Objets suivants pour en définir la position dans le classement. |
La procédure de classement termine :
| • | Lorsque vous cliquez sur le dernier Objet présent dans la Page. |
| • | En cliquant sur Classement | Compléter le classement : cette opération termine la procédure en confirmant l'ordre courant. |
| • | En cliquant sur Classement | Annuler le classement : cette opération termine la procédure en annulant les modifications effectuées et en restaurant le classement initial. |
WebSite X5 guide dans la procédure de classement : une fois un Objet sélectionné, tous les Objets sur lesquels vous pouvez cliquer pour déterminer l'Objet suivant sont encadrés d'un bord rouge. L'ordre défini pour l'Affichage Bureau sera maintenu également pour tous les autres Affichages.
| ▪ | Cliquer sur le bouton  Montrer/Cacher Objet pour lancer la modalité où configurer les Objets comme invisibles. Cliquer sur les Objets qui, à des définitions inférieures à celle actuellement sélectionnée, ne devront plus s'afficher. Cliquer une deuxième fois sur le bouton Montrer/Cacher Objet pour confirmer et sortir de cette modalité. |
| ▪ |  Cliquer sur le bouton  pour lancer la modalité où il est possible d'intervenir sur l'alignement des Objets en forçant certains d'entre eux à aller "à la ligne", pour des définitions inférieures à celle de l'Affichage Bureau (actuellement sélectionné). À tous les emplacements où il est possible d'insérer une Interruption de Ligne, un bordure grise hachurée apparaît: cliquer sur les traits pour configurer les Interruptions de Ligne souhaitées. Cliquer une deuxième fois sur le bouton Interruption de Ligne pour confirmer et sortir de cette modalité. |
| ▪ | En travaillant avec l'édition Pro vous pouvez configurer jusqu'à 10 points de rupture au total. S'il y a des Affichages intermédiaires, utiliser la Barre Adaptative pour sélectionner l'Affichage suivant l'Affichage Bureau. La Grille est mise à jour en fonction de la configuration définie pour l'Affichage Bureau : sur cette nouvelle configuration, procéder à la configuration, si nécessaire, d'autres Objets comme non visibles et à l'insertion d'autres interruptions de ligne. Répéter ces pages pour tous les Affichages suivants. |
| ▪ | Une fois arrivé à l'Affichage Smartphone, il n'y a plus rien à faire étant donné que tous les Objets restés comme visibles sont simplement linéarisés, c'est-à-dire positionnés les uns en dessous des autres, en fonction de l'ordre initialement défini. |
Comme le montre l'illustration, la Grille reproduit la structure que la Page prend dans l'intervalle de définitions identifié par l'Affichage sélectionné. Toutes les modifications qui sont effectuées détermineront en revanche la structure que la Page prendra pour l'intervalle de définitions associé à l'Affichage suivant immédiat.
|
Quand on crée une nouvelle Page à l'intérieur d'un Site que l'on souhaite rendre Adaptatif, il est recommandé de faire en sorte que la Grille de mise en page ne comporte aucune Cellule vide. En effet, le programme traite les Cellules vides comme si elles étaient des Objets (vides) et leur attribue à chacune une position dans le classement : ces positions ne pourront pas être modifiées mais elles auront un impact sur les possibilités de classement des Objets réels. Pour avoir le plus de liberté possible dans le classement des Objets, il vaut donc mieux éviter d'avoir des Cellules vides en insérant plutôt des Objets vides : s'ils sont insérés manuellement, ces Objets vides n'auront pas d'impact sur la composition de la Page et ils pourront être classés manuellement.
|
|
