XHTML / CSS Introduction à un Web souple, léger et accessible

Que celui ou celle qui n’a jamais utilisé de tableaux pour structurer les pages de son site lève la main ! Si je devais poser cette question à une assistance, je serais prêt à parier que la majorité des mains, pour ne pas dire toutes, seraient baissées. Pourtant, passer à une mise en page basée sur les feuilles de styles n’est plus un risque à prendre mais bien une réalité à admettre. C’est dans ce but que je me lance dans une série de tutoriaux, sans prétention aucune, afin de vous faire découvrir une toute autre approche, celle de maintenant, bien plus souple, légère et accessible pour la conception de vos pages Web.

Mais pourquoi changer ?

Si tout comme moi vous êtes un autodidacte, vous avez sûrement dû commencer votre aventure dans la création de site Web par la conception de sites personnels ou alors de petites entreprises désirant se faire une vitrine sur la toile et, qui plus est, souvent à l’aide d’éditeur WYSIWYG qui génèrent pour la plupart un code monstrueusement peu standardisé. A l’époque, je me souciais peu du code source et ne testais mes sites que sur Internet Explorer et pour peu que le résultat visuel soit celui espéré, cela me satisfaisait pleinement. Je ne pense sincèrement pas être un cas isolé de laxisme dans mon travail de développeur, c’est avec un peu d’expérience que l’on commence à se poser des questions, pourtant fondamentales, sur la qualité de nos pages.

• Il y a-t-il des standards à respecter ?
• Est-ce que tout le monde a accès à mon site et à son contenu ?
• Est-ce que la maintenance de mon site me fait perdre un gain de productivité ?

C’est en partie à travers ces questions, ou plutôt ces notions, que nous allons voir dans cette introduction, pourquoi utiliser le couple XHTML / CSS pour structurer logiquement nos pages Web. Nous verrons ensuite, à travers une grande série de tutoriaux, comment utiliser efficacement ces deux technologies.

Longtemps nous avons abusé du langage HTML et surtout de ses tableaux pour mettre en place notre interface graphique. Vous allez voir à travers cette série d’articles, que ce couple XHTML / CSS permet enfin d’utiliser ces langages pour ce qu’ils sont et de créer des sites modernes et de qualité professionnelle c'est-à-dire des sites accessibles à tous les navigateurs, à tous les utilisateurs, handicapés ou non, à toutes les plates-formes et faciles à maintenir.

En dehors de tout ça, vous vous rendrez compte également que l’utilisation des feuilles de styles implique toute une série de causes et conséquences majeures au niveau de l’ergonomie des sites. La taille des fichiers est réduite parfois de manière considérable, surchargeant moins le serveur, améliorant donc sa vitesse et le temps de chargement des pages. Un exemple revenant beaucoup sur Internet est celui du site ESPN qui déclare économiser jusqu'a 2To (2000000 Go !) par jour de bande passante.

Comment changer ?

Il existe quelque part sur cette petite planète, un organisme chargé de définir des normes, des recommandations pour le Web. Cet organisme, vous devez le connaître, au moins de nom, c’est le World Wide Web Consortium souvent relaté par son abréviation W3C.

Cet organisme, recommande vivement de passer à une mise en page exemptée de tableau HTML, ce que nous appellerons désormais la méthode de l’ancienne école. Cependant, comme je l’ai précisé précédemment, le W3C ne donne que des recommandations, en d’autres termes il est clair que pour votresiteperso.free.fr il n’est peut-être pas indispensable d’appliquer toutes ces recommandations mais comme toujours, il n’est jamais mauvais de s’y mettre sérieusement, car il n’en est pas de même pour un site de qualité professionnelle.

Vous remarquerez que l’on insiste beaucoup sur la qualité des sites Web. Je vous parlais de mes débuts, lorsque je me satisfaisais du résultat visuel de mon travail en le testant sur Internet Explorer. Un tel comportement de ma part est tout simplement incompétent pour un site de qualité. Ne vous êtes-vous jamais demandé pourquoi vous voyez sur certains sites qu’ils sont optimisés pour tel ou tel navigateur et pour telle ou telle résolution ? Concrètement, trouvez-vous normal que le site ne soit accessible qu’à une partie des visiteurs satisfaisant ces critères ? Un site de qualité ne peut se permettre de laisser de côté une quantité énorme de visiteurs, parfois même de clients potentiels, sous prétexte qu’ils n’ont pas les moyens d’accéder correctement à un site Internet qui est tout sauf conforme.

Assurer la compatibilité des pages entre les différentes plateformes, les différents navigateurs et assurer une accessibilité à tous les utilisateurs y compris les handicapés utilisant des navigateurs alternatifs est le but de bon nombre de normes du W3C, CSS en faisant partie intégrante.

Ensemble ...

À travers cette longue série de tutoriaux que je vous promets depuis le début de cette modeste introduction, je m’adresserai, comme à mon habitude, à mes petits protégés que sont les débutants. J’essaierai d’être le plus clair possible afin de vous montrer que CSS ne se limite pas, loin de là, à donner une couleur à un texte et un style pour un lien. Nous évoluerons la difficulté au fur et à mesure des articles. Il se trouve que cette manière de procéder semble plaire à beaucoup d’entre vous alors …

Je commencerai par une petite partie consacrée à la structure de vos documents, le rôle de XHTML. Vous verrez que nous interviendrons directement dessus à l’aide de CSS et qu’il nous faudra donc mettre en place une sémantique et une structure logique des données.
Viendra ensuite la seconde partie, largement plus grande, consacrée à la présentation de nos pages, le rôle de CSS. Autant vous prévenir tout de suite que souvent, à cause des problèmes de prise en charge des navigateurs, nous avons besoin de recourir à des petites astuces dépassant totalement la valeur de standards mais indispensables pour que le résultat escompté soit obtenu. Les standards et recommandations du W3C auraient d’ailleurs quelquefois besoin d’un peu plus de précisions pour être totalement efficaces.

Pour finir, il faut préciser qu’une technologie comme CSS arrive dans un contexte assez difficile et peu accueillant pour elle, les navigateurs l’interprétant un peu encore comme ils le veulent. Même si un effort certain est à souligner chez les éditeurs, il reste encore pour certains, un long chemin à faire pour prendre en compte toutes les recommandations du W3C et tout ceci sans parler des développeurs utilisant des outils peu recommandables au vu du code source affreux qu’ils génèrent. Les technologies XHTML et CSS ne sont donc pas un remède miracle contre tous les problèmes rencontrés sur le Web et nécessitent d’être correctement utilisées pour afficher un minimum d’efficacité. Mais pour cela, il n’y a pas de secret. Seuls le travail et la pratique de ces technologies vous apporteront l’expérience et les astuces nécessaires pour faire face. La série de tutoriaux dans laquelle je me lance dès maintenant, est un bon début pour commencer dans cette nouvelle aventure qui vous étonnera. J’en suis sûr, je l’ai été ;)

Je laisserai un dernier mot aux détracteurs, à ceux qui pensent que je me prendrai pour ce que je ne suis pas, sachez que cette série n’a pas pour but de devenir une référence en la matière et que je n’ai pas la prétention d’être un expert des CSS et encore moins en matière de standards. Je suis juste un "autodidacte contrariant" qui ne cherche qu’à aider ceux qui en ont besoin, dans un domaine où leur vision des choses et leur méthode de travail vont considérablement changer.

Bon courage !

A lire également et en attendant :o)

• La Standardisation - Rendre le net accessible à tous ! par sebmafate
• Le XHTML - Présentation du successeur de HTML par sebmafate
• Pompage.net : le web design puisé à la source
• Alsacréations : Cours et tutoriels HTML, CSS et standards Web
• W3 Schools : CSS Tutorial
• YoYo Design : Les feuilles de style en cascade, niveau 2

Merci à Didier, Denis et Nadir pour leurs relectures !