21

J’ai utilisé un tableau, c’est grave docteur ?

… il y a encore parfois, et ça me peine de le dire croyez-moi, des différences entre la théorie et la pratique…

Edit du 09/02/07 : vous pouvez enfin voir la grille finale répondant à cette problématique et télécharger les fichiers sous forme d’archive RAR (28ko).

J’en discutais pour la première fois il y a environ 1 an lors de l’un des premiers “Paris Blogue-t-il ?” avec Fred Cavazza que j’avais eu le plaisir de rencontrer lors de cette soirée…
Il me disais en gros qu’il ne croyait pas à la faisabilité d’un 100% accessible dans 100% des cas sur 100% des projets, etc. Que parfois, on ne peut pas se plier à toutes les contraintes des standards, que cela dépends de la cible, de la nécessité, des budgets, des plannings, des désirs du client, etc. (Fred tu ne m’en voudras pas d’avoir condensé autant ton discours, je ne crois pas en avoir manqué l’essence sinon n’hésite pas à me corriger !!)
Évidemment, en bonne ayatollah des standards que j’étais alors, j’étais courroucée ! :)
J’ai soutenu mordicus qu’il était toujours possible d’appliquer les standards, qu’il le fallait surtout, qu’il fallait se faire violence (va dire ça à Carlos Ghosn, tiens), que le temps on le trouve, bref, j’étais super remontée !! Il a d’ailleurs fallût m’arracher manu militari de cette conversation… :)
J’ai eu de nouveau cette discussion avec Samuel Latchman que je rencontrais, avec plaisir là aussi, mercredi soir, et j’étais d’accord avec lui, bien qu’il me tînt le même discours que Fred 18 mois avant…

Qu’est-ce qui a changé ??

Je ne dirai pas que je ne crois plus à tout ça, mais j’ai mis de l’eau dans mon vin… me suis-je corrompue, me suis-je perdue ? Je me le demande aujourd’hui, il faut après tout savoir se remettre parfois en question.
Depuis 3 ans que je fais ce métier en freelance (et 8 ans que je fais des sites tout court), j’ai eu la chance de participer à des projets de toutes tailles et pour tout type de public : gros sites institutionnels, sites plus petits et plus “cosy”, sites de commerce, etc.
Chacun de ces sites avait des contraintes spécifiques : budget, planning, cible, modularité, stabilité…
Pour certains, j’ai pu faire “ce que je voulais”, et aller aussi loin que je voulais : y passer plus de (mon) temps pour trouver la solution full-CSS (tout en maugréant sur le ou la DA derrière la maquette), imposer certains choix graphiques ou techniques… même si il ne m’était pas toujours spécifiquement demandé de faire du 100% accessible et du 100% standard.
Pour d’autres, j’ai dû ravaler certains de mes principes et “faire avec”… pas le temps, pas la volonté côté client (voire une volonté inverse, mais ça reste extrêmement rare, parce que dans ce cas ils ne viennent pas me voir moi (edit : je viens de me souvenir qu’une fois on m’a demandé des tableaux pour une borne tactile… là, ok, effectivement.)), pas “possible” à cause de la maquette, j’en passe…
Pour d’autres encore, j’ai eu l’immense plaisir de tomber sur des gens ouverts, voire même intéressés, impliqués, exigeants même, et qui acceptent aussi les compromis (les bords des boutons en css plutôt qu’un fond d’image juste parce que sur la maquette les coins haut gauche et bas droit étaient d’une 3ème couleur… eh bein tant pis pour les coins), qui connaissent OpQuast (si-si !!!) et veulent s’en servir (j’ai failli m’évanouir ce jour là :P ), qui vous renvoient votre première livraison avec une petite note “la home page ne valide pas, pourquoi ? :)” !! (en l’occurrence l’utilisation “justifiée” d’un onfocus et un onblur, que j’ai même eu le plaisir de discuter avec lui)… Et là, c’est le pied ! :)
Il se reconnaîtra si il me lit… Bonjour Christian ! ;)

Mais voilà, ce dernier cas est rare…

Jusqu’ici cependant, je n’avais jamais eu recours à un tableau pour me “sauver la mise” sur une maquette…

Alors je me demande si j’ai bien fait ?
Parce que déjà, c’est ma maquette, j’avais qu’à réfléchir avant de la faire valider… :)
Et puis parce qu’il ne s’agit “que” d’un “tout petit” tableau de 3 colonnes, 2 lignes, 5 cases, donc vraiment pas grand-chose, et il me semble avoir déjà lu que tant qu’il se linéarise bien (et c’est le cas, j’ai vérifié avec la Web Developper Toolbar pour Firefox), un tableau ultra simple peut se justifier pour une mise en page 3 colonnes… surtout quand on a des fonds un peu spéciaux !
Bon, vous me direz, avec mon tableau là, je n’ai toujours pas exactement les fonds comme je les voudrais non plus, alors bon… :)

Je me dis que si je lui colle une description genre “Tableau de présentation à 3 colonnes : annexes 1 à gauche, contenu au centre, annexes 2 à droite” par exemple, ça devrait aider… mais serait-ce suffisant ?

Et puis je me demande si je n’aurai pas dû mettre mon header en dernier dans mon code xHTML et le positionner après en CSS ? (quoi que comme il contient pas mal de trucs, genre actu, je me dis qu’en premier c’est peut-être pas si mal…)
De toute façon j’ai mis un “prelude” de plusieurs liens d’accès directs… que j’ai caché avec un position: absolute; et un top: -100em;… mais là encore, est-ce la meilleure manière de le faire, au vu des différences entre les différents navigateurs alternatifs… ??

Bref, toujours est-il qu’avec mon tri-colonnage, la liste des navigateurs à supporter, mon fond tramé et mes foutus satanés pieds de colonne à bords perdus… bein y’a encore qu’avec mon tableau que j’arrive à remplir toutes les contraintes… (je n’arrive à rien avec les height: 100%; j’ai dû rater un truc) Et puis, là au moins l’ordre est bien annexe1-contenu-annexe2 alors qu’avec les solutions full-CSS testées avant de passer à mon tableau, j’avais plutôt annexe1-annexe2-contenu, ce qui me plaisait déjà beaucoup moins…
Et aussi, je n’aimais pas forcément l’idée d’encapsuler le tout dans 4 ou 5 divs, je trouvais ça “cracra”… et pas le tableau… je dois être malade ?! (un rhume de cerveau, probablement :P )

Alors du coup, je me demande si je n’ai pas cédé à “la facilité” ou si je ne me trouve pas des “excuses”, étant en plus de tout le reste un poil pressée par le temps ?
Je ne le pense pas, mais je me suis dit qu’une petite consultation populaire ne pourrait pas faire de mal non plus, après tout… :)

Alors voilà, je vous livre une copie d’écran de mon bas de page (simplifié et contrasté pour la démo) pour que vous compreniez cette histoire de colonnes à bords perdus et de fonds tramés… (en fait je me dis que je suis un peu tombée dans le piège de la graphiste print qui fait du web, et pourtant je ne viens pas du tout du print, comme quoi…)

Je vous donne aussi le squelette de l’xHTML “incriminé” pour que vous me disiez ce que vous en pensez, si c’est “vraiment grave, docteur” ?

Et alors si en cours de route vous avez une idée de génie pour avoir les *** de colonnes sans utiliser de tableau ET que ça tienne super bien la route sur tout un paquet de navigateurs ET que l’ordre du contenu soit (plus) logique… bein franchement, je prends !!
Je ne sais pas comment je pourrais remercier l’éventuelle bonne âme qui m’aurait aidé, mais je suis sûre qu’on trouverait une solution… :)

Parce que là, quand même, quand bien même je pense savoir ce que je fais, bein je me pose des questions… Y’a tellement d’informations, de méthodes, d’articles, à la fin c’est dur de faire le tri !!
Un de mes clients, le fameux, me faisait remarquer l’autre jour, suite à notre conversation-débat sur onfocus/onblur : “Je constate que css/xhtml n’est pas un long fleuve tranquille…” (quand je vous dis qu’il est super)…
Bein, il pouvait pas tomber plus juste ! :)

Bon, en même temps, c’est ça qui est excitant dans le métier, ça change tous les jours, ça évolue, ça vie quoi…
Mais je comprends aussi que ce soit un peu “écrasant, étouffant, impressionnant” pour les débutants, ceux qui se reconvertissent ou même les clients…

Et parfois, aussi, pour ceux qui sont pourtant habitués à utiliser ces outils tous les jours au max de leur possibilités… :)

Après cet appel du pied des plus élégants et raffinés, j’espère vous lire rapidement, avoir votre avis sur les thèmes évoqués ici, et, sait-on jamais, peut-être une solution ?! :D

NB: très ironiquement, à suivre, la traduction de “Why Standards still matter“… :)

PouipouiDesignJ’ai utilisé un tableau, c’est grave docteur ?

Commentaires 21

  1. Rémy

    Bonjour, je te lis depuis très peu de temps, ( j’ai mis ton blog dans mon onglet accessibilté de google reader suite à ton article : Traduction : Mythes et Idées fausses sur l’accessibilité ). je te connais donc e ncore peu, mais en tant que "spécialiste accessibilité" je ne comprends pas ton probleme sur cette maquette. j’ai sûrement loupé quelquechose dans ton post ( peut -etre à cause de sa logueur, son manque de concision) car je n’ai pas l’impression que cette maquette pose de réel probleme de ralisation full-css.

    Peut etre peux tu résumer ton probleme en 3-4 ligne histoire de bien le formuler ?

  2. Marie ALHOMME

    > Elie : merci du lien, je devine que selon toi je ne devrai pas m’auto-flageller pour cette petite table ?

    > Rémy… euh… je suis désolée que ton style ne te convienne pas, mais en l’occurence mon problème est bien exposé : j’ai 3 colonnes avec des pieds à bord perdu gris, le tout sur un fond tramé, j’ai besoin d’une solution où l’ordre html est logique, qui "passe sur tous les navigateurs" sans avoir à faire des pieds et des mains et sans encapsuler 5 divs les uns dans les autres, et qui me permets d’avoir ces fameux pieds de colonne à bord perdu…
    Sans tableau, à l’heure actuelle, je n’ai pas trouvé de solution (bien que déjà ça ne marche pas exactement comme je voudrai pour mes pieds de colonne) qui réponde à tous ces critères…
    Si je pouvais me passer de mes pieds de colonne, je serai sans nul doute moins dans le popo et je ferai du full-css, mais là en l’occurence…
    Donc si tu as une solution, comme je le disais, elle sera la bienvenue !

    Merci de vos lectures et de vos commentaires, à très bientôt sur le site (ou irl) j’espère ! :)

  3. David Gall

    Je ne prétends pas dominer le sujet mais je relève le défi. Je (re)découvre le web "propre" par le biais de ce site donc j’avais envie de mettre la main à la pâte et c’est l’occasion avec cet exercice : david.gall.free.fr/templa…

    En espérant que cela soit correct ou du moins que cela amorce des pistes.

  4. Marie ALHOMME

    Bonjour David !
    Je te remercie, tout d’abord, de t’être penché sur le sujet !!!
    Je trouve ta solution très très chouette, le seul et unique truc qui me chiffonne c’est l’ordre guache-droite-centre du code html…
    Défi n°2 : Crois-tu que tu saurai y remédier ? :D
    Si oui, je sais pas comment je te remercierai, mais je trouverai bien :) et en tout cas je te serai vraiment redevable, c’est sûr !
    So, tu relèves ? :)

  5. David Gall

    Il est vrai que c’est le point noir qui me chagrinait aussi.

    J’ai pas trop avancé aujourd’hui, il faut que je taff sinon les coups de batons vont tombés. lol
    Je regarderais ça plus tard, promis. ;-)

  6. Marie ALHOMME

    :) Pas de souci, je vais moi aussi mettre le nez dedans ce soir, car ta solution me plaît décidémment beaucoup, chuis même dégoûtée de ne pas y avoir pensé moi-même ! ;)
    Je te/vous ferai savoir si je trouve la solution qui va bien !
    Encore un immense merci !

  7. David Gall

    Difficile de lacher l’affaire lorsque l’on sait que ce n’est pas aboutit…

    Alors voilà: 2 templates pour le prix d’un.
    david.gall.free.fr/templa…
    david.gall.free.fr/templa…

    A priori les 2 solutions fonctionnent (testé sous Win IE, Win Firefox, Mac Firefox, Mac safari) mais j’ai une préférence pour la V3. Maintenant j’ai pas testé ailleurs, donc je ne pourrais me prononcer plus au niveau de la compatibilité.

    N’étant pas expert, je ne sais pas si tout est correctement écrit mais j’espère que ça va t’aider et que tu pourras en tirer quelque chose. En tout cas, moi j’ai appris : merci pour l’exo lol :-P

    A pluche

  8. olipeos

    Bonjour, maintenant que tu sembles avoir trouvé une solution sans tableau et satisfaisante as-tu retiré l’eau de ton vin et retrouvé ton intransigeance d’Ayatollah :-P ?

    Pour info, pour ceux qui souhaitent tester le rendu visuel avec différents navigateurs sans forcément les avoir sous la main:
    http://www.scapture.com/ : captures d’écran d’un site sous plusieurs navigateurs
    http://www.danvine.com/icapture/ : Capture d’écran sous safari/mac

  9. Marie ALHOMME

    Bonsoir !

    Désolée de ne pas vous avoir répondu plus tôt, et encore merci de votre aide !!

    David, ta solution me plaisait bien mais j’ai eu un souci avec la position absolute des colonnes, qui précluait le zoom et d’avoir des colonnes latérales plus longues que le contenu, ce qui était pourtant amené à arriver… Un trop gros frein malheureusement !

    Avec le développeur du site, on a donc tout repris à zéro… on est reparti de l’excellent article The Holy Grail sur A List Apart, et on a trouvé un gabarit-compromis qui satisfaisait toutes les contraintes… Dès que j’ai 5 minutes je vous le mets à dispo en téléchargement en version dépouillée !

    Encore merci, donc !!

    Olipeos, oui, je suis redevenue intraitable… ça me manquait ! :)

    En ce qui concerne les sites pour faire des captures, je recommande l’excellent Browsercam, certes payant mais au combien riche en possibilités… j’avais d’ailleurs il y a quelques temps écrit un article sur le sujet

    Euh, mais sinon, y’aurait pas du boulot de par chez toi par hasard ?… :D

    Bref, encore merci de vos visites et commentaires, et à très bientôt !!

  10. chris

    Et bien alors, Marie, en 3 mois, toujours pas trouvé les 5mn pour mettre la version dépouillée en téléchargement ? ;-)

  11. chris

    Merci !
    Mais, tout ça, c’est en figeant les largeurs d’affichage. Ce qui n’est pas tout à fait l’idéal, à mon très humble avis.
    Moi, ce que j’ai toujours cherché à faire, c’est la même chose, mais avec un affichage pleine largeur, et des bandeaux latéraux à largeurs relatives (em) et une colonne centrale qui utilise le reste de la largeur.
    J’y arrive plus ou moins, mais il y a toujours des inconvénients, alors je croyais avoir trouvé ici la formule miracle ;-)

  12. Marie ALHOMME

    Hello,

    je ne suis moi-même, en tant qu’utilisatrice, pas une grande fan des designs fluides qui s’adaptent à la largeur de l’écran… sur des écrans très large (genre 16/10), ça fait des longueurs de lignes désagréable à lire… ni de ceux qui zooment aussi en largeur sur mon écran d’ailleurs.
    Il me semblait d’ailleurs que c’était plutôt clair sur la capture d’écran mentionnée dans l’article… faut tout lire hein :)
    Cela dit, il faut voir mais il est fort possible qu’il soit possible ^^ … de modifier cette grille pour fonctionner avec des largeurs en em ou %… je te laisse faire des tests !! :)

    Tiens-moi au courant, à bientôt, Marie

  13. chris

    Et bien sur ce point, nous ne sommes pas tout à fait d’accord ;-)

    En effet, je considère que c’est à l’utilisateur (accessibilité oblige) d’adapter son environnement.
    S’il a un écran large, ce n’est normalement pas pour avoir une fenêtre de navigateur qui prenne toute cette largeur. Sinon, à quoi cela sert-il s’il tombe justement sur des sites qui vont lui mettre 2 bandeaux complètement inutiles sur les côtés ?

    Il n’a qu’à réduire sa fenêtre en fonction de ses préférences (longueur de lignes), cela lui laisse ainsi une place sur son affichage écran pour avoir sa fenêtre MSN ;-).
    Par contre, s’il fait ça, celui qui a imposé sur son site une largeur d’affichage risque lui provoquer des désagréments comme le scroll horizontal (chacun de choisissant pas la même largeur fixe).

    Pour moi, par essence même, figer une largeur, c’est aller à l’encontre de l’accessibilité (*). L’accessibilité, n’est-ce pas aussi (surtout?) laisser le choix à l’utilisateur sans lui imposer ce genre de préférence ?

    (*) Mais c’est vrai que c’est clairement beaucoup plus simple à développer, et là, sans tableau. :-)

  14. chris

    > Il me semblait d’ailleurs que c’était plutôt clair sur la capture
    > d’écran mentionnée dans l’article… faut tout lire hein

    Ben, très franchement, j’ai tout lu la première fois. Et même maintenant, avec ce lien, je ne vois pas où c’est mentionné.

    Mais quand bien même ça l’aurait été, ça ne m’empêche pas de penser ce que je pense, et de chercher ce que je cherche :-)

  15. Marie ALHOMME

    Je ne pense pas que nous terminerons ici le débat sur fluide vs fixe, il existe depuis trop longtemps et est trop complexe. Il nous suffira de savoir que nous ne sommes pas d’accord, mais je ne pense pas que l’un ou l’autre aie tort.

    Et je ne relèverai pas la pique (que je décide être amicale et ironique) sur la « facilité » de ne pas développer accessible car je sais pour un fait que ce n’est pas comme ça que je travaille ni que je suis perçue…

    Enfin, concernant la capture d’écran : avec des ombrés à droite et à gauche je vois mal comment (à moins de faire des montages tarabiscotés et probablement pas très sémantiques) il pourrait y avoir un ombré en bord de site (lié au tramé du fond) si il n’y a pas de largeur fixe, mais c’est un autre débat, la prochaine fois j’expliquerai tout avec des tonnes de détails même pour les choses qui me paraissent évidentes, comme ça je ne pourrai rien me reprocher ^^ »

    Bref, désolée que tu n’ai pas trouvé ton bonheur, j’espère que ça servira à d’autres, et bon courage pour trouver ce que tu cherches…

    Mais au fait, as-tu seulement essayé la solution que je mentionne avant d’aller voir ailleurs, ou veux-tu juste vraiment du « tout fait » sans avoir à réfléchir/bosser ?? ;)

  16. chris

    Je ne cherchais absolument ni à lancer une polémique, ni à dénigrer qui ou quoi que ce soit. J’ai juste donné mon sentiment, et ça s’arrête là.
    Concernant le "tout fait", non, ce n’est pas ce que je cherche. Et, oui, j’y ai bossé, plutôt 2 fois qu’une. J’ai fait des choses qui fonctionnent à peu près, mais pas parfaitement. Je suis obligé de "bidouiller" et parfois de refuser des contraintes, ce qui m’embête profondément.

    La solution que tu proposes, non, je ne l’ai pas essayée, juste regardée, mais c’est tout simplement parce que ce n’est pas ce que je cherche, à cause de la largeur fixe.

    Et des solutions à largeur fixe, j’en ai déjà vu plusieurs sur le net, plus ou moins propres, plus ou moins bidouille. Et puis, à la limite, je pense bien être capable de me le faire moi même si j’en ai besoin.

    Je répète donc, sans que ce ne soit une pique, que c’est largement plus facile de faire en largeur fixe, mais que, ce n’est pas ce qui correspond à mes choix. C’est un constat, c’est tout.

  17. Marie ALHOMME

    ^^"

    … tu ne m’as pas toujours bien comprise/bien lue, quand je te dis de tester ma solution, c’est de tester cette solution mais avec des % et/ou des em, puisque c’est ta demande, parce que je n’ai pas essayé mais il est fort possible que ça fonctionne !
    Fais-nous savoir !

    Ah, et sinon aussi, tant mieux si ton intention n’est pas de polémiquer :)

  18. Crazyfaboo

    Salut !!!

    Sympa ce petit billet ;-) … mais je dois te dire que le tableau répondant à la problématique déconne sur Opera 9.21… encore une histoire de bordure (sur le header). La solution n’est donc pas totalement bonne… et l’espace blanc (sur fond gris) entre les 2 paragraphes de la colonne de droite, est-il normal ?

    Je vais me pencher sur le problème… A mon avis (à priori, je précise), c’est faisable sans difficulté pour tous les navigateurs autres que IE 6 et 5.5… mais je suppose que tu avais pour contrainte de garde la rétrocompatibilité avec ces poubelles du web (au moins le 6)…

  19. Marie ALHOMME

    Bonjour Crzayfaboo.
    Je ne suis pas sûre que tu aie bien lu le billet et les commentaires qui vont avec : le tableau a sauté depuis longtemps, le site a été réalisé en divs et il a bien entendu été testé sous Opera 9 et ce sans problèmes apparents (ainsi qu’une trifouillée de navigateurs, dont en effet IE5, 5.5, 6, NN7, Firefox 1.5/2, Opera 8/9 et Safari 1.2-1.3/2.0).
    Je t’invite à le consulter sur http://www.luberon-news.com
    Quand à la grille de divsproposée dans ces commentaires, elle n’est pas bonne et j’ai tout sauf le temps de m’en occuper maintenant.
    Il suffira donc aux intéressés de repartir de ce qui se trouve sur le site Luberon News…
    Je t’invite donc à faire cela plutôt que de repasser du temps sur une solution qui est fonctionelle et déjà en place, mais je te remercie de l’intention !!
    Marie

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *