|
|
|
|
|
|
|
|
|
|
- Présentation
- Erreur d'ordre d'affichage et de positionnement
- Exemple
- Explications
Responsive Web Design : Des erreurs d'UI spécifiques
 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.
WEBDEV propose des erreurs d'UI spécifiques à la gestion de la position des champs dans les différentes tranches : - Erreur d'ordre d'affichage : La position du champ <Nom du champ> change l'ordre d'affichage des champs défini dans la tranche de référence (Bureau ou Mobile selon le mode de gestion de la page Desktop First ou Mobile First). L'ordre d'affichage des champs doit être le même dans toutes les tranches.
- Erreur de superposition sur les blocs de positionnement : Le bloc de positionnement responsive contenant le champ <Nom du champ> dans la tranche Tablette est en erreur de superposition.
Si ces erreurs ne sont pas traitées, un comportement inattendu risque d'être observé en exécution. Pour corriger cette erreur, il est possible par exemple : - de déplacer le champ dans la direction conseillée.
- de modifier l'ordre des champs dans la tranche "Bureau".
- de modifier l'ancrage des champs.
- d'utiliser une cellule pour regrouper les champs logiquement.
Erreur d'ordre d'affichage et de positionnement Exemple Dans une page Responsive Web Design, l'ordre d'affichage des champs doit être conservé entre les différentes tranches. Par exemple, il n'est pas possible de modifier complètement l'ordre des champs entre la tranche de référence (Bureau ou Mobile) et la tranche Tablette. Dans certains cas, WEBDEV affiche une erreur d'ordre d'affichage alors que l'interface semble cohérente. En effet, l'ordre d'affichage des champs considéré par WEBDEV dépend de nombreux paramètres : positionnement des champs les uns par rapport aux autres, alignement, ancrages, ... Considérons l'exemple suivant (page créée dans le mode Desktop First) : - En tranche Bureau, trois images et trois libellés sont affichés.
- En tranche Mobile, par défaut, les images des produits sont réduites et tronquées. Pour corriger ce problème, il est nécessaire d'afficher les champs avec la même taille que dans la tranche Bureau et de mettre une image et le libellé associé à la ligne.
- En tranche Bureau, l'ancrage des champs (3 images et 3 libellés) est modifié pour utiliser la taille d'édition en largeur.
- En tranche Tablette, la dernière image et son libellé sont déplacés pour être "passé à la ligne".
- Des erreurs d'UI apparaissent. En double-cliquant sur l'erreur de superposition, la visualisation des erreurs de superposition est automatiquement activée. Un bloc rose apparaît ainsi que des cadres bleu et rouge en pointillés. Ils matérialisent une zone de superposition invalide.
Explications WEBDEV effectue un découpage en ligne par défaut des différents éléments constituant la page. Dans la tranche "Bureau", WEBDEV a donc réalisé : - une ligne pour les images,
- une ligne pour les libellés.
Dans la tranche inférieure (Tablette ou Mobile), WEBDEV découpe de la même façon, une ligne pour les images et une ligne pour les libellés. La ligne comprenant les images et la ligne comprenant les libellés n'ayant plus la même hauteur, les deux lignes se superposent.
Sous l'éditeur, en affichant les superpositions, WEBDEV permet de visualiser cette superposition de lignes : - Le cadre bleu correspond à la ligne contenant les images.
- Le cadre rouge correspond à la ligne contenant les libellés.
Afin de corriger ce type d'erreur de superposition, il faut indiquer à WEBDEV la mise en forme logique. Dans notre cas, chaque champ Image doit être lié à son libellé : - il faut pour cela créer des cellules contenant chaque couple "Image + Libellé". Cette manipulation doit être effectuée dans la tranche Bureau.
- chaque cellule doit avoir l'ancrage en largeur "Largeur fixe".
Il est ensuite possible de déplacer la dernière cellule en dessous des autres dans la tranche Tablette sans avoir d'erreur d'UI. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|