Tableaux responsive design, quelles approches et quelles solutions ?

Tableaux responsifs, quelles approches, quelles solutions ?

Le thème du Responsive Design et de ses diverses mises en application web reviennent souvent sur ce blog, et pour cause. S'il est relativement aisé de rendre responsive une vidéo ou du texte, il est en revanche déjà plus compliqué de le faire proprement pour une image (quoique) et encore plus pour les tableaux rédigés en HTML.

Ces derniers sont considérés comme l'incarnation du Mal absolu pour certains Talibans du code et par les web designers qui s'arrachent les cheveux à la vue de la moindre balise <table>.. En effet, une DIV est plus propre et plus respectueuse mais on a aussi parfois besoin d'afficher des données dans un tableau.

Nous allons voir ici quelles sont les différentes approches qui existent aujourd'hui pour rendre ces tableaux plus souples tout en conservant un affichage digne de ce nom sur les tablettes et smartphones. Attention, aucune de ces solutions n'est meilleure que les autres. Elles sont simplement différentes les unes des autres dans leurs approches.

Puis dans un second temps, nous verrons comment et pourquoi retenir une solution "Responsive Design" plus qu'une autre afin de vous aider de trouver celle qui vous convient le mieux et qui soit la plus adaptée à votre projet web.

Tableaux HTML responsifs

Différentes approches pour les tableaux responsifs

Dave Bushell

Ce designer propose de renverser le tableau sur le côté lors qu'il est affiché sur mobile.

Projet : http://dbushell.com/2012/01/05/responsive-tables-2/

Démo : https://codepen.io/dbushell/full/wGaamR

Filament Group

Cette approche permettait à l'utilisateur de sélectionner les colonnes à afficher.

Projet : https://www.filamentgroup.com/lab/responsive-design-approach-for-complex-multicolumn-data-tables.html

Ce projet a depuis été remplacé par TableSaw, projet qui se rapproche de la philosophie de Dave Bushell, vu précédemment.

Tableau responsif par filament Group

Stewart Curry

Voilà une méthode qui masque les colonnes les moins importantes. De l'aveu même de Stewart, ce n'est pas une bonne solution.

Projet : http://www.irishstu.com/stublog/2011/12/13/tables-responsive-design-part-2-nchilds/

Démo : http://www.irishstu.com/stublog/wp-content/uploads/2011/12/table-childs.html

Chris Coyer

L'idée de Chris est de regrouper les données de chaque ligne dans une liste pour faire disparaitre les colonnes.

Projet : http://css-tricks.com/responsive-data-tables/

Démo :

Derek Pennycuff

Derek a retenu une approche Mobile First pour obtenir un affichage "Responsive Design".

Démo : http://jsbin.com/arixic

Hannes Krisman

Cette technique permet de générer des versions mobiles des tableaux directement.

Projet : https://gist.github.com/hkirsman/3002480

Démo :

Zurb

ZURB fait défiler horizontalement les colonnes sous la première qui reste fixe.

Projet : https://zurb.com/playground/projects/responsive-tables/

Démo : https://zurb.com/playground/projects/responsive-tables/

Quelle solution Responsive Design choisir pour afficher un tableau ?

Quelles sont les informations essentielles à afficher ?

Pour rendre votre tableau "Responsive Design", il vous faudra faire des choix. Et pour cela, le mieux est encore de se poser les bonnes questions.

Si vous voulez/devez afficher moins de colonnes sur les mobiles, alors vous devez commencer par définir quelles sont les informations essentielles à afficher et quelles seront les informations les plus utiles à les internautes ? Vous devrez donc définir avec précision quelles sont

  • les colonnes les plus importantes pour comprendre le contenu du tableau,
  • les colonnes qui seront les plus susceptibles d’intéresser les visiteurs.

Que faut-il pour différencier une information d'une autre?

Si vous recherchez ligne après ligne une information dans un tableau, quelle information permettrait à une personne Lambda de la distinguer rapidement entre deux lignes ? Ceci est particulièrement important lorsque les lignes sont utilisées dans des applications, par exemple.

Prenons un exemple pour cerner la problématique.
Supposons que vous avez un tableau qui contient des données sur des utilisateurs. L'administrateur peut sélectionner un utilisateur et éditer le compte de celui-ci. Sur les écrans les plus larges, vous pourriez afficher des données comme les préférences d'utilisateur, la date de dernière connexion, etc. Mais sur les écrans les plus petits, il vous suffit de vous assurer que s'affichent les informations essentielles pour que l'administrateur puisse sélectionner le bon utilisateur.

Est-il nécessaire pour que tout soit affiché sur le même écran ou pouvez-vous choisir les informations à afficher de manière conditionnelle ?

Je crois que l'erreur la plus répandue dans ce domaine est d'imaginer ou espérer que "Responsive Design" signifie que l'on va pouvoir tout afficher dans le même document indépendamment de la taille de l'écran.

Imaginons que vous souhaitez afficher un tableau comparatif des cours de bourse de différentes entreprises. Si vous abordez ce projet avec une approche "Mobile first", il est probable que sur mobile, vous aurez les colonnes suivantes:

  • Nom de l'entreprise
  • Symbole boursier
  • Cotation
  • Variation en pourcentage

Si l'utilisateur veut visualiser plus de données, il peut cliquer sur le nom de l'entreprise de son choix pour ouvrir une page de détails et en apprendre plus à son sujet.

Sur un écran plus grand, vous pouvez afficher plusieurs colonnes. Vous pourriez même décider de faire appel à AJAX pour récupérer les données à partir de la page de détail que vous avez construit pour les mobiles.

Tout cela fait sens. On utilise alors l'amélioration progressive basée sur la taille de l'écran.
Par contre, il est amusant de constater que lorsque l'on démarre ce type de projet depuis un grand écran, les utilisateurs ne comprennent plus pourquoi tout le contenu ne affiche pas sur les écrans les plus petits !

Je pense que c'est un truc mental en fonction du point de départ. Si nous commençons à réfléchir à partir du point de vue du portable, nous ne nous limitons pas. Si par contre nous commençons à partir d'un écran d'ordinateur de bureau, nous limitons inconsciemment nos options.

A mon sens, voici ce qui est important quand il s'agit de concevoir un tableau "Responsive Design":

  • Les utilisateurs vont-ils comprendre le sens du tableau dans tous les contextes d'affichage ?
  • Les utilisateurs peuvent-ils obtenir l'ensemble des informations ?
  • Avez-vous fait en sorte que chaque URL soit accessible indépendamment de l'appareil?

Si vous avez répondu OUI à ces trois questions, vous pouvez estimer avoir fait votre job.

Votre contenu dictera la meilleure solution à retenir

Nous l'avons vu, il existe différentes manières d'appréhender et de concevoir un tableau HTML "Responsive Design". Et je m'attends à ce que nous en imaginions d'autres, plus performantes et plus élaborées, aussi.

Mais quel que soit le nombre de solutions existantes que nous aurons à notre disposition dans l'avenir, la façon de choisir la bonne approche pour votre projet restera la même.

C'est votre contenu qui dictera la meilleure solution à retenir pour votre tableau "Responsive Design". Vous avez juste à vous poser les bonnes questions.

Le thème du Responsive Design et de ses diverses mises en application web reviennent souvent sur ce blog, et pour cause. S'il est relativement aisé de rendre responsive une vidéo ou du texte, il est en revanche déjà plus compliqué de le faire proprement pour une image (quoique) et encore plus pour les tableaux rédigés en HTML.

Ces derniers sont considérés comme l'incarnation du Mal absolu pour certains Talibans du code et par les web designers qui s'arrachent les cheveux à la vue de la moindre balise <table>.. En effet, une DIV est plus propre et plus respectueuse mais on a aussi parfois besoin d'afficher des données dans un tableau.

Nous allons voir ici quelles sont les différentes approches qui existent aujourd'hui pour rendre ces tableaux plus souples tout en conservant un affichage digne de ce nom sur les tablettes et smartphones. Attention, aucune de ces solutions n'est meilleure que les autres. Elles sont simplement différentes les unes des autres dans leurs approches.

Puis dans un second temps, nous verrons comment et pourquoi retenir une solution "Responsive Design" plus qu'une autre afin de vous aider de trouver celle qui vous convient le mieux et qui soit la plus adaptée à votre projet web.

Tableaux HTML responsifs

Différentes approches pour les tableaux responsifs

Dave Bushell

Ce designer propose de renverser le tableau sur le côté lors qu'il est affiché sur mobile.

Projet : http://dbushell.com/2012/01/05/responsive-tables-2/

Démo : https://codepen.io/dbushell/full/wGaamR

Filament Group

Cette approche permettait à l'utilisateur de sélectionner les colonnes à afficher.

Projet : https://www.filamentgroup.com/lab/responsive-design-approach-for-complex-multicolumn-data-tables.html

Ce projet a depuis été remplacé par TableSaw, projet qui se rapproche de la philosophie de Dave Bushell, vu précédemment.

Tableau responsif par filament Group

Stewart Curry

Voilà une méthode qui masque les colonnes les moins importantes. De l'aveu même de Stewart, ce n'est pas une bonne solution.

Projet : http://www.irishstu.com/stublog/2011/12/13/tables-responsive-design-part-2-nchilds/

Démo : http://www.irishstu.com/stublog/wp-content/uploads/2011/12/table-childs.html

Chris Coyer

L'idée de Chris est de regrouper les données de chaque ligne dans une liste pour faire disparaitre les colonnes.

Projet : http://css-tricks.com/responsive-data-tables/

Démo :

Derek Pennycuff

Derek a retenu une approche Mobile First pour obtenir un affichage "Responsive Design".

Démo : http://jsbin.com/arixic

Hannes Krisman

Cette technique permet de générer des versions mobiles des tableaux directement.

Projet : https://gist.github.com/hkirsman/3002480

Démo :

Zurb

ZURB fait défiler horizontalement les colonnes sous la première qui reste fixe.

Projet : https://zurb.com/playground/projects/responsive-tables/

Démo : https://zurb.com/playground/projects/responsive-tables/

Quelle solution Responsive Design choisir pour afficher un tableau ?

Quelles sont les informations essentielles à afficher ?

Pour rendre votre tableau "Responsive Design", il vous faudra faire des choix. Et pour cela, le mieux est encore de se poser les bonnes questions.

Si vous voulez/devez afficher moins de colonnes sur les mobiles, alors vous devez commencer par définir quelles sont les informations essentielles à afficher et quelles seront les informations les plus utiles à les internautes ? Vous devrez donc définir avec précision quelles sont

  • les colonnes les plus importantes pour comprendre le contenu du tableau,
  • les colonnes qui seront les plus susceptibles d’intéresser les visiteurs.

Que faut-il pour différencier une information d'une autre?

Si vous recherchez ligne après ligne une information dans un tableau, quelle information permettrait à une personne Lambda de la distinguer rapidement entre deux lignes ? Ceci est particulièrement important lorsque les lignes sont utilisées dans des applications, par exemple.

Prenons un exemple pour cerner la problématique.
Supposons que vous avez un tableau qui contient des données sur des utilisateurs. L'administrateur peut sélectionner un utilisateur et éditer le compte de celui-ci. Sur les écrans les plus larges, vous pourriez afficher des données comme les préférences d'utilisateur, la date de dernière connexion, etc. Mais sur les écrans les plus petits, il vous suffit de vous assurer que s'affichent les informations essentielles pour que l'administrateur puisse sélectionner le bon utilisateur.

Est-il nécessaire pour que tout soit affiché sur le même écran ou pouvez-vous choisir les informations à afficher de manière conditionnelle ?

Je crois que l'erreur la plus répandue dans ce domaine est d'imaginer ou espérer que "Responsive Design" signifie que l'on va pouvoir tout afficher dans le même document indépendamment de la taille de l'écran.

Imaginons que vous souhaitez afficher un tableau comparatif des cours de bourse de différentes entreprises. Si vous abordez ce projet avec une approche "Mobile first", il est probable que sur mobile, vous aurez les colonnes suivantes:

  • Nom de l'entreprise
  • Symbole boursier
  • Cotation
  • Variation en pourcentage

Si l'utilisateur veut visualiser plus de données, il peut cliquer sur le nom de l'entreprise de son choix pour ouvrir une page de détails et en apprendre plus à son sujet.

Sur un écran plus grand, vous pouvez afficher plusieurs colonnes. Vous pourriez même décider de faire appel à AJAX pour récupérer les données à partir de la page de détail que vous avez construit pour les mobiles.

Tout cela fait sens. On utilise alors l'amélioration progressive basée sur la taille de l'écran.
Par contre, il est amusant de constater que lorsque l'on démarre ce type de projet depuis un grand écran, les utilisateurs ne comprennent plus pourquoi tout le contenu ne affiche pas sur les écrans les plus petits !

Je pense que c'est un truc mental en fonction du point de départ. Si nous commençons à réfléchir à partir du point de vue du portable, nous ne nous limitons pas. Si par contre nous commençons à partir d'un écran d'ordinateur de bureau, nous limitons inconsciemment nos options.

A mon sens, voici ce qui est important quand il s'agit de concevoir un tableau "Responsive Design":

  • Les utilisateurs vont-ils comprendre le sens du tableau dans tous les contextes d'affichage ?
  • Les utilisateurs peuvent-ils obtenir l'ensemble des informations ?
  • Avez-vous fait en sorte que chaque URL soit accessible indépendamment de l'appareil?

Si vous avez répondu OUI à ces trois questions, vous pouvez estimer avoir fait votre job.

Votre contenu dictera la meilleure solution à retenir

Nous l'avons vu, il existe différentes manières d'appréhender et de concevoir un tableau HTML "Responsive Design". Et je m'attends à ce que nous en imaginions d'autres, plus performantes et plus élaborées, aussi.

Mais quel que soit le nombre de solutions existantes que nous aurons à notre disposition dans l'avenir, la façon de choisir la bonne approche pour votre projet restera la même.

C'est votre contenu qui dictera la meilleure solution à retenir pour votre tableau "Responsive Design". Vous avez juste à vous poser les bonnes questions.

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

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 de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net