Depuis le dernier article concernant les tableaux comparatifs, 10 tables de prix HTML / CSS en 2013, quelques technologies se sont imposées et surtout, le responsive qui est aujourd’hui incontournable. Pour un projet récent, j’ai du faire quelques recherches pour rendre mes tableaux adaptables aux différents écrans.
La liste ci dessous permet d’obtenir plusieurs types de présentations pour différents objectifs : simple tableau comparatif responsive, affichage de données et formatage des informations en fonction de la taille écran.
Flat pricing tables for twitter bootstrap
Free responsive pricing table startup framework
Pure CSS Responsive Accordion Table
Tableau comparatif responsive et table de données
Les quatres premières ressources permettent d’afficher des tables de prix. Option qui s’est maintenant démocratisée et que l’on voit sur beaucoup de site. Ces ressources s’adaptent parfaitement à tous les écrans, ce qui a été LE critère pour être sélectionnées dans cette liste. La deuxième ressource, Responsive Flip Pricing Table, fait le même travail mais apporte une petite originalité : vous pourrez afficher des prix mensuels ou annuels en glissant l’option au dessus du tableau. Un effet « flip-flap » des plus classes est lancé. J’avoue que ce dernier m’a beaucoup intéressé.
Et les trois dernières ressources, quant à elles, permettent de présenter des tableaux de chiffre. Le principe est de « déplacer » les entêtes de colonnes sur la gauche quand l’espace d’affichage devient trop petit. Toutes les informations sont alors disposés en colonne et restent ainsi toujours lisibles. Simple et efficace. L’effet « accordéon » de la dernière ressource permet de « compresser » les informations et l’internaute n’aura pas besoin de scroller jusqu’en bas de l’écran pour tout lire.
Licence : voir fichier avec la ressource
Sympa votre site l’image de fond 🙂 C’est vrai que maintenant ont ni échappe pas au full responsive surtout avec les mobiles et tablette
A l’ancienne le modem qui faisait des bruit téléphonique , sa me fait pensais en lisant ta bio , pour ma pars c’est ma première console de jeux que je me rappelrais toujours aux commencement la bonne vieille nes nitendi avec mario , zelda , aprés je sais plus avec quelque pc je jouer au vieux jeux , mais il était tellement bon wolfeintsen je crois ou doom , un jeux avec les allemand et les passage secret :p
Merci… yeap, je me souviens très bien d’avoir installé Doom sur mon 486sx25 🙂 Mais, j’attends avec impatience DOOM 4 🙂 c’est pour mai prochain, si je ne m’abuse pas. @ bientôt sur FT…
Bonjour c’est vraiment toute une galère le responsive design sur wp , je me nome Vladimir , débutant en référencement création de site , j’ai décider par moi mème de créer mon petit site en m’aidant beaucoup de tutoriel et partage , je doit vous dire merci votre articles ma aider , après le mettre en pratique va être une autre histoire
Merci du partage 🙂