L’un de nos clients souhaitait que quelques tableaux apparaissent sur sa page de tarification afin de présenter une comparaison claire entre son offre et celle de ses concurrents habituels.
Pour les tableaux responsive dans WordPress, faut-il utiliser un plugin de tableau ou HTML/CSS ?
Nous avons testé plusieurs plugins (tels que Tablepress et WP Pricing Tables) mais avons rencontré quelques problèmes car ils n’étaient pas entièrement réactifs (ils ne s’affichaient pas correctement sur les appareils mobiles) et la mise en forme des lignes/colonnes était un peu bizarre sur plusieurs navigateurs, en particulier lorsqu’une colonne contenait plus de lignes de texte que les autres colonnes de la même ligne.
Comme il n’y avait pas besoin d’autres tableaux sur le site, nous avons décidé d’utiliser une combinaison simple de CSS et d’HTML pour obtenir l’effet souhaité.
Un autre avantage d’utiliser votre propre code plutôt que de vous fier à un plugin prêt à l’emploi est que vous pouvez modifier le texte et l’apparence en fonction de la taille de la fenêtre du navigateur. Par exemple, le tableau complet (voir ci-dessous) comporte trois en-têtes de colonnes clairs et du texte dans les colonnes de pied de page qui se rapportent à ces colonnes individuelles (par exemple, « Mauvaises surprises » appartient à la colonne « Concurrent type » et non à mon client).
Lorsque l’affichage est réduit sur un appareil mobile, le visiteur risque de ne pas en saisir toute la signification. Nous devions donc trouver un moyen de rendre la mise en page plus pertinente.
Nous avons codé notre solution responsive HTML et CSS afin de supprimer les en-têtes de colonne « Concurrent type » et « La méthode Verbatim » et de les ajouter au début du texte de chaque colonne pour chaque champ individuel. Nous avons fait la même chose pour le texte du pied de page afin de remplacer les colonnes distinctes intitulées « Pas de frais cachés » et « Pas de mauvaises surprises » par une seule ligne de texte indiquant « Pas de frais cachés et pas de mauvaises surprises ».
Voici à quoi ressemble ce même tableau pour les utilisateurs mobiles…
Le Codage
Notre client peut facilement ajouter des colonnes à son tableau. Ainsi, si vous avez un client qui est prêt à fournir un peu plus d’efforts manuels pour maintenir ses pages, une solution HTML et CSS conçue sur mesure pourrait être la solution la plus appropriée.
Voici quelques captures d’écran pour vous aider à démarrer si vous souhaitez faire quelque chose de similaire vous-même. Tout d’abord, une partie du code HTML que nous avons ajoutée à la page…
… et voici un extrait du CSS. Comme vous pouvez le voir, le point essentiel est l’utilisation intelligente de « display:none; » pour chaque bloc média afin de décider quelle partie du code HTML sera affichée en fonction de la largeur de l’écran…
Et voilà. Tout cela a été réalisé à l’aide d’une simple combinaison de HTML et de CSS. Si vous ne vous sentez pas suffisamment à l’aise pour effectuer ce travail vous-même, n’hésitez pas à nous contacter et à nous demander un devis pour le réaliser à votre place.
0 commentaires