fastclemmy.com

Mauvaise impression

# 26-08-2004

Par le miracle de la séparation contenu/présentation, on est en mesure de créer une version imprimable d'un document HTML sans avoir à refaire deux fois le travail. Ca, vous le saviez sans doute déjà, car vous avez bien entendu lu les articles de référence sur le sujet.

Pourtant, il y a quelques petites choses à savoir avant de s'aventurer dans le domaine...

Pas de bras, pas de chocolat

Ca peut paraître idiot, mais si vous ne spécifiez pas de feuille de style pour l'impression et bien votre site risque fort de s'imprimer... sans style ! Autant dire que ça ne ressemblera pas à grand chose. Ma grande fainéantise sur fastclemmy.com vous donne un exemple concret du résultat que cela peut donner. Donc, même si cela prend quelques minutes, prenez le temps de faire une feuille de style pour avoir un rendu correct à l'impression. Ceci consiste généralement à mettre une police à empattements type Times New Roman plutôt que bâtons, de cacher les éléments de navigation et de spécifier des marges cohérentes. C'est bon ? Testez maintenant !

background-visibility:hidden;

Jusqu'à présent, il y avait deux types de méthodes. Soit l'auteur du site avait prévu une version spécifique pour l'impression s'affichant généralement dans une nouvelle fenêtre, soit l'utilisateur imprimait la page telle qu'il la voyait à l'écran. Dans les deux cas, pas de doute possible, il y avait une concordance entre la mise en forme de l'information sur son écran et sur son imprimante.

Avec l'utilisation des feuilles de style pour l'impression, cette similarité est très souvent mise à mal. Cela est dû notamment au fait que, par défaut, le navigateur désactive toutes les informations concernant les éléments d'arrière-plan (background-color et background-image). La conception par blocs encourageant à utiliser au maximum ces propriétés pour les images illustratives sur les sites, on se retrouve vite avec une page très vide quand on l'imprime "à poil". Difficile de rendre une mise en page sexy quand on ne peut pas jouer avec des images ou des fonds de couleur (regardez par exemple le rendu désastreux à l'impression du par ailleurs magnifique à l'écran PGA.com).

On se retrouve donc coincé entre le marteau et l'enclume, avec une très belle opportunité (la séparation contenu/présentation avec des feuilles de style spécifiques pour l'impression) contrecarrée par un comportement par défaut des navigateurs qui nous limite sévèrement côté créativité. L'idéal serait bien sûr que le navigateur désactive les éléments d'arrière-plan pour les pages ne possédant pas de feuille de style print mais qu'il les imprime dans le cas contraire. En effet, on peut supposer que si une feuille de style pour impression à été mise en place, celle-ci devrait utiliser judicieusement les éléments de background... Euh, on implémente ça dans Firefox 1.0 ?

#xhtmlCSS

A juste titre

# 11-08-2004

Parmi les commentaires laissés suite au redesign de fastclemmy.com (outre les coups de Baygon ;-), Sam (ai-je déjà signalé que j'étais fan de son nouveau design ?) a pointé les incohérences flagrantes du balisage des titres de mon site.

L'occasion rêvée pour moi de réfléchir sur la structure des documents et le balisage des titres avec les balises <hX>. Amusant d'ailleurs, car le sujet a agité la blogosphère anglophone il y a à peine plus d'un mois (lire , , , , et ).

Remarque préliminaire : la réflexion qui suit se base uniquement sur le balisage de ce weblog, d'autres pistes sont bien sûr envisageables pour d'autres types de sites.

La balise <h1>

Commençons donc par le début : <h1>. Il est de coutume de mettre le titre du site web dans cette balise, Zeldman, Denis, la plupart des utilisateurs de Dotclear le font. Logique ? Peut-être, mais il est sûr en tout cas que ceci fait doublon avec la balise <title>, ce qui m'inciterait plutôt à éviter cette habitude. Que mettre d'autre dans ce <h1> dans ce cas ? Du contenu utile évidemment, en l'occurrence pour ce weblog les titres des différents logs.

De plus, cette méthode permettrait de résoudre le cas de conscience qu'ont certaines personnes à utiliser plusieurs fois la balise <h1>. Au passage, rien ne dit dans les spécifications d'HTML qu'il est interdit d'utiliser plusieurs fois cette balise.

Interaction avec la structure

Un autre élément de réflexion qui m'est apparu en abordant ce sujet de la structuration des documents est l'interaction avec le reste du site. Le langage HTML a été conçu au départ pour baliser des documents scientifiques, pas réellement des sites web comme on les conçoit maintenant. Dans cette perspective, faut-il baliser les éléments de navigation avec des éléments de titrage de type <hX> ? Le risque de parasitage du contenu me conduit à penser qu'il vaudrait mieux l'éviter.

En conclusion, je pense partir sur une structure très simple au final : <h1> pour les titres de logs, <h2> pour les sous-titres à l'intérieur des logs. Le reste étant des éléments de navigation ils ne méritent pas de balisage spécifique. Et vous, qu'en pensez-vous ?

#xhtmlCSS

Petit clin d'oeil au WASP, fastclemmy.com se relooke en abandonnant son fidèle réveil bleu pour une piquante guêpe.

En plus du relifting cosmétique (au bout d'un an, toujours à la même heure, ce réveil me déprimait), j'ai intégré un module de fastloglinks (mais si, je vous en ai déjà parlé).

Bugs en tous genres, remarques incendiaires des écrans 640*480, frustrés du weblog à 2 colonnes bienvenus, dans les commentaires...

#nombril