Sous les toits

Je craque... je ne voulais pas faire de suivisme là dessus, mais je finis par me résigner  ! Un pur truc de Geek !
CSS oh oui à écouter en ligne avec les paroles à côté !
Là je ne pourrais plus rien dire quand je verrais un de mes stagiaire en train de développer avec un casque scotché dans une oreille. ;-)

Je viens de tomber sur la première page du site DébitCrédit via Eric. Un design sympa en effet ! D'entrée de jeu, je me suis dit "Aïe le référencement"... du texte en image, donc zou le référencement. Puis ça m'a quand même paru bizarre... Un look Web 2.0, ce n'est visiblement pas l'oeuvre d'un amateur... Je désactive les CSS et, oh stupeur ! Je retrouve le squelette exact de la page : tout le contenu en texte ! Parfaite séparation entre le fond et la forme. L'idée est bonne et astucieuse : le texte de base existe dans le code XHTML mais il est ensuite masqué dans la présentation gérée par le CSS. Résultat, visuellement on ne voit que le texte de l'image utilisée en fond, avec toutes les fioritures que cela permet (ombrages, relief, etc.) et un moteur de recherche voit le texte dans le code. Tout le monde est content, c'est joli et efficace ! Tout le monde ? Ben... presque... car à l'écran, on perd toutes possibilités de grossir les polices de caractères. L'accessibilité de premier niveau (juste besoin de grossir un peu le texte) est donc réduite à néant. En revanche, la page offre une accessibilité plus poussée (remplacement des feuilles de style par défaut, lecture du contenu textuel). Dans le cas précis de cette page, un autre petit hic fait son apparition : que se passe-t-il si on essaye de l'imprimer ? Le texte est masqué, or, le navigateur de monsieur tout le monde n'imprime pas les images de fond... l'angoisse de la page blanche (ou presque) ! Rien de dramatique (et je suis prêt à parier que ce sera corrigé d'ici peu), il aurait suffit de préciser au navigateur que le CSS ne doit agir que sur l'écran, ou qu'on lui en donne un autre pour l'imprimante.
Ma conclusion ? Une astuce astucieuse, du joli presque compatible, ça doit pouvoir dépatouiller bien des cas difficiles à mon avis, même si ce problème de polices me gène un peu...

EDIT : Apparemment, j'ai vexé Olivier, le webdesigner qui a créé le design de DébitCrédit. Oops ! Je tiens à m'en excuser platement ! Si j'ai écris ce billet, c'est tout simplement parce que je trouvais sa technique très intéressante ! Respect des standards et visuel au top ! Et cela me semble particulièrement approprié pour ce type de pages. Après, dans un second temps, j'ai élargi un peu pour voir jusqu'où pouvait aller cette astuce et trouvé une petite limite qui peut gêner en production sur des pages d'un type différent, là, une telle utilisation serait donc à étudier au cas par cas. Mais mon cher Olivier, je tiens à le préciser, cela n'enlève en rien toute la qualité de cette page (en espérant en voir plus bientôt) que je trouve particulièrement bien fignolée ! Ah... si j'avais un peu plus de crédits pour le site de l'assoc pour laquelle je bosse, je crois que je signerais.