DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Editeurs / Editeur de fenêtres et de pages / Editeur de pages / Responsive Web Design
  • Présentation
  • Quand faut-il créer une nouvelle tranche ?
  • Comment gérer la réduction ou l'agrandissement des tranches ?
  • Comment optimiser l'espace visible dans une tranche ?
  • Pourquoi une surcharge de position et de taille des champs provoque une superposition dans le navigateur ?
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Avertissement
En version 28, le mode d'édition des pages initialement appelé "Responsive Web Design : mise en page par tranche" devient "Tranches (Responsive historique pour compatibilité)".
Le mode "Responsive (zoning et agencements)" devient le mode recommandé pour les nouvelles créations. Pour plus de détails, consultez Changement du mode d'édition des sites mobile friendly.
Cette page de documentation est adaptée aux nouvelles options de la version 28.
Présentation
Vous avez utilisé le Responsive Web Design dans vos pages mais quelques points de blocages subsistent.
Cette page présente des astuces de mise en page.
Dans tous les cas :
  • Vérifiez toutes les erreurs d'UI : elles précisent le champ et la tranche incriminés.
  • Repartez de la tranche par défaut :
    • Repartez de la tranche "Bureau" en mode "Desktop First" et réduisez le navigateur sous l'éditeur (via la poignée) pour vérifier la cohérence des modifications.
    • Repartez de la tranche "Mobile" en mode "Mobile First" et agrandissez le navigateur sous l'éditeur (via la poignée) pour vérifier la cohérence des modifications.
Quand faut-il créer une nouvelle tranche ?
Il est possible de créer une tranche :
  • Pour gérer un matériel spécifique.
  • Pour gérer un affichage spécifique. Dans l'exemple suivant (page en mode "Desktop First"), un affichage intermédiaire est souhaité :
    Création d'une tranche
Comment gérer la réduction ou l'agrandissement des tranches ?
Par défaut, les champs utilisent l'ancrage en largeur "Adapté à la grille". Les champs sont donc réduits ou agrandis selon le mode (Desktop First ou Mobile First) proportionnellement. Par exemple en "Desktop First" :

Champs utilisables


Pour limiter la réduction des champs, il suffit de fixer la taille minimale :
  • option "Largeur min" dans l'onglet "UI" de la fenêtre de description du champ.
  • option "Largeur min" dans la fenêtre de gestion des ancrages du champ.
Pour ne pas réduire les champs, il faut appliquer aux champs l'ancrage en largeur "Utiliser la taille d'édition".
Remarque : Si une erreur d'UI apparaît ou si le contenu du champ n'est pas exploitable visuellement, vous devez déplacer le champ et le redimensionner.

Champs inutilisables
Comment optimiser l'espace visible dans une tranche ?
Par défaut, la mise en page est conservée. Le contenu de la page s'adapte à la tranche.
Pour optimiser l'espace visible, il est possible de réduire les marges de la page (marges internes) dans une tranche et appliquer aux champs l'ancrage en largeur "Utiliser la taille d'édition".
Par exemple en mode Desktop First :
Adaptation de la mise en page et du contenu
Pourquoi une surcharge de position et de taille des champs provoque une superposition dans le navigateur ?
La position d'un champ est surchargée dans la tranche "Mobile" et/ou "Tablette" : dans le navigateur, cette surcharge de position et de taille provoque la superposition de champs.
Quel est le problème ? La surcharge de position dans la tranche "Mobile" et/ou "Tablette" ne conserve pas l'ordre des champs défini dans la tranche "Bureau" (qui sert de tranche de référence en mode "Desktop First").
En mode "Responsive Web Design", les champs sont ordonnés les uns par rapport aux autres. Cet ordre dépend de la position (de haut en bas puis de gauche à droite) et de l'ancrage. Il doit être respecté à l'identique dans toutes les tranches.
En effet, la technologie "Responsive Web Design" utilise un seul flux HTML pour toutes les tranches, en repositionnant les champs par CSS. L'ordre des champs dans la tranche de référence détermine l'ordre des champs dans le flux HTML.
Exemple : Dans l'exemple suivant, la page contient une cellule regroupant une autre cellule et une image :
L'ordre des champs dans la tranche "Bureau" (la tranche de référence) est :
  1. la cellule CELL_1 qui regroupe la seconde cellule CELL_2 et l'image,
  2. la cellule CELL_2,
  3. l'image.
Dans la tranche "Mobile", une surcharge de la taille et de la position des champs est effectuée : l'image est placée avant la cellule CELL_2. L'ordre des champs dans la tranche "Mobile" diffère donc de l'ordre des champs de la tranche "Bureau" :
En exécution, l'ordre des champs de la tranche "Bureau" n'étant pas respecté dans la tranche "Mobile", il y a une superposition : l'image va déborder sur la cellule CELL_2 et elle ne pourra pas la "pousser" :
Pour éviter toute superposition inattendue dans le navigateur, il faut donc s'assurer que l'ordre des champs dans la tranche "Mobile" et dans la tranche "Tablette" est le même que celui de la tranche "Bureau" (tranche de référence).
Dans notre exemple, pour obtenir ici le résultat attendu, il est possible d'utiliser deux champs Image :
  • Le premier champ Image sera placé avant le champ CELL_2 dans la tranche Bureau (donc il sera en premier dans l'ordre des champs dans la tranche de référence). Il sera visible uniquement dans la tranche "Mobile".
  • Le second champ Image sera visible uniquement dans la tranche "Bureau".
Afin de faciliter le positionnement des champs dans la tranche "Mobile" et/ou "Tablette", à partir de la version 21 Update 3, une erreur de compilation d'UI est systématiquement générée par l'éditeur de pages en cas de non respect de l'ordre des champs entre les différentes tranches.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 07/12/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale