Mise en place

• Créer une page de type "Responsive historique".
• Positionner tous les champs voulus dans la page.
• Vérifier les ancrages de la page et des champs. Cette vérification est effectuée directement sous l'éditeur (voir Exemple pratique).
• Utiliser les tranches pour modifier le comportement des champs selon le mode d'affichage.

• Pour optimiser la gestion du mode Responsive Web Design, n'hésitez pas à consulter :
  • les conseils et recommandations.
  • les astuces.
• Pour tester les pages sous différentes configurations, utilisez le mode débogage des navigateurs. Pour plus de détails, consultez Tester les pages "Responsive historique".

Mise en place

1. Cliquez sur parmi les boutons d'accès rapide.
   • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
   • L'assistant de création d'une page se lance.
2. Sélectionnez le type de page à créer : "Vierge" et validez. La page est automatiquement créée et affichée sous l'éditeur.
3. Affichez la fenêtre de description de la page : Sous le volet "Page", dans le groupe "Description", cliquez sur "Description".
4. Dans l'onglet "Général", sélectionnez le mode d'édition "Tranches (Responsive historique pour compatibilité)".
   
5. Validez la fenêtre de description.
6. Les différentes tranches apparaissent dans la page affichée sous l'éditeur. Par défaut, le mode utilisé est le mode "Desktop First - Edition en taille max.".
7. Configurez le mode d'édition du responsive :
   • Affichez le menu contextuel de la tranche "Bureau" (clic droit sur la zone bleue "Bureau par défaut").
     
   • Ce menu propose les options concernant le sens de propagation des surcharges par tranche. Les possibilités sont les suivantes :
     • Desktop First - Edition en taille min : La page est définie dans sa version la plus large Bureau qui sert de référence, puis ensuite on diminue vers les tranches inférieures Tablette et Mobile. Chaque tranche sera éditée dans l'éditeur de pages dans sa taille minimale. Ainsi, en cliquant sur la tranche Tablette, la zone d'édition correspondra à la tranche Mobile, correspondant à la taille minimale de la tranche Tablette.
     • Desktop First - Edition en taille max : La page est définie dans sa version la plus large Bureau qui sert de référence, puis ensuite on diminue vers les tranches inférieures Tablette et Mobile. Chaque tranche sera éditée dans l'éditeur de pages dans sa taille maximale. Ainsi, en cliquant sur la tranche Tablette, la zone d'édition correspondra à la tranche Tablette, correspondant à la taille maximale de la tranche Tablette. Les surcharges seront propagées
     • Mobile First : La page est définie dans sa version la plus petite Mobile qui sert de référence, puis ensuite on augmente vers les tranches supérieures Tablette et Bureau.

Les différents éléments de l'éditeur

• 1. Barre du ruban contenant les options spécifiques aux "Tranches".
• 2. Réglette des tranches. Cette barre contient différentes tranches représentant les résolutions des matériels les plus courants. Il est possible de modifier ces tranches, de les supprimer ou d'en ajouter. Un clic sur une tranche permet de visualiser la page dans cette tranche.
• 3. Poignée du navigateur d'édition. Cette poignée permet de redimensionner la taille du navigateur sous l'éditeur afin de visualiser dynamiquement l'adaptation des champs à la taille du navigateur. Pour diminuer ou augmenter la taille du navigateur sous l'éditeur, il suffit de cliquer sur la double flèche, maintenir le bouton de la souris enfoncé et de se déplacer horizontalement.
• 4. Grille (en colonnes) permettant de positionner les champs dans la page. Cette grille est une aide au positionnement des champs. Elle n'a aucune existence réelle dans la page Web. La grille permet un alignement plus facile et permet le calcul automatique du positionnement des champs. Cette grille peut se désactiver lors du déplacement des champs en utilisant la touche Maj.

Création de champs dans une page en mode Responsive historique

• Les champs créés dans une page en mode "Responsive historique" sont automatiquement créés dans la plus grande tranche ou la plus petite selon le mode Desktop First ou Mobile First.
• Certains sont adaptés au mode "Responsive historique" :
  • Le champ Barre de navigation.
  • Le champ Zone répétée : adaptation du nombre de colonnes en fonction de la tranche.
  • Le champ Table : adaptation des colonnes (masquage ou non) de la table en fonction de la tranche.
  • Le champ Tableau de bord : adaptation du nombre de colonnes en fonction de la tranche.

Utilisons le navigateur d'édition pour visualiser le comportement des champs lors du redimensionnement du navigateur.

Nous nous apercevons rapidement que les images dans les 2 champs en haut de l'écran sont tronquées.

Si nous continuons de diminuer la largeur du navigateur, le titre apparaît sur plusieurs lignes.

Pour solutionner ces problèmes, il suffit d'agir sur l'ancrage des champs :

1. Ancrage du champ Image en haut à gauche :
   • L'ancrage en X "Gauche" est conservé : le champ conserve sa position proportionnelle au bord gauche de la page.
   • La largeur utilise la taille d'édition. Ainsi, le champ ne peut être tronqué.
2. Ancrage du champ Image en haut à droite :
   • L'ancrage en X devient "Droite" : le champ conserve sa position proportionnelle au bord droit de la page.
   • La largeur utilise la taille d'édition. Ainsi, le champ ne peut être tronqué.
3. Ancrage du titre :
   • L'ancrage en X devient "Centré" : le champ reste centré dans la page quelle que soit la largeur de la page.
   • La largeur utilise la taille d'édition. Ainsi, le champ ne peut être tronqué ou mis sur plusieurs lignes.
4. Ancrage des champs Libellé et Graphe : Cet ancrage n'est pas modifié. La taille des champs diminue proportionnellement à la taille de la page. L'espace entre les champs Libellé et Graphe est conservé proportionnellement (par défaut, un ancrage en X à gauche).

• Tranche Bureau :
  
• En redimensionnant (tranche Tablette) :
  

Mode avancé : Exemple de surcharge : il est également possible de surcharger la position du champ Graphe et du champ Libellé en mode Mobile :