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.

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.

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.

• 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".

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.

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.