A partir de la version "Update 3" de WEBDEV 21, l'éditeur de pages lorsque l'édition est faite en mode Responsive Web Design, permet de visualiser les blocs de positionnement des champs.

Pour afficher les blocs de positionnement, sous le volet "Affichage", dans le groupe "Aide à l'édition", cliquez sur "Bloc de positionnement".

Il est très important de toujours conserver l'option active, afin de visualiser les blocs de positionnement, et les positions des champs les uns par rapport aux autres. Rappelons en effet que le principe d'une page Responsive Web Design, et d'avoir ses champs qui vont se positionner les uns par rapport aux autres en fonction de la taille du navigateur, des règles définies via les ancrages et la grille de positionnement.

Dans la page illustrée ci-dessous, grâce à l'activation de la visualisation des blocs de positionnement, on voit pour le champ sélectionné :

  1. le rectangle pointillé dans lequel l'éditeur regroupe les champs (le bloc de positionnement),
  2. à droite de quel élément sera placé le champ : ici l'image sera toujours et dans tous les tranches alignée sur le bord gauche de la page,
  3. en dessous de quel élément sera placé le champ : ici l'image sera toujours placée sous le libellé "Connexion" de la page. Attention, "au dessous" ici doit être pris au sens de la verticalité dans la page, pas de la superposition.

 

Ces informations sont très importantes, car la position des champs les uns par rapport aux autres est figée dans toutes les tranches : dans la tranche bureau, la tranche de référence, l'image est placée dans la page en appliquant ses ancrages et en fonction du libellé "Connexion". Dans toutes les tranches, l'image sera placée en fonction de la position du libellé "Connexion". On sait donc grâce à la visualisation des blocs de positionnement :

  • de quoi dépend la position d'un champ,
  • où un champ ne pourra pas être placé dans la tranche tablette, ou la tranche mobile.

Les erreurs d'IHM mentionnent les éventuelles erreurs de positionnement.

 


Astuce
: l'ordre des champs les uns par rapport aux autres est figé dans toutes les tranches. Par contre, la visibilité des champs ainsi que leurs positions peuvent être surchargés. Dans un exemple comme ci-dessus, si l'on souhaite avoir dans une tranche un champ qui ne conserve pas sa position de référence définie par la tranche bureau, on peut utiliser deux champs et jouer sur leurs visibilités. Exemple pour avoir dans la tranche mobile une image placée avant le libellé "Connexion", alors qu'elle est après dans la tranche bureau :

  • l'image placée sous le libellé "Connexion" est rendue invisible dans la tranche mobile :

  • dans la tranche mobile, l'image créée spécifiquement pour cette tranche est rendue visible, l'inverse de l'image utilisée dans la tranche bureau.

 

< Retour

Publier un commentaire : 
Votre adresse email ne sera pas publiée