<C²: webløg />

Courriel - email address

Avatar Denis

lundi 23 février 2004
par Denis Boudreau

Maximiser l'usage des CSS

Si vous utilisez déjà les feuilles de style depuis un petit moment, il est probable que vous ayez déjà fait plus ample connaissance avec media="print". Cette sympatique combinaison d'attribut et de valeur vous permet de servir, pour l'imprimé, une version adaptée et optimisée d'un document Web existant sur votre site qui avait initialement été conçu pour être consulté en ligne. Si vous avez poussé l'expérience d'intégration un peu plus loin, vous vous êtes même rendus au point d'adapter votre présentation d'information pour faire disparaître à l'impression certains éléments de votre site qui n'ont plus leur raison d'être sur papier, comme par exemple, votre barre de navigation principale ou ce menu contextuel.

Les plus audacieux ont même peut-être appris à faire usage de la propriété display: none; pour dissimuler certains éléments dans une version qu'ils font afficher dans l'autre, comme par exemple, une image d'entête ou un message spécifique destiné aux utilisateurs d'un médium particulier, quel qu'il soit.

Comme c'est généralement le cas dans plusieurs domaines, avec la technologie CSS, il y a l'outil, et il y a ce que l'on fait avec. Pour repousser un peu les limites de votre imagination et découvrir en quoi CSS peut vous permettre de rehausser l'expérience des utilisateurs sur votre site, payez-vous une visite sur A List Apart, qui publie dans son édition 171 un article de Joshua Porter intitulé : "Designing for Context with CSS".

Parce qu'il est faux de croire qu'une vieille technique est automatiquement connue de tous. Joshua transforme ici une vieille astuce en une expérience utilisateur rafraîchissante et plutôt intéressante qui redéfinit le genre. Comme quoi qu'il est toujours bon de revenir aux sources et de réviser son matériel à l'occasion.

Denis Boudreau | 2004.02.23 @ 18:23

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2004.02.24 @ 01:56 par Elie

Je ne réagis pas sur l'article de Porter, mais sur ton introduction. J'espère donc ne pas être trop hors sujet.
Je fais partie de ceux qui ont découvert et qui utilisent cette technique (media='print' et display:none;), et je me demande dans quelle mesure on peut considérer comme un critère de qualité le fait d'éviter l'impression de données inutiles.

Autrement dit, peut-on considérer ou pas qu'un webmaster qui le fait rend service à ses utilisateurs ?
Est-ce contestable ?
Je me pose plein de questions comme ça, ces temps-ci..

Haut retour au début de la page

2004.02.24 @ 07:57 par CYBERcodeur

Une très bonne question. Personnellement, je crois effectivement que oui, l'optimisation d'un document Web pour l'impression par CSS est définitivement un aspect de qualité. On a qu'à penser à ces millions de sites dont on perd la portion de droite à l'impression parce que le design, fixe, est trop large (ou du moins, plus large qu'une feuille de 81/2 x 11).

Avec CSS, simplement en excluant par {display: none} certaines portions non significatives pour un rendu papier, on maximise l'utilisation de l'espace et par le fait même, l'expérience de l'utilisateur, ce qui est loin d'être négligeable. Dans certains cas plus extrèmes, lorsqu'un réel travail de mise en page est opéré pour l'impression par la feuille de style, on y gagne même les bénéfices autrement seulement atteignables par l'usage de PDF... un gain extraordinaire, considérant que du coup, pour le même résultat, on vient de s'éviter le prérequis d'un module d'extension/plug-in (dans le cas qui nous occupe, Acrobat Reader).

De plus, il n'y a pas d'éléments contestables à cette pratique qui, par définition, est tout à fait transparente à l'utilisateur écran. On pourrait bien sûr mentionner que la fonctionalité n'est pas supportée par NS4, mais de nos jours, qui s'en soucie ?

De toute manière, une construction par blocs {div} aura tôt fait de régler le problème de débordement d'impression pour ces utilisateurs de toutes façons... encore fait-il se détacher de ce vieux paradigme et adopter un modèle de conception basé massivement sur CSS.

Haut retour au début de la page

2004.02.24 @ 08:22 par Emmanuel

Je suis de même avis que Denis. La structure d'un site est totalement différente à celles que l'on retrouve dans l'univers papier. Faire disparaitre les informations de navigation par exemple me semble normal. Autant elles sont utiles dans le contexte écran, autant elle deviennent presqu'anecdotiques sur le papier voire vraiment parasitaires si l'on imprime plusieurs documents d'un même site sur lesquels le menu se ré-imprime constamment par exemple.

Un autre exemple Elie : supprimer l'impression de l'item « retour haut de page » est tout à fait judicieux en l'occurence ; il n'est utile que dans le contexte de la navigation écran.

En revanche, si j'ai bien compris l'article de Joshua Porter, je ne suis pas d'accord avec sa technique d'ajouter du contenu au point que celui-ci soit présent dans le code mais non affiché à l'écran « juste » pour servir le media-print ou d'autres media.

Je ne trouve pas cela pertinent. D'autres en leur temps on détourné des tableaux, on sait pourquoi :-) Je pense qu'il y a plus à chercher vers des solutions XML et compagnie pour livrer le bon contenu au bon medium, dans l'esprit décrit par J. Porter.

Si je reformule et que je force exagérément le trait, j'ai l'impression que J. Porter nous dit : « bourrez votre fichier de contenu et, via des display:none choisissez ce qui s'affichera pour tel ou tel medium ». Ce qui n'est pas pour moi une approche intéressante ni allant dans le sens de la qualité. Maintenant, si ce n'est qu'une entorce pour une ligne ou deux, bah... ça peut apporter un petit plus, mais point trop n'en faut :-)

Néanmoins les CSS pour media='print', « c'est bon, mangez-en » (tm) ;-)

Haut retour au début de la page

2004.02.24 @ 08:35 par gou

Amusant le commentaire d'Élie... je discutais avec une collègue d'un gros ministère au Québec cette fin de semaine et leur orientation est justement toute autre...

La décision est de conserver le on-ne-peut-plus-inutile bouton «printer friendly» au lieu de maximiser l'impression via CSS. L'argumentaire est le suivant: on s'adresse au grand public et certains pourraient être déroutés par une différence entre la page imprimée et l'affichage écran.

On m'a aussi dit que peut-être certains désireraient avoir la navigation du site...

Bon... j'avais abordé le sujet cet automne ( http://www.webmaestro.gou... ) et je dois avouer que la question me turlupinais... doit-on prendre la décision pour l'utilisateur?

Selon moi, mais c'est mon avis, oui. La majorité des utilisateurs vont imprimer un site par nécssité ou par manque de confort avec l'écran. Certains ne réaliseront même pas qu'il y a une différence. De plus, le foutu bouton «printer friendly» n'est pas une solution, surtout pas à long terme!

On fait du design d'interface pour l'écran et lorsqu'on imprime le tout, le design n'est plus applicable. C'est comme de faire une pub télé et la passer à la radio! il faut s'adapter selon le médium.

M'enfin... c'est mon point de vue sur la chose... Peut-être qu'une solution moins radicale à court terme serait appropriée, comme de minimiser l'impact visuel pour acclimater les utilisateurs (bref, que ce soit transparent pour eux...)

Haut retour au début de la page

2004.02.24 @ 08:56 par Emmanuel

> minimiser l'impact visuel pour acclimater les utilisateurs (bref, que ce soit transparent pour eux...)

Oui, c'est surtout faire marche arrière en douceur car on a donné de mauvaises habitudes aux internautes en leur fournissant des versions imprimables et des boutons printer friendly, alors qu'ils ont tous (ou presque) un gros bouton « imprimer » sur leur navigateur.

Et puis n'oublions pas une chose : que savons-nous exactement quant à la façon dont les utilisateurs impriment leurs pages ?

Moi (et d'autres sûrement) recourent à la fonction « imprimer la sélection », après avoir sélectionné la portion de texte désirée, sans les menus et la déco. Et cela, on ne peut absolument pas le savoir (malheureusement) ni le contrôler, or c'est une pratique qui révèle bien qu'une partie d'utilisateurs veut imprimer le contenu et uniquement le contenu. Pire ! Combien, parmi ceux qui aimeraient une CSS print sans le savoir, font des copier-coller dans un traitement de texte pour ensuite imprimer un article ? Beaucoup plus que l'on ne pense ! Et ils solutionnent ainsi un problème à la place des concepteurs qui n'ont pas pensé à CSS print.

Haut retour au début de la page

2004.02.24 @ 09:21 par Olivier

Je pense qu'il faudrait aussi ne pas donner de mauvaises habitudes avec des boutosn 'augmenter la taille de la police' ou 'changer de police', vu que tous les browsers ont ces options, tout comme ils ont un bouton 'imprimer'. Pourquoi répéter dans la page des contrôles existant dans le browser ? Le pire, c'est quand ça fait pas la même chose en plus, ça devient un cauchemar d'expliquer à l'uilisateur qu'il doit utiliser l'un plutôt que l'autre.

Haut retour au début de la page

2004.02.26 @ 07:14 par H_I

Ce que tu dis Olivier, me fait furieusement penser aux sélecteurs de CSS.
Ca aussi, c'est quelquechose qui devrait être d'origine dans les navigateurs.
Et qui n'y est jamais vraiment pratique (on ne garde jamais le style qu'on a choisi dans Mozilla quand on passe d'une page à une autre du même site).

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)