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
  • Méthodes utilisées
  • Méthode du Desktop first
  • Méthode du Mobile first
  • Principe
  • A savoir avant de commencer
  • Conseils et recommandations pour la création d'un nouveau site avec des pages en Responsive Web Design ou pour la transformation de pages d'un site existant
WINDEV
WindowsLinuxJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac Catalyst
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
Les sites Web peuvent être visualisés sur de nombreuses plateformes : mobiles, tablettes, PC, etc. Sur chaque matériel, la taille du navigateur change et donc l'espace disponible pour afficher les données.
La méthode du "Responsive Web Design" consiste à créer une seule et même page qui s'adapte automatiquement selon la plateforme sur laquelle cette page est affichée.
WEBDEV propose de créer des pages utilisant la méthode du "Responsive Web Design" et permet d'optimiser l'affichage de la page sur différentes plateformes grâce à plusieurs fonctionnalités de l'éditeur.
Testez directement un exemple WEBDEV gérant le Responsive Web Design en cliquant sur le lien suivant Site de présentation de WM Sport Assistant. Affichez cette page et redimensionnez le navigateur pour visualiser les différentes résolutions possibles.

Méthodes utilisées

WEBDEV propose 2 modes pour créer et gérer des pages Responsive Web Design :
  • Mode Desktop First : La page est définie dans sa version la plus large Bureau qui sert de référence, puis ensuite la page est modifiée pour les tranches inférieures Tablette et Mobile.
  • Mode Mobile First : La page est définie dans sa version la plus petite Mobile qui sert de référence, puis ensuite la page est modifiée pour les tranches supérieures Tablette et Bureau.

Méthode du Desktop first

Le développeur doit tout d'abord penser à l'interface de son site Web en mode "Bureau". Ensuite, il réalisera la version en mode "Tablette", puis il terminera par la version en mode "Mobile".
Cette notion de "dégradation d'interface" vient du besoin d'avoir une lisibilité du site sur l'ensemble des combinaisons de supports et résolutions d'écran.
En termes de conception, cela signifie qu'un site Web est tout d'abord réalisé pour une utilisation "bureau". En réduisant les résolutions d'affichage (taille de la page), le contenu et les fonctionnalités sont soit déplacés, soit retaillés, soit masqués.

Méthode du Mobile first

Le développeur doit tout d'abord penser à l'interface de son site Web en mode "Mobile". Ensuite, il réalisera la version en mode "Tablette", puis il terminera par la version en mode "Bureau".
Cette notion de "d'amélioration d'interface" vient du besoin d'ajouter des fonctionnalités au site en fonction des combinaisons de supports et résolutions d'écran.
En termes de conception, cela signifie qu'un site Web est tout d'abord réalisé pour une utilisation "mobile". En agrandissant les résolutions d'affichage (taille de la page), le contenu et les fonctionnalités sont soit déplacés, soit retaillés, soit masqués.

Principe

Sous l'éditeur WEBDEV, la représentation des différentes résolutions possibles se fait à l'aide de tranches. Une tranche représente un taille de navigateur pour un appareil spécifique. Dans le cas de WEBDEV, 3 tranches sont présentes par défaut :
  • La tranche Mobile correspondant à des appareils de type smartphone.
  • La tranche Tablette correspondant à des appareils de type tablette.
  • La tranche Bureau correspondant à des appareils de type PC, MAC, etc.
Pour plus de détails, consultez Responsive Web Design : Gestion des tranches.
Il faut veiller à ce que le site Web soit et reste le plus fonctionnel possible même en version Mobile.
En résumé :
  • En mode Desktop first, il faut penser "Bureau" avant de penser "Tablette" puis "Mobile" : toute modification d'UI (création de la page, ajout de champs, organisation des champs dans la page, position des liens ou des boutons, ...) doit tout d'abord être pensée en mode "Bureau".
  • En mode Mobile first, il faut penser "Mobile" avant de penser "Tablette" puis "Bureau" : toute modification d'UI (création de la page, ajout de champs, organisation des champs dans la page, position des liens ou des boutons, ...) doit tout d'abord être pensée en mode "Mobile".
Documentation sur le Responsive Web Design : N'hésitez pas à consulter les pages de documentation suivantes (ordre de lecture conseillé) :
  1. Gestion des ancrages.
  2. Gestion des tranches.
  3. Création d'une page Responsive Web Design.
  4. Test des pages Responsive Web Design.
  5. Gérer un bandeau d'entête.
  6. Appliquer le mode Responsive Web Design à une page existante.
  7. Astuces.
A savoir avant de commencer

Conseils et recommandations pour la création d'un nouveau site avec des pages en Responsive Web Design ou pour la transformation de pages d'un site existant

Avant de commencer à travailler sur la mise en place du Responsive Web Design dans un site WEBDEV, il faut suivre les recommandations suivantes :
  • Généralités
    • Corriger TOUTES les erreurs d'UI, dans toutes les tranches. Cette étape est FONDAMENTALE. Il peut y avoir une erreur d'UI dans une tranche et pas dans une autre. Le libellé de l'erreur d'UI indique dans quelle tranche se situe l'erreur.
    • Selon le mode Desktop First ou Mobile First, démarrer la mise en page dans la tranche "Bureau" ou "Mobile" puis réaliser la mise en page dans les tranches inférieures ou supérieures (respectivement "Tablette" et "Mobile" ou "Bureau").
    • Commencer par transformer les modèles de pages pour le Responsive Web Design, avant de transformer les pages du site.
    • Lors de la création d'une nouvelle page, il peut être judicieux de regrouper les champs par bloc logique (en utilisant une cellule) afin de les manipuler plus facilement dans les tranches.
    • Conserver le même ordre de navigation des champs dans toutes les tranches.
      Si cet ordre n'est pas conservé, des erreurs d'UI spécifiques sont affichées. Pour plus de détails, consultez Responsive Web Design : Des erreurs d'UI spécifiques.
    • Penser à tester les pages dans votre navigateur tout en réduisant ou en agrandissant la largeur du navigateur pour simuler toutes les résolutions.
      Remarque : Les navigateurs proposent également des options spécifiques pour le test des pages Responsive Web Design. Pour plus de détails, consultez Testez les pages "Responsive Web Design".
  • Champs
    • Selon le mode Desktop First ou Mobile First, ne jamais ajouter de champs dans les tranches inférieures ou supérieures. Par exemple, en mode Desktop First, ajouter les champs dans la tranche "Bureau" puis faire les adaptations nécessaires dans les tranches inférieures.
    • Les modifications apportées à un champ présent dans une tranche sont contextuelles à cette tranche : c'est le mécanisme de surcharge.
    • Pour afficher ou saisir la même information, ne pas hésiter à utiliser des types de champs différents dans chaque tranche. Par exemple, en mode Desktop First, il est possible d'avoir un sélecteur dans les tranches "Bureau" et "Tablette" et une combo dans la tranche "Mobile". Attention : le champ existe dans toutes les tranches.
      Le champ qui ne doit pas apparaître dans une tranche doit être rendu invisible dans les autres tranches. Pour rendre le champ visible ou invisible :
      1. Sélectionnez le champ.
      2. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Responsive Web Design .. Visibilité par tranche".
    • Ne pas hésiter à scinder un champ de saisie en 2 parties : libellé et zone de saisie. Il sera ainsi possible de manipuler plus facilement les éléments lors du passage dans la tranche "Mobile" (cas du Desktop First). Par exemple, un libellé à gauche et une zone de saisie à droite deviennent un libellé dessus et une zone de saisie dessous.
    • Penser à utiliser le texte d'indication du champ ou le texte alternatif (dans l'onglet "Aide" de la description du champ) pour "économiser" la place du libellé du champ : le passage dans les tranches inférieures sera plus facile.
    • Il faut mieux redimensionner un champ dans une tranche plutôt que de modifier l'ancrage en largeur de ce champ. En effet, l'ancrage est défini pour toutes les tranches tandis que la largeur peut être surchargée par tranche.
    • Eviter les champs superposables. Rester sur la grille pour bénéficier des fonctionnalités du Responsive.
  • Tranches
    • Définir les points de basculement de tranches : Lors de la diminution ou de l'augmentation de la résolution, la mise en forme de la page peut être modifiée avant la limite de la tranche. Dans ce cas-là, il suffit de modifier le point de rupture de la tranche afin d'obtenir toujours l'interface voulue.
      En mode Desktop First :

      Par exemple, le point de basculement de tranches correspond à la bascule de 4 à 3 puis 2 éléments par ligne lors du passage du mode "Bureau" au mode "Tablette". Pour éviter le passage par l'étape intermédiaire 3 éléments sur une même ligne, il faut modifier la taille de la tranche "Tablette" pour avoir un passage de 4 à 2. Une fois la taille de la tranche "Tablette" modifiée, il faut modifier son interface (si ce n'est déjà pas fait) pour avoir 2 éléments côte à côte en mode "Tablette". Ainsi, lors de la diminution de résolution, l'interface passe directement de 4 à 2 éléments.
    • Vérifier les surcharges par tranche. Ne pas hésiter à supprimer toutes les surcharges sur une tranche pour recommencer la mise en page (pour plus de détails, consultez Supprimer une tranche).
    • Réglette de tranches (partie jaune, verte, bleue) : Il est possible de créer une nouvelle tranche ou de redimensionner une tranche existante. Une tranche est requise :
      • soit pour s'adapter à un périphérique. Les tranches "Tablette" (840 pixels) et "Mobile" (480 pixels) sont créées par défaut (spécifications Google Material Design).
      • soit pour adapter son contenu (à la charge du développeur) en fonction du site à réaliser.
  • Ancrage (pour plus de détails, consultez Responsive Web Design : Gestion des ancrages).
    • Paramètres de la fenêtre d'ancrage des champs :
      • Largeur :
        • Taille en édition : option à utiliser si le champ doit conserver sa taille.
        • Adapter à la grille : option à utiliser si le champ doit se réduire et suivre proportionnellement la largeur de la page dans le navigateur.
    • Ancrage : Pourquoi centrer un champ ?
      Le Responsive Web Design conserve les proportions, donc par défaut un champ placé au centre le restera. Il n'est pas nécessaire de l'ancrer. L'ancrage centré existe mais il est destiné aux champs à largeur fixe et à la contrainte de réserver toute la largeur.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 13/09/2024

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