Responsive Tables Editor

La genèse et la conception du plugin Joomla "Responsive Tables" répondait avant tout à une problématique client. Il me fallait afficher un tableau contenant des données et que ces données puissent être accessibles également sur mobile car le site était initialement conçu en mode "Responsive Design". Et il faut bien reconnaître qu'en 2013, la tendance web design du "Responsive Design" n'était pas encore généralisée. Depuis, les choses ont évoluées et cette approche est devenue la référence. Quelques mois plus tard écoutant les besoins et les retours de mes clients, j'ai décidé d'améliorer mon plugin. Bien que celui-ci était un produit parfaitement fiable, j'ai souhaitais l'améliorer techniquement tout en essayant de le rendre encore plus simple à utiliser. Dans cette logique, j'ai travaillé sur une conception qui avait pour objectif de :

  • proposer 2 solutions différentes pour rendre un tableau HTML vraiment "Responsive Design",
  • offrir une prise en main intuitive aux utilisateurs ne connaissant pas le HTML.

Resposnive Tables Editor


Tableaux HTML "Responsives Design", quelles solutions ?

Pour rendre un tableau HTML vraiment "Responsive Design", il n'existe pas 36 solutions. Vous trouverez sur ce blog de nombreuses ressources consacrées au "Responsive Design" dont l'article "Tableaux Responsive, quelles approches pour quelles solutions ?" écrit il y a un an (février 2014) et qui traite de ce sujet.
Pour améliorer mon premier plugin, je suis donc parti du code que j'avais déjà conçu puis j'ai élaboré une variante permettant d'obtenir un rendu "Responsive Design" légèrement différent.

Première méthode : flip side

La première méthode pour afficher un tableau "Responsive Design" est assez connue maintenant puisqu'il s'agit du code de mon premier plugin "Responsive Tables".
Le principe est assez simple : sur les appareils mobiles, le tableau "bascule" sur le côté, c'est à dire que la première ligne < thead > du tableau devient la première colonne (la partie jaune sur le schéma n°1).
Il suffit simplement de toucher l'écran avec le doigt pour alors faire défiler latéralement les colonnes du tableau, la première (en jaune sur le schéma) restant toujours fixe et affichée à l'écran.

Description Responsive Tables

La vidéo ci-dessous vous présente les étapes d'installation du plugin ainsi que le rendu à l'écran.

[embed=videolink]{"video":"

","width":"550","height":"309"}[/embed]

 

Seconde méthode : horizontal scroll

la seconde méthode pour afficher un tableau "Responsive Design" est légèrement différente.
Sur les appareils mobiles, c'est à dire pour des résolutions inférieures à 768px de large, le tableau coulisse latéralement (si celui-ci est plus large que l'écran).
Il suffit de toucher l'écran avec le doigt pour déplacer l'ensemble du tableau de gauche à droite afin d'afficher le contenu des colonnes masquées initialement. Dans cette configuration, le tableau ne "bascule" pas sur le côté et la première colonne peut disparaître lors du scroll horizontal. C'est une autre approche du "Responsive Design" qui contribue à améliorer l'expérience utilisateur.

Description Responsive Tables

Screenshots

Description Responsive Tables

Description Responsive Tables

Description Responsive Tables

Description Responsive Tables

Téléchargement

{nicedownloads:20|http://www.web-eau.net/administrator/components/com_nicepaypaldownloads/images/download_button.jpg}

 

Conclusion

Le plugin "Responsive Tables - Editor" se veut avant tout une sorte de laboratoire car je pense que dans un avenir proche, il sera possible d'améliorer encore les aspects liés à l'utilisation en mode "Responsive".
Souhaitant rester fidèle à l'esprit "Open Source" de Joomla, vous avez la possibilité de télécharger gratuitement ce plugin, de l'utiliser sur autant de sites que vous le souhaitez et pourquoi pas, d'en modifier le code source.
Vous pouvez également poster un commentaire sur le Joomla Extensions Directory, partager cet article auprès de vos réseaux et même m'encourager en faisant un don ;)


Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.