FANDOM


Il y a de nombreuses pratiques wikitexte communes qui, bien qu'utiles pour les utilisateurs avancés sur les navigateurs de bureau, interfèrent avec l'affichage du contenu sur d'autres plateformes (dont les appareils mobiles). Les tableaux imbriqués en sont un bon exemple.

Rappel à propos des bonnes pratiques pour mobile : vous pouvez toujours avoir un aperçu de comment vos modifications s'afficheront sur un appareil mobile en ajoutant ?useskin=mercury à la fin de l'URL ou, si vous utilisez l'éditeur classique, quand vous affichez l'aperçu de vos modifications, en sélectionnant « mobile » dans le menu déroulant dans le coin en haut à gauche de la fenêtre d'aperçu.

Que sont les tableaux imbriqués ?Modifier

Les tableaux imbriqués sont simplement des tableaux contenus dans des tableaux (aussi appelé inception de tableau !).

Voici un exemple de tableaux imbriqués sur la communauté Brave Frontier anglophone. Notez la différence entre l'affichage bureau propre et l'affichage mobile, moins qu'optimale.
Desk Mob

Pourquoi ce serait mal d'imbriquer des tableaux ?Modifier

Vous devriez éviter d'utiliser des tableaux imbriqués autant que possible. Les tableaux, en général, prennent toujours la largeur la plus petite possible et s'étendent même verticalement quand l'espace horizontal est limité. Toutefois, si un tableau est placé à l'intérieur d'un autre, cela force la largeur des cellules de ce dernier à s’accommoder au tableau supplémentaire. En gros, cela force la structure entière du tableau à être plus large que l'espace lui permet. Cela est mauvais en particulier pour l'affichage mobile, comme la taille de l'écran est bien plus petite.

Le résultat : cela cause un tas de défilement horizontal sur mobile (une mauvaise expérience utilisateur) et une bonne partie du tableau est masquée. Si vous divisez les tableaux imbriqués en plusieurs tableaux indépendants, les informations sont affichées de sorte qu'on doit faire défiler la page verticalement, plutôt qu'horizontalement.

Cela permet aussi à chaque tableau d'être plus dynamique. Le formatage du contenu est imposé par la taille de l'écran de l'appareil mobile. Le navigateur déplacera donc les tableaux où ils peuvent être affichés pour améliorer le flux de défilement du contenu global.

Que faire si votre communauté utilise les tableaux imbriquésModifier

Encouragez-les à désimbriquer les tableaux et essayez de créer une infrastructure qui ne dépend pas de tableaux dans des tableaux. Comme indiqué ci-dessus, des tableaux placés les uns à côté des autres peut parfois donner le même résultat. Si le contenu est mieux représenté au format tableau, vous pouvez toujours ajuster les cellules de façon à ce qu'elles semblent être un autre tableau dans le tableau, mais ne reste qu'un seul et gros tableau.

Bonnes pratiques pour éviter les tableaux imbriquésModifier

Comment identifier les tableaux imbriquésModifier

Dans le code source, les tableaux commencent toujours avec le wikitexte {| ou le code HTML <table>. Les tableaux se terminent par le code opposé : |} ou </table>. Donc, si vous voyez un début de tableau et, avant d'arriver à la balise de fin de ce tableau, vous rencontrez un autre début de tableau, cela indique un tableau imbriqué dans un autre. Cela peut atteindre plusieurs niveaux.

Voici un exemple de code source de tableaux imbriqués :
Example code 1024

Comment séparer les tableauxModifier

  1. La première étape est d'identifier combien de tableaux sont imbriqués dans le tableau principal.
  2. La deuxième étape est de trouver le tableau le plus profondément imbriqué, et le retirer de la chaîne des tableaux imbriqués.
    • Cliquez maintenant sur « Aperçu » et vous aurez une idée de ce à quoi ressemble le tableau en lui-même.
    • Après avoir cliqué sur « Aperçu », vous pouvez résoudre les problèmes avec ce tableau s'il ne s'affiche pas comme attendu en vérifiant ses paramètres (le code qui suit immédiatement le début du tableau : {|).
  3. Répéter l'étape 2 tant qu'il y a des tableaux imbriqués

Une fois que vous avez retiré tous les tableaux du tableau principal, vous devriez pouvoir supprimer le code du tableau original. Maintenant, les tableaux doivent être les uns à la suite des autres, pour un affichage optimisé pour le mobile.

Comment conserver l'affichage bureau maintenant que les tableaux sont séparésModifier

Les tableaux doivent être les uns en dessous des autres ou les uns à côté des autres. Cela permettra à votre navigateur mobile de bouger et déplacer les tableaux pour qu'ils remplissent l'espace alloué par l'affichage mobile. Si les tableaux sont côte à côte et qu'ils prennent plus de la largeur de l'écran mobile, le navigateur bougera automatiquement le dernier tableau en-dessous.

Toutefois, un des plus grands défis que vous aurez à relever durant cette phase de positionnement des tableaux sera de trouver un compromis entre comment ils apparaissent sur l'affichage bureau contre comment ils apparaissent sur l'affichage mobile. Cela peut demander d'ajuster le CSS en-ligne pour contrôler comment les tableaux se présentent avec un affichage bureau. Écrire du CSS dans le wikitexte de votre tableau n'affectera que la version bureau, aussi la version mobile sera toujours affichée correctement. Si vous avez besoin de plus d'aide pour le positionnement des tableaux, veuillez consulter la liste des ressources en bas de page.

Plus d'informations utiles sur les tableaux imbriquésModifier

Gardez à l'esprit que, si un modèle est utilisé pour afficher un tableau des pages diverses et variées, corriger le problème de tableaux imbriqués sur ce modèle corrigera aussi l'affichage mobile pour toutes les pages qui incluent le modèle. Cela signifie que appliquer cette pratique d'optimisation à vos modèles peut avoir un grand impact pour la communauté toute entière.

Les tableaux avec des images dans chaque cellule forcera la cellule à se plier à la taille de l'image. Toutefois, les images devraient être redimensionnées pour avoir une taille plus petite et adaptée à l'affichage mobile, ou retirées complètement de la cellule. Si l'image est très large et en dehors du tableau, le navigateur mobile réduira automatiquement sa taille pour l'adapter à l'affichage mobile.

Étude de cas avec la communauté Brave Frontier anglophoneModifier

La communauté Brave Frontier anglophone a été assez sympa pour être nos alliés dans cet effort d'éradiquer les tableaux imbriqués. Nous avons pu trouver l'équilibre entre désimbriquer les tableaux de l'un de leurs modèles les plus importants (le modèle personnage) tout en préservant le look de leur affichage bureau. Le résultat est une apparence mobile améliorée pour un grand nombre d'articles sur la communauté. Voyez par vous-même :

Si vous êtes un administrateur avec des connaissances techniques, et que vous souhaitez voir quelles modifications ont été apportées exactement au code source de Brave Frontier FANDOM pour l'optimiser pour un affichage mobile, vous pouvez consulter le code source avant et après :

Note : ce modèle a été protégé pour éviter les modifications involontaires. Si vous souhaiter copier le modèle pour votre propre utilisation, veuillez copier le code et le coller sur votre propre communauté ou wiki de test.

Ressources complémentairesModifier

Contacter le staff de FANDOMModifier

Vous avez besoin d'aide pour désimbriquer les tableaux sur votre communauté ? Contactez-nous via Special:Contact/general. Veuillez ajouter Mobile: Nested tables sur la ligne d'objet.

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .