Avoir plusieurs présentations alternatives pour votre site

  • Profil : Débutant, Expert
  • Technologie : (X)HTML, CSS
  • Thème : Mise en page
  • Auteur : Nicolas Hoffmann
  • Mise à jour : 22/05/2008

En bref

Les styles alternatifs : leur utilité, leurs avantages, et la mise en place d’une structure unique permettant leur implémentation.

On peut définir une présentation alternative comme :

Il y a quelques années, l'idée même d'avoir un site avec plusieurs présentations alternatives faisait simplement sourire les « habitués ». Le concept en lui-même était séduisant, mais se heurtait à plusieurs obstacles :

Avec la démocratisation de débits plus élevés comme l'ADSL et surtout l'avènement de standards comme XHTML et CSS, cette possibilité est à envisager de manière plus sérieuse.

Pourquoi avoir un site avec plusieurs présentations ?

Les raisons de concevoir un site ayant plusieurs présentations alternatives étant posées, réfléchissons maintenant à la manière de le faire.

Quelles techniques pour proposer des présentations alternatives ?

Plusieurs techniques permettent de proposer des solutions alternatives. Suivant que l'on utilise une mise en page à base de tableaux ou les feuilles de styles, nous allons voir que la manoeuvre peut s'avérer assez difficile ou au contraire extrêmement aisée.

Commençons par envisager le cas des mises en pages par tableaux. Dans ce cas, il existe deux méthodes : soit l'on crée une version du site à chaque nouvelle présentation, soit l'on essaie de créer un « squelette », et tous les futurs designs devront s'y conformer.

Mise en page par tableaux

Une version du site par présentation : Certes, on peut ajouter une présentation facilement, il suffit de recréer... le site. Cette solution, intéressante à première vue, devient pénible voire insupportable quand il faut faire une modification (par exemple une rubrique supplémentaire), car il faut changer le graphisme et la structure dans toutes les présentations.

Cela prend du temps (et le temps, c'est de l'argent !) car il faut changer tous les tableaux du site, et parfois cela peut être tout bonnement impossible, ou très difficile à réaliser. En résumé, cette méthode est proprement infernale pour la maintenance du site, et inapplicable si l'on a des impératifs de temps (d'autant plus si les présentations alternatives sont nombreuses).

Un tableau squelette pour le design : Cette solution l'avantage qu'il n'est pas nécessaire de copier ou recréer le code pour chaque présentation. C'est toutefois le seul. En effet, tous les futurs thèmes du site devront être présentés de la même manière, c'est extrêmement contraignant (le bandeau sera en haut, les images devront faire tant de pixels de dimensions, etc.).

En résumé, les designs seront très proches les uns des autres, et le graphiste risque de vous maudire... (Créativité brimée et conflits assurés !) Avec beaucoup d'imagination et de volonté, on arrive péniblement à 5 ou 6 designs voisins, mais pas plus. Enfin, autre problème majeur de cette solution : on peut créer des designs pour un même support, mais il sera très ardu de créer une présentation alternative pour un autre support (mobiles, etc.).

Utilisation de gabarits (templates) : Il existe également la possibilité d'utiliser des gabarits (templates), certains systèmes de gestion de ces gabarits sont très évolués et ont de bonnes possibilités, et de nombreuses ressources sont facilement trouvables. Ces systèmes sont en général un peu plus souples que les deux méthodes énoncées ci-dessus. Mais leur mise en place nécessite un langage dynamique (comme PHP) et souvent une base de données (comme MySQL), et bien évidemment des connaissances dans ce domaine, particulièrement si vous devez personnaliser le système et/ou les présentations.

Rappelons que l'idée de cet article est bien de trouver une structure unique permettant d'implémenter plusieurs présentations, sans utiliser toute une machinerie via un langage dynamique associé à une base de données.

On constate donc qu'avec l'ancienne méthode (table-designed) :

Par ailleurs, on peut rencontrer les problèmes qu'une mise en page via tableaux peut parfois occasionner (accessibilité défaillante, etc.), qui sont hors du champ de cet article (voir les problèmes de la mise en page par tableaux).

Utilisation des feuilles de style

Pour avoir les deux avantages (flexibilité et maintenance aisée), le seul moyen est d'avoir une structure suffisamment « générique » (bref une structure qui permet de faire toutes sortes de présentations). Et le meilleur moyen pour ce faire est simplement de la rendre indépendante de la présentation. C'est là qu'interviennent les standards : un de leurs plus grands principes est de séparer la structure de la présentation. Dans notre cas, les CSS prendront en charge la présentation, et le (X)HTML s'occupera de la structure.

Il faut néanmoins expliquer la « logique » de l'implémentation des feuilles de style. Le W3C nous indique qu'il existe trois types de feuilles de style :

Comment procéder en pratique sur la base des feuilles de style ?

Importance de la sémantique :

Plus que jamais, un balisage sémantique sera nécessaire. Supposons que vous ayez une citation dans votre contenu, il sera utile d'utiliser la balise <blockquote> plutôt qu'une balise de présentation dépréciée (comme <b>, <i>, etc.), cela vous permettra :

À ce sujet, vous pouvez (re)lire cet article Respecter la sémantique.

Structurer la page pour anticiper l'avenir :

À l'instar d'un balisage sémantique, il est nécessaire de pouvoir décomposer une page de manière logique. Mais il n'existe pas toujours d'élément correspondant à votre besoin spécifique (par exemple, il n'y a pas de balise <entete>), c'est là que l'on peut utiliser la balise <div>, qui a pour but de grouper des sections.

Comme nous avons la possibilité de choisir les noms de nos conteneurs (de nos classes le cas échéant), ne nous privons pas de choisir des noms « logiques » et suffisamment parlants (voir A Touch of Class, par Tantek Celik).

Exemple : une page Web est constituée de diverses sections : un entête, un corps, et un pied de page, ce qui nous donne :

<div id="entete">Ici l'entête</div>

<div id="corpspage">Ici le "corps" de la page</div>
<div id="piedpage">Ici le pied de page</div>

Et ce mécanisme peut être répété pour une section : par exemple le corps de la page est constitué d'un bandeau et du contenu en lui-même, ce qui nous donne :

<div id="entete">Ici l'entête</div>
<div id="corpspage">

   <div id="bandeau">Ici le bandeau</div>
   <div id="contenu">Et là le contenu</div>
</div>
<div id="piedpage">Ici le pied de page</div>

Attention : le code ci-dessus n'est donné qu'à titre d'exemple. Il faut bien garder à l'esprit que la balise <div> doit être utilisée « quand on a besoin de regrouper des sections à des fins de mise en page », et comme conteneur générique de style (ou de langue le cas échéant).

Typiquement, si votre bandeau est une liste, il ne faudra pas mettre cette liste entre <div id="bandeau"> et sa balise fermante, mais à la place de <div id="bandeau"></div>. (lire à ce sujet Y a des calques qui se perdent)

c) Attribuer des valeurs sémantiques à vos contenus

Rappelons qu'un sélecteur par id définit un élément unique dans une page, et qu'un sélecteur par classe peut être utilisé plusieurs fois. Partant de cette information, les id permettront d'identifier les éléments nécessitant une présentation particulière, et les classes permettront de désigner les éléments ayant des propriétés communes.

Par exemple, un <h2> dans votre page peut nécessiter une présentation différente (je vous aide : unique !) par rapport aux autres <h2> de votre page. Dans ce cas, nous aurons donc un... id : <h2 id="titrepage">Le sous-titre principal de la page.</h2>

Par contre, supposons que votre page ait deux types de citations. Comme vous en aurez plusieurs de chaque type, il faudra utiliser des classes.

Par exemple, nous avons des citations de poèmes et des citations de personnes célèbres, il pourra donc être utile de styler chaque citation d'un genre donné de la même manière : 

<blockquote class="citationscelebres">
   Ce n'est pas parce qu'en hiver on dit
   « fermez la porte, il fait froid dehors »,
   qu'il fait moins froid dehors quand la porte est fermée.
</blockquote>
<blockquote class="poemes">

   Vienne la nuit sonne l'heure. Les jours s'en vont je demeure.
</blockquote>
<blockquote class="citationscelebres">
   Une heure assis à côté d'une jolie femme semble durer une minute.
   Une minute assis sur un four brûlant semble durer une heure.
   C'est ça la relativité.
</blockquote>

Une fois ce travail préparatoire effectué, il est possible d'appliquer des styles.

Préparer les styles alternatifs :

Plutôt que de vous expliquer de manière théorique le mécanisme qui sous-tend les présentations alternatives, nous allons prendre un exemple, à savoir le bandeau de notre futur site

<ul id="bandeau">
   <li>
      <a href="accueil.php" id="accueil" title="accueil">
         <span>Accueil</span>
      </a>

   </li>
   <li>
      <a href="presentation.php" id="presentation" title="Présentation">
         <span>Présentation</span>
      </a>

   </li>
   <li>
      <a href="contact.php" id="contact" title="contact">
         <span>Contact</span>
      </a>

   </li>
   <li>
      <a href="news.php" id="news" title="News">
         <span>News</span>
      </a>

   </li>
</ul>

Cette « banale » liste peut sembler simpliste à première vue pour les habitués des tableaux imbriqués, néanmoins, elle offre beaucoup de possibilités de mises en page différentes.

En voici quelques-unes :

Au final, cette liste qui nous semblait chétive se défend plutôt bien, car on peut jouer sur toutes les propriétés des CSS. Rien qu'avec le positionnement, les dimensions et les images de fond, les possibilités sont énormes.

Bien sûr, après avoir créé différentes présentations, il faut un système qui permette d'en changer. Voici quelques idées...

Comment proposer plusieurs présentations alternatives à vos visiteurs

Les feuilles de style alternatives : un mécanisme transparent pour l'utilisateur

Si vous ne mettez pas en oeuvre de mécanisme spécifique, comme un sélecteur de style (style switcher), que nous allons présenter ci-dessous, cela ne signifie pas que les utilisateurs ne profiteront pas de vos propositions.

Prenons les implémentations des CSS d'Openweb pour exemple :

<link
   rel="stylesheet"
   type="text/css"
   href="/style/original/screen.css"
   media="screen"
   title="Normal" />
<link
   rel="stylesheet"
   type="text/css"
   href="/style/original/print.css"
   media="print"
   title="Normal" />
<link
   rel="alternate
   stylesheet"
   type="text/css"
   href="/style/fondnoir/screen.css"
   media="screen"
   title="Fond noir" />
<link
   rel="alternate stylesheet"
   type="text/css"
   href="/style/minimale/print.css"
   media="print"
   title="Minimal" />

Si on reprend la logique de l'implémentation de CSS vue plus haut, c'est très simple :

Par exemple, vous pourrez profiter de la présentation alternative "Minimal" avec Mozilla en faisant "Affichage", "Utiliser une feuille de style", et en la sélectionnant.

Toutefois, des problèmes d'implémentation freinent cette utilisation : Internet Explorer ne prend tout bonnement pas en compte les CSS alternatives, et les autres navigateurs ne les appliquent pas de façon permanente. (Hormis Firefox et Mozilla qui intègrent cette fonctionnalité via une extension). De plus, la prise en compte des descripteurs de media sur différents mobiles est parfois loin d'être conforme aux standards.

Comme on vient de le voir, c'est bien l'agent utilisateur qui choisit sa feuille de style et la présentation correspondante en fonction de ses besoins. Vous n'êtes nullement obligé d'afficher vos différents designs à vos utilisateurs pour qu'ils aient le choix. Mais comme on vous connaît, on se doute que vous pourriez avoir envie de proposer plusieurs styles à tous vos visiteurs et de leur donner le choix. C'est ce que l'on appelle un sélecteur de style, ou plus communément un « style switcher ».

Utilisation d'un cookie pour un style switcher

On peut utiliser un cookie pour stocker le nom du thème choisi, il faut néanmoins que l'utilisateur les accepte. Cela peut se faire en Javascript (toutefois, certains utilisateurs le désactivent, et cette solution n'est pas la plus aisée à implémenter), ou plus simple, dans un langage dynamique, comme PHP. Cette solution reste encore la plus rapide à mettre en oeuvre : un formulaire avec soit un select, ou un lien avec une variable que l'on va récupérer (querystring). Par exemple :

<a href="changer_graphisme.php?presentation=noir">Fond noir</a>

Ensuite, il faut stocker la valeur du thème dans un cookie dans le fichier « changer_graphisme.php » :

<?php
If ($_GET["presentation"]=="noir") {
setcookie("presentation","noir",time()+3600);
}
?>

(On crée un cookie appelé presentation qui a pour valeur « noir » et qui a une durée de vie de 3600 secondes, donc 1 heure.)

Ensuite, il faudra détecter ce cookie et en utiliser la valeur pour appliquer le style : 

<?php
if (isset($_COOKIE["presentation"])){ // si le cookie existe ?>
<link rel="stylesheet"
  type="text/css"
  href="/style/<?php echo $_COOKIE["presentation"]; ?>.css"
  media="screen"
  title="defaut" />
<?php  } ?>

Ce qui affichera dans la page « finale »

<link rel="stylesheet"
   type="text/css"
   href="/style/noir.css"
   media="screen"
   title="defaut" />

L'exemple donné ici est volontairement simplifié (pas de tests d'erreur, etc.), voyez un style-switcher en PHP pour plus de détails.

L'idéal étant de proposer sur le site les deux : un style-switcher avec cookie ET les CSS alternatives (en attendant une meilleure implémentation de ces dernières).

Conclusion :

Les standards apportent de la puissance et de la souplesse sur ce sujet des présentations alternatives :

Le CSS Zen Garden est un excellent exemple de site ayant plusieurs présentations, si ce n'est le meilleur point de vue designs. Toutefois, son code est volontairement surchargé afin de favoriser l'ajout de multiples présentations.

Références et compléments :

Une question, une remarque ? Écrivez à l'auteur.

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par l'APINC et propulsé par SPIP.