Vers un développement Web durable

On voit émerger une tendance diffuse dans l’évolution du développement Web. On dirait que ce domaine se convertit au développement durable. On doit déjà se prendre le chou avec les économies d’eau ou trier ses ordures, et il faudrait en plus faire des économies de Web ? Petit tour d’horizon.

J’ai pris l’habitude de lire de nombreux blogs touchant au design, malheureusement pour la plupart en langue anglaise (ALA, Digital Web, B&A…). De toute cette littérature, il ressort une même tendance diffuse dans l’évolution du développement Web. On dirait que ce domaine, en parallèle avec la mouvance qui fait tant parler d’elle ces dernières années, se convertit au développement durable. Outre le jeu de mot facile sur un développement Web durable, je crois que c’est la même démarche qui prime.

On peut légitimement crier au paradoxe (comme on crierait au scandale). Internet, ne serait-ce pas uniquement de l’information ? Du virtuel ? On doit déjà se prendre le chou avec les économies d’eau ou trier ses ordures, et il faudrait en plus faire des économies de Web ? Les ressources sont illimitées, non ? Eh bien non. En fait, à l’inverse des webdesigners, tous les internautes n’ont pas :

  • une ligne haut débit connectée en permanence
  • un grand écran, la dernière version de Firefox sur Windows
  • une vue parfaite, les mêmes diplômes et les mêmes connaissances techniques que vous
  • une passion dévorante pour votre société ou votre site, qui leur permettra de passer des heures sur chaque page

Dans la vraie vie, beaucoup d’internautes ont soit une connexion lente ou intermittente, soit des écrans trop petits (notamment des PDA), soit des navigateurs obsolètes, soit une vue déficiente, soit des connaissances ou des compétences limitées, soit l’envie d’imprimer vos articles, et de manière générale, aucun ne passera plus de quelques minutes (secondes ?) sur votre site. Les ressources côté utilisateur sont donc limitées et il convient de les économiser.

Côté développeur, l’argument sera plus économique qu’écologique : avec ces quelques principes, il gagnera en organisation et se simplifiera considérablement le travail de mise à jour. Le développement Web durable se traduit concrètement par quelques tendances de fond :

Un code riche de sens : choisissez des produits de saison

C’est vrai, les promoteurs des standards Web peuvent sembler fanatiques pour des développeurs Web brouillons, ou rebelles. Pourtant, avant d’être une norme, les standards sont des outils pratiques pour fabriquer vos sites. Vous vous souvenez ? Les H1, H2, P, BLOCKQUOTE et autres LI que vous appreniez un par un sur vos premiers sites perso. Entre temps, vous avez découvert les CSS et votre code s’est transformé en <div style="font-size:2em;" id="titre">Titre</div>. Quand ce n’est pas plusieurs niveaux de TABLE ou de DIV (il paraît que c’est mieux) imbriqués pour ajouter, ici une marge, là une bordure… Combien d’emballages autour de vos contenus ?

Le Webmestre nouveau est un gourmet, qui ne se laisse pas attirer par la profusion d’emballages mais par la simplicité. Il choisit des produits simples, sains et de saison : H1 pour son titre principal, H2 pour les niveaux 2, une UL assaisonnée de LI pour sa nav, et le plat principal sera découpé en P. Il traquera les DIV inutiles, évitera les TABLE non justifiées, et son code en sera nettement plus léger… et lisible !

Pour nommer ses blocs (les DIV utiles), il fera appel à la parcimonie et sera descriptif :

  • créer un bloc avec un id pour chaque section importante de la page : #bandeau, #nav, #contenu, #baspage… On pourra accéder à leur contenu via CSS (voir ci-dessous)
  • pas la peine d’ajouter une classe .titre à un H1 ou .texte à tous ses P : ils sont déjà identifiés par leur balise.
  • l’encart de nav aura la class .nav et non pas .encartbleugauche ; ou encore le bas de page aura la classe .baspage et non .petittextegrisfondblanc4 : ce sera plus clair et on pourra déplacer la nav à droite sans risque d’incohérence

CSS et JS dans des fichiers externes : évitez les transports inutiles

A chaque chargement de page, l’ensemble du code HTML est téléchargé de nouveau. Tout ce qui peut être externalisé dans un fichier (les feuilles de style CSS et les javascript JS pour ne pas les nommer) ne sera téléchargé qu’une fois puis mis en cache par le navigateur, d’où un gain de temps et de bande passante parfois énormes. Il y a des années qu’on le répète, mais on voit encore fleurir les sites surchargés de balises <SCRIPT> ou de styles qui traînent.

Pour les styles, on a tout vu : depuis les styles en ligne (<DIV style="border:1px solid red; font-size:2em">) jusqu’aux classes déclarées en en-tête du fichier HTML. Tout ça c’est fini, un gâchis de code pur et simple. Le plus « durable », en complément du point évoqué ci-dessus, c’est d’utiliser les balises sémantiques et les propriétés de cascade du CSS pour accéder aux éléments au sein de leur bloc parent. Par exemple, pour attribuer un style au H2 du bandeau (qui est différent du H2 du contenu), j’utiliserai l’élément #bandeau h2 { }. Pour accéder au lien d’un élément de la navigation, j’utiliserai ul#nav li a {}. Le code CSS produit est un peu plus long mais beaucoup plus structuré qu’avec des classes multiples. Et surtout, on allège ainsi le code HTML qui se retrouve très lisible et facile à mettre à jour (ça ressemble à votre première page Web).

L’enrichissement progressif : un contenu accessible à tous

Sans entrer dans les détails de l’accessibilité et de l’ergonomie des contenus (qui sont des disciplines à part entière), la notion de dégradation harmonieuse (graceful degradation) ou son revers l’enrichissement progressif (progressive enhancement) répondent à la nécessité de rendre ses contenus accessibles, transformables et réutilisables quel que soit le moyen employé. Le webdesigner doit lâcher un peu du contrôle sur l’aspect visuel, au profit d’une lisibilité des contenus, même sans images, sans couleurs, sans effets d’animation. On déconseillera, dans cette logique, les langages propriétaires comme Flash, qui ne se « dégradent » pas harmonieusement (c’est tout ou rien) : d’ailleurs la récente expérience de MTV, qui a abandonné le full flash pour du XHTML, est significative.

Pour les styles, cela peut avoir plusieurs applications :

  • proposer une feuille de style dédiée à l’impression avec l’attribut media="print", dans laquelle tous les éléments inutiles (nav, bas de page) sont rendus invisibles par la propriété display:none;
  • proposer une ou plusieurs feuilles de styles alternatives qui se chargent dynamiquement en fonction de la résolution de l’utilisation (800 ou 1024 par ex, comme sur ce site)
  • ne pas imposer des tailles de texte en pixels pour Internet Explorer 5-6, car l’utilisateur ne peut les redimensionner

Pour le javascript, on pourra utiliser les innombrables contrôleurs riches et autres améliorations des technologies Ajax pour créer des formulaires plus dynamiques, tout en veillant à offrir une version HTML statique lorsque l’utilisateur a désactivé le javascript. Comme pour le CSS, on séparera intégralement le code JS du HTML (fini les onclick dans les balises) : la technique « non-obstrusive » (tutorial en anglais, je le traduirai si quelqu’un est intéressé) permettra de modifier le DOM et d’ajouter des comportements aux balises existantes sans entraver l’accès des visiteurs privés de javascript.

Le succès croissant des flux RSS est une illustration de l’intérêt d’une « dégradation harmonieuse » : le code HTML d’origine est adapté à des standards XML un peu rigides, les contenus sont réduits à quelques lignes de texte sans mise en forme. Et pourtant, ça marche !

Et caetera

J’oublie sans doute des choses dans ce balayage des nouvelles tendances du développement Web liées à la notion de développement durable. Et il ne s’agit pas de contraintes supplémentaires. Pour la plupart, après un temps d’apprentissage, les techniques permettent un gain de productivité important. Sans compter que le code propre, accessible et durable est apprécié par les moteurs de recherche. Alors y’a pas de raison.

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

2 réponses à Vers un développement Web durable

  1. Mathias dit :

    Bonjour, je propose ici un lien vers la traduction en français d’un document présentant les bases des standards et qui est ainsi une bonne introduction auxdits standards.

    Il s’agit des diapositives d’une présentation en 7 chapitres :
    1 : Les standards/introduction ;
    2 : HTML et XHTML ;
    3 : Le balisage sémantique ;
    4 : L’accessibilité ;
    5 : Introduction aux Feuilles de Style en Cascade (CSS) ;
    6 : Les flottements ;
    7 : Problèmes et bogues CSS.

    Le lien : web.accessibilisation.net…

  2. Raton dit :

    Bonjour,

    Cet article est de plus en plus d’actualité avec la mode du "Web 2.0", qui consiste essentiellement à mettre du javascript ou du flash partout sans se soucier de l’accessibilité.

    Une petite précision :

    "proposer une ou plusieurs feuilles de styles alternatives qui se chargent dynamiquement en fonction de la résolution de l’utilisation (800 ou 1024 par ex, comme sur ce site)"

    => Il n’y a pas besoin de faire 2 CSS différentes, il suffit d’indiquer la largeur en % (et pas en px) sur la balise <body>.

    A + ;)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *