Comme je l'ai annoncé dans le billet Votre site tout nu (je tente d'y maintenir la liste des participants francophones à jour), à partir de ce soir minuit (et pour 24 heures) je vous présenterai Webatou sous une forme très dépouillée.

Un peu de théorie

Une page Web est constituée de lignes de code utilisant un langage de présentation, le HTML ou XHTML. Vous pouvez voir ce que cela donne en cliquant sur Code source de la page dans le menu Affichage de votre navigateur.

Vous y retrouverez tout le contenu que vous pouvez lire sur cette page encadré par des balises qui en indiquent la valeur sémantique (un titre, un sous-titre, un paragraphe, une citation, une liste...) et permettent de le structurer de manière logique, par exemple pour des sous-titre :
<h2>Un sous-titre de niveau 2</h2>

Jusque là, rien ne permet d'ajouter une touche de mise en forme (couleur et taille du texte, apparence des liens...) ni de mise en page (position des différents blocs tels que le contenu, les menus...). C'est le rôle des feuilles de style (CSS), par exemple si je veux que mes titres de niveau 2 soit en rouge et alignés à droite :
h2 {
color: #FF0000;
text-align: right;
}

C'est le principe de la séparation du contenu et de sa présentation. La première recommandation du W3C pour l'usage des feuilles de style a été publiée le 17 décembre 1996, avant cela il n'y avait pas d'autre solution que de définir la mise en forme dans chaque balise, par exemple :
<H2 align="right"><FONT color="red">Un sous-titre de niveau 2</FONT></H2>

Chaque fois qu'un sous-titre de niveau 2 était utilisé, il fallait répéter les règles de sa mise en forme. En utilisant les CSS, la règle peut être définie une seule fois dans un fichier séparé et sera appliquée automatiquement à chaque utilisation de la balise <h2>.

Avantages évidents : le poids de la page est souvent diminué de moitié (donc plus rapide à télécharger et consommant moins de bande passante), la maintenance du site est facilitée (une seule modification à faire pour changer une mise en forme, dans la feuille de style).

Quand vous affichez une page avec un navigateur graphique (Firefox, Opera, Safari...), un rapide coup d'oeil vous permet généralement de repérer les titres et les paragraphes, les menus... quelque soit leur emplacement dans la fenêtre, quelque soit leur emplacement dans le code de la page. Il n'en va pas de même pour les utilisateurs de synthèse vocale, de navigateur texte ou encore pour les robots des moteurs de recherche. Ces outils interprètent le contenu dans l'ordre où il apparaît dans le code. Ainsi la lecture d'une page deviendrait assez cahotique si, contre toute logique, les sous-titres étaient lus avant le titre principal.

Demain sur cette page, vous verrez donc dans l'ordre

  • le menu d'évitement (accessible où que vous soyez dans la page avec la touche Home ou Haut de votre clavier) qui permet d'atteindre directement le début des parties principales de la page
  • le contenu (c'est à dire les différents billets)
  • le menu
  • le pied de page avec les liens habituels Contact... (toujours accessible directement avec la touche End ou Bas de votre clavier

La mise en forme (couleur, taille du texte, police de caractères...) sera celle par défaut de votre système.

Le but de cette action

Beaucoup trop de sites, même professionnels, sont encore codés à l'ancienne : ils exploitent peu (ou mal) la puissance des feuilles de style pour séparer le contenu de sa présentation, ils utilisent peu (mal ou même pas du tout) les balises adaptées pour structurer le contenu des pages.

L'objectif est donc de promouvoir les standards et le respect de la sémantique, de permettre à chacun (même les non webmasters) de prendre conscience du fait que le contenu d'un site bien conçu est tout à fait lisible et compréhensible sans l'ajout de surcouche de présentation... pas de démontrer que cette surcouche est sans intérêt, cela va de soi.

Sébastien a choisi de ne pas participer et s'explique dans ce billet, Jamais sans mon style. Il détaille tout ce que les règles définies dans sa feuille de style apportent à l'utilisateur et il est indéniable qu'elles lui apportent beaucoup. Sébastien termine en disant

L'absence de style contribuerait donc à mon humble avis à dégrader l'usabilité pour la majorité des utilisateurs, allant à l'encontre des objectifs de l'opération.

Je suis d'accord avec la première partie de sa conclusion, pas avec la deuxième. Je pense que le but de l'opération n'est pas de modifier (en bien ou en mal) l'usabilité pour les internautes mais de montrer qu'un site conforme sera lisible et compréhensible en toutes circonstances (indépendamment du support matériel ou logiciel, des difficultés ou handicaps de l'utilisateur).

Il est clair que si tous les sites participants sont conformes et bien structurés, il manquera des éléments de comparaison.

Il est clair aussi que cette action a un côté brutal, qu'elle privera l'utilisateur de tout le confort d'usage que leur apportent les CSS. Mais le nombre de sites, même de conception récente, non conformes est un réel problème. Il est inquiétant de constater que lors de la refonte d'un site (avec parfois de très gros budgets), le respect des standards et de la sémantique sont totalement ignorés. Des cris d'alarme sont poussés, des associations se créent pour mener un combat de terrain, des outils de qualité sont disponibles... Annual Naked Day est une opération coup de poing, avec les qualités et les défauts de ce type d'action.

Je sais que beaucoup approuvent ce type d'action, que d'autres la trouvent inutile, et chacun a d'excellentes raisons pour expliquer son choix.
Je suis consciente aussi que je vais déranger certains de mes lecteurs...
j'ose espérer qu'ils ne m'en tiendront pas rigueur :-)

Trackbacks

1. Le mardi avril 2006 à 22:45, de jf-hovinne.blog

Blog nu

Répondant à l'appel de Dustin Diaz, j'ai désactivé la CSS de ce blog. Finalement, je ne vois pas vraiment de différence. Ce blog avait-il vraiment du style ?

2. Le mercredi avril 2006 à 01:27, de LipousseBlog

Blog à poil

C'est la journée du blog à poil suite à une annonce d'un developpeur chez Yahoo. L'objectif étant de faire comprendre au plus grand nombre qu'en supprimant la décoration (feuille de style) d'un site, celui-ci peut être tout à fait accessible. Enfin si...

3. Le mercredi avril 2006 à 08:55, de tyPouypOblOg

Tout et tout bronzé

J'ai décidé malgré les zones de turbulences que je travers, de participer à la journée "votre site tout nu" dont j'ai eu vent par ici: www.blog.webatou.be. Alors désolé je suis en retard :'( mais je me dépèche de tout enlever. (des...

4. Le mercredi avril 2006 à 12:13, de ItinéraireLibre

Blog à poil

Et voilà, ce blog est presque tout nu, mais c'est pour la bonne cause. Comme beaucoup d'autres sites/blogs, celui-ci, ainsi que mon site professionnel, participent à l'opération CSS Naked Day.De quoi découvrir la puissance des feuilles de style et...

5. Le mercredi avril 2006 à 15:55, de Le weblog de Jules

CSS Naked Day

Comme un certain nombre, participons joyeusement au CSS Naked Day !...

6. Le mercredi avril 2006 à 18:22, de Jus de citron

Désabillez-moi !

D'après une idée originale de Annual Naked Day, le web francophone fête aussi la première journée"naturiste" ce mercredi 5 avril ! Ne soyez donc pas surpris si vos sites favoris apparaissent sous une forme, disons-le archaïque ...

7. Le mercredi avril 2006 à 21:19, de da scritch blog zone

Mon site à poil

The Naked Day. Désormais, le 5 Avril devient la journée sans feuilles de styles (pas de CSS ni inline-style), initiée par Dustin Diaz un des devs de Yahoo. Pourquoi ? Pour montrer la puissance de ces feuilles de style, justement. Qu'un site...

8. Le vendredi avril 2006 à 15:05, de da [k] spirit

votre site tout nu

avec quelques jours de retard, une initiative intéressante et marrante pour promouvoir les standards du web : votre site tout nu et son explication [via standblog encore...]...

Commentaires

1. Le mardi avril 2006 à 19:59, par Sébastien Billard

Monique, tu dis "Je pense que le but de l'opération n'est pas de modifier (en bien ou en mal) l'usabilité pour les internautes".

Effectivement, ce n'est pas le but. Mais c'est une conséquence qui je pense ne favorise pas l'acceptation du message.

-Les convaincus ne sont plus à convaincre.
-Les utilisateurs non-webmasters risque de ne rien comprendre et d'interpréter cette mise à nue comme un bug.
-Les personnes à convaincre risquent de se dire "Oui effectivement, et alors ? Qui désactive sa feuille de style de toute façon ?"

2. Le mardi avril 2006 à 20:13, par Jérôme / jlauriol

Je suis conscient aussi que je vais déranger certains de mes lecteurs... Aprés tout je ne vais tout de même pas leur raconter sans fin l'histoire qui leur fait plaisir.

3. Le mardi avril 2006 à 21:12, par Ghislain

Comme toute opération, pas forcément "coup de poing", elle a ses avantages et ses inconvénients.
- c'est vrai qu'on ne peut pas continuer à dire qu'il y a trop de sites récents dont la structure, et par conséquent du webmaster, datent de plusieurs années et ne rien faire
- c'est une des possibilités et elle est à saluer

Mais elle ne touche pas vraiment son but :
- il n'y a que les personnes ayant des sites valides et sémantiques qui participeront, les autres s'en garderont bien.
- de plus - et c'est important - il y a, chez les défenseurs (dont je fais partie) d'un web meilleur, un côté moralisateur et donneur de leçons qui ne me plaît pas trop. Je fais partie de ceux qui voudraient que le web soit plus accessible, plus sémantique, que MSIE prenne enfin en compte des spécifications CSS qui datent de cinq années (une éternité à l'échelle du web) ainsi que le XUL... mais il y a des fois où je me dis que le conflit et la stigmatisation ne sont peut-être pas le meilleur moyen d'arriver à notre but. L'attaque frontale peut froisser certaines sensibilités et produire l'effet inverse de celui recherché. Les termes récurrents "évangélisation" et "croisade", que l'on croise sur beaucoup de sites "militants" ne me plaisent pas trop.

Cependant, on peut remarquer que, dans l'histoire des nations, la démocratie a souvent été obtenue dans le sang...

4. Le mardi avril 2006 à 22:04, par Monique

Sébastien, je comprends bien les raisons de ta réticence mais
> Les convaincus ne sont plus à convaincre.

Aucun doute la-dessus. J'en soupçonne même certains d'avoir lu en diagonale les explications sur le but de l'action... puisqu'ils signalent qu'il suffit de désactiver les styles via la barre Webdeveloper pour voir sa page sans CSS ;-)

> Les utilisateurs non-webmasters risque de ne rien comprendre et d'interpréter cette mise à nue comme un bug.

C'est un des plus gros risque, en effet. C'est pourquoi j'ai tenté une explication dans ce billet, mais cela est loin d'être facile à faire en quelques mots !

> Les personnes à convaincre risquent de se dire "Oui effectivement, et alors ? Qui désactive sa feuille de style de toute façon ?"

Ne la désactivent volontairement que les webmasters lors de leurs tests, bien-sûr. Mais il est des groupes d'internautes pour qui une feuille de style ne sera jamais opérationnelle (bien malgré eux), c'est le cas des utilisateurs de synthèse vocale.
Cela peut aussi ce produire lors d'un problème technique. Je suppose que cela t'est déjà arrivé aussi de tomber sur un site où la feuille de style n'était pas prise en compte, si le contenu est bien structuré, toutes les informations restent disponibles et accessibles.

Amicalement,
Monique

5. Le mardi avril 2006 à 22:15, par Sébastien Guillon

@Sébastien

- "Les convaincus ne sont plus à convaincre" : Je n'en suis pas si sûr. Tautologie mise à part, les convaincus n'ont jamais fini d'apprendre ni de réfléchir. Par exemple sur le site de Dustin (qui vient de se dénuder, allez voir) ses commentaires sont habituellement signalés par une couleur distincte des autres. Dans la masse des centaines de commentaires de www.dustindiaz.com/naked-... on ne les retrouve plus à présent qu'à l'aide de la recherche (Ctrl+F). Est-ce la preuve que l'exercice est néfaste, ou plutôt la preuve de son utilité ? J'en déduirai bien évidemment qu'on vient de détecter un problème qu'il est facile de corriger en indiquant, par exemple, entre parenthèses, "Author comment" ou un texte de ce genre.

- "Les utilisateurs non-webmasters risque de ne rien comprendre et d'interpréter cette mise à nue comme un bug".
Ils se tromperont donc, peut-être parce qu'ils ne savent pas utiliser leur navigateur, mais ils font bien une erreur d'appréciation. Après tout si le webmaster décide de ne pas utiliser de mise en page particulière, ou s'il crée une mise en page minimaliste, c'est son droit. Les navigateurs ont d'ailleurs une CSS par défaut (ou user stylesheet) et c'est celle qu'on voit lorsque le site n'en propose pas.

6. Le mardi avril 2006 à 22:24, par Monique

Ghislain, tu as raison : la majorité des participants ont certainement un site conforme. Quelques-uns pour qui ce n'était pas le cas ont décidé de retravailler leur code avant le 5 avril, c'est toujours cela de gagné ;-)

Je ne suis pas partisan de l'attaque frontale systématique, même si je me laisse parfois emporter par ma passion. Il ne me viendrait jamais à l'idée de dire à quelqu'un que son travail n'est que de la m..., j'essaie plutôt de lui montrer les inconvénients que sa méthode peut entraîner, de lui donner des pistes pour faire mieux s'il le veux.

Ce n'est pas condamner une méthode ni imposer la sienne qu'il faut faire, c'est insensiblement essayer d'amener un maximum de personnes (aussi bien les webmasters que leurs clients ou futurs clients) à se remettre en question (cela, même les meilleurs doivent toujours le faire).

Amicalement,
Monique

7. Le mardi avril 2006 à 22:42, par Sébastien Billard

Monique tu dis "Mais il est des groupes d'internautes pour qui une feuille de style ne sera jamais opérationnelle (bien malgré eux), c'est le cas des utilisateurs de synthèse vocale. Cela peut aussi ce produire lors d'un problème technique."

Tout à fait ! Entendons-nous bien : tu sais que je suis un convaincu des standards et des bonnes pratiques en matière d'accessibilité. Ce sur quoi je suis sceptique, c'est seulement la méthode consistant à imposer un site sans style.

8. Le mercredi avril 2006 à 00:17, par Monique

Bonjour,

Nous sommes le 5 avril, la journée des sites dénudés est lancée depuis une dizaine de minutes.
N'hésitez pas à donner votre avis, les commentaires ne sont pas réservés aux webmasters participants !
Et si vous n'êtes pas content, je peux le comprendre, mais ne tapez pas trop fort ;-)

Amicalement,
Monique

9. Le mercredi avril 2006 à 08:37, par William

si je peux me permettre je trouve cette action totalement ridicule, imposer ca à un site on est plus en démocratie, c'est une dictature la.
Je sais pas si il vous arrive de réfléchir un peu, au lieu de vous prendre pour ce que vous n'êtes pas, vous feriez mieux de laisser les webmasters faire leur site comme ils veulent, c'est quoi le problème ? je vois pas.

Vous voudriez qu'on pourrisse votre site sous prétexte qu'il n'y a pas de style, mais c'est débile, je vois ca comme un cyber-racisme, vous etes vraiment malade.

10. Le mercredi avril 2006 à 09:43, par Vinch

Voilà, mon site est tout nu également. C'est quand même moche...

@William
Qui t'oblige à participer à cette action ???

11. Le mercredi avril 2006 à 10:06, par William

personne, mais en mettant à nu les sites ou je navigue habituellement, ca me concerne également et donc moi et tous les internautes qui vont sur les sites, voient leur navigation pourri par une action qui sert à rien, bravo!!!

12. Le mercredi avril 2006 à 10:20, par Neovov

@ William : Si tu dis ça c'est que tu n'as pas compris l'intérêt de cette journée... Un bloggeur est par définition une sorte de dictateur (même si je resterai extrêmement mitigé sur ce mot...), car il contrôle son site, et ce que les gens peuvent y dire. Mais le but de l'action n'est pas d'imposer un style particulier (soit dit en passant : un site qui a un style c'est exactement la même chose...), mais plutôt de montrer l'intérêt de faire une feuille de style et surtout du HTML bien structuré. En aucun cas nous ne sommes raciste envers ceux qui ne sont pas adepte au standards, au contraire, nous essayons de les conduire vers le "droit chemin" (via cette journée par exemple :D), en leur montrant qu'avec très peu d'effort on à transformé notre site très stylé en site sans style, mais fonctionnel quand même... (il a suffit de rajouter 7 caractères pour ce faire)... Un site non conforme aux standards de pourrait pas le faire... Et ainsi ne pourrait pas facilement changer complètement d'interface (cela implique donc une maintenabilité pas très optimale...)

Monique : Très bonne explication :) et... très belle sémantique (c'est un plaisir de te voir nu :D)

13. Le mercredi avril 2006 à 13:16, par Monique

Bonjour,

Je continue à mettre la liste des participants francophones (20 connus à cette heure) à jour dans le billet http://blog.webatou.info/post/votre-site-tout-nu

Si n'y êtes pas ou si vous connaissez des participants qui n'y figurent pas, n'hésitez pas à me le signaler :-)

Amicalement,
Monique

14. Le mercredi avril 2006 à 14:12, par Mathieu_vd

Bonjour,

Je suis moi-même un convaincu des standards. L'idée est bonne, je pense, même si elle n'aura qu'un faible impact.
Par exemple, ne faut-il pas déjà être sensibilisé aux normes pour participer ou fréquenter ce blog (... William semble me prouver le contraire ;-))

Personnellement, je pense qu'il faudrait aller encore plus loins.
Démontrer l'avantage du xhtml bien structuré est une chose mais démontrer la puissance de ce code combiné au CSS serait encore mieux.
Idéalement, cette journée devrait être suivie d'une semaine ou les sites seraient présenté chaque avec un style différent (démarche qui rappellerait CSS zen garden)
La démonstration serait plus spectaculaire, plus complète et plus ludique. Bon d'accord ça demanderait beaucoup de boulot mais quand on aime on ne compte pas, parait-il...

15. Le mercredi avril 2006 à 16:37, par Monique

Humour...

Cette photo de circonstance ;-)
www.flickr.com/photos/and...

Via www.webstandards.org/2006...

Amicalement,
Monique

16. Le mercredi avril 2006 à 18:28, par Vero

Mon trackback est déshabillé de ces accents !

lol !

17. Le mercredi avril 2006 à 18:45, par Monique

> Mon trackback est déshabillé de ces accents !

J'ai corrigé, Vero, sans quoi il est difficilement lisible.
C'est un problème d'encodage, il faudra que je me décide à passer en UFT-8 ;-)

Amicalement,
Monique

18. Le mercredi avril 2006 à 20:37, par Neovov

HHann !! Monique ! on ne dit pas UFT-8, mais UTF-8 (sinon ça parle de France Télécom, et c'est pas bien [mon esprit est bizarre, ne pas y faire attention])

Je rejoindrai l'idée de Mathieu_vd en proposant une semaine (par exemple) ou tout les sites/blogs des participant endosseraient le même design (bien sûr il faudrait un peu de temps pour le préparer), cela prouverai que les standards c'est vraiment-trop-bien-de-la-balle...
Mais ce n'est qu'une idée, et j'ai rarement de bonnes idées...

19. Le mercredi avril 2006 à 20:50, par Vinch

On peut dire que cette action à un certain succès. Tous les sites que j'ai l'habitude de consulter sont à poil aujourd'hui !

20. Le mercredi avril 2006 à 20:52, par Monique

> HHann !! Monique ! on ne dit pas UFT-8, mais UTF-8

Arrrg... il m'a échappé celui-là !
Trop tard pour corriger incognito, maintenant ;-)

Amicalement,
Monique

21. Le jeudi avril 2006 à 01:34, par Vero

Merci Monique !
De mon côté, il faut que je pense que tous les blogs ne sont pas en UTF-8 !

22. Le lundi avril 2006 à 16:34, par FireStorm

bonne idée quand même, on en profite pour voir les erreurs de structure.

23. Le mardi février 2007 à 09:20, par Html man

Merci pour cette article 1

Tom Miller
j'adore votre site !