PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Méthode utilisée
  • 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
Produits
WINDEVWEBDEV - Code ServeurWEBDEV - Code NavigateurWINDEV MobileEtats et Requêtes
Plateformes
WindowsLinuxWindows MobileUniversal Windows 10 AppAndroidWidget AndroidiPhone/iPadApple Watch
Langages
JavaPHPAjaxCode Utilisateur (MCU)Langage Externe
Bases de données
HFSQLHFSQL Client/ServeurProcédures stockéesOLE DBODBCAccès Natifs
Présentation
Désormais, les sites Web peuvent être visualisés sur de nombreuses plateformes : mobiles, tablettes, PC, ... 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éthode utilisée

WEBDEV utilise la 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 terme 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.
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é : Dans tous les cas de figures, il faut penser "Bureau" avant de penser "Mobile" : toute modification d'IHM (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".
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'IHM, dans toutes les tranches. Cette étape est FONDAMENTALE. Il peut y avoir une erreur d'IHM dans une tranche et pas dans une autre. Le libellé de l'erreur d'IHM indique dans quelle tranche se situe l'erreur.
    • Démarrer la mise en page dans la tranche "Bureau" puis réaliser la mise en page dans les tranches "Tablette" puis "Mobile".
    • 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.
      Remarque : A partir de WEBDEV Update 3 (210065), si cet ordre n'est pas conservé, des erreurs d'IHM spécifiques sont affichées. Pour plus de détails, consultez Responsive Web Design : Des erreurs d'IHM spécifiques.
    • Penser à tester les pages dans votre navigateur tout en réduisant la largeur du navigateur pour simuler les plus petites 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
    • Ne jamais ajouter de champs dans les tranches inférieures (tranches "Mobile" et "Tablette") : 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 ("Tablette" et "Mobile") 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, 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". 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 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.

      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