Avoir plusieurs présentations alternatives pour votre site

Openweb.eu.org > Articles  > Avoir plusieurs présentations alternatives pour votre site

Abstract

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

Article

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

  • « une présentation adaptée à un autre support » que le traditionnel navigateur graphique (exemple : les mobiles).
  • un autre design d'un site pour un support donné (exemple : pour un navigateur graphique).

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 :

  • la conception en était difficile ou lourde, faute de technologies appropriées séparant structure et présentation, et faute de techniques permettant d'avoir une structure unique adaptée à plusieurs présentations.
  • l'utilité d'avoir plusieurs présentations alternatives n'était pas évidente : par exemple, on ne pouvait pas accéder au Web de toutes les manières actuelles (mobile, télévision, etc.).
  • les débits n'étaient pas très élevés (RTC 28,8 Ko par exemple), et ne permettaient pas un téléchargement supplémentaire de données.

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 ?

  • Sur un site commercial, il peut être utile d'avoir un design pour la période de Noël, ou d'Halloween (par exemple). Les périodes anniversaires ou de promotion sont souvent propices à un changement d'habillage. Sur un site lambda, on peut avoir aussi besoin de proposer plusieurs designs (exemple : portfolio de designer Web, changement d'image de l'entreprise, évolution marketing).
  • Il est parfois nécessaire de proposer différentes versions du site (versions plus légères en cas de forte charge, avec des caractères plus gros, etc.)
  • On peut vouloir adapter le site à d'autres supports de navigation (télévision, mobiles, etc.). Par exemple, la version imprimable d'un site n'est en soi qu'un design avec des propriétés de mise en page un peu différentes. Les présentations alternatives sont un moyen d'indépendance pour le contenu du site, qui pourra donc être accessible à de nombreux dispositifs. Il faut bien garder à l'esprit qu'une présentation alternative n'est pas forcément un design destiné au media screen (même si pour l'instant, c'est souvent le cas). L'exemple le plus classique est celui de la version imprimable (print, avec un exemple comme la feuille d'impression d'Openweb), mais il en existe d'autres, comme handheld (mobile), speech (navigateurs vocaux), tv (pour la WebTV), etc.
  • Les styles alternatifs sont officiellement un mécanisme d'accessibilité dont le support est requis pour les navigateurs conformes.
  • Même s'il n'est pas prévu d'avoir plusieurs designs pour un site donné, il est toujours agréable de savoir qu'il sera facile d'en ajouter un le cas échéant... bref, autant être paré si cela devient le cas.
  • Pour le fun ! (Exemple : un nouveau design pour un site personnel)

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) :

  • soit l'on a la flexibilité des présentations avec une maintenance lourde,
  • soit l'on a une maintenance « légère » (c'est tout relatif), mais pas de flexibilité dans les présentations,
  • soit l'on doit forcément mettre en place un système dynamique de gestion de templates.

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 :

  • La feuille de style persistante : elle est toujours appliquée, quel que soit le style utilisé (les propriétés communes à toutes les feuilles en quelque sorte). Elle n'a pas d'attribut "title".

    Exemple : <link href="persistante.css" rel="stylesheet" type="text/css" />

  • La feuille de style dite "préférée" : c'est la feuille de style utilisée par défaut (à l'inverse de la feuille de style persistante elle a un attribut title).

    Exemple : <link href="favorite.css" rel="stylesheet" type="text/css" title="Défaut" />

  • La feuille de style alternative.

    Exemple : <link href="alternate.css" rel="alternate stylesheet" type="text/css" title="Présentation alternative" />

    Le principal atout de cette méthode est d'avoir une structure unique pour divers médias et pour diverses présentations, d'où un gain en temps de conception et de maintenance. Par contre, trouver une structure unique implique quelques contraintes (principalement une certaine rigueur dans la logique de conception) explicitées ci-dessous.

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 :

  • dans chaque présentation alternative de « styler » toutes les citations de la même manière (meilleure homogénéité de votre document, et de vos présentations alternatives).
  • de gagner en temps, en simplicité de création, et en maintenance.

À 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 :

  • Positionnons et paramétrons le bandeau comme nous le désirons (via id="bandeau") : en haut à gauche, au milieu, fixé (via l'attribut fixed), etc. Par exemple :

    #bandeau{
    position:absolute;
    top:1em;
    left:10px;
    }
  • Chaque élément du bandeau pourra être également piloté à loisir via les sélecteurs. On peut également attribuer une image de fond au bandeau, une image de fond à chaque élément. Par exemple :

    #bandeau{
    background-image: url("bandeau.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    }
    #bandeau #accueil {
    background:url("accueil.jpg") no-repeat;
    width:86px;
    height:29px;
    margin-left:4px;
    margin-top:4px;
    }
  • On peut décider de ne pas afficher le texte grâce au span contenu dans chaque lien, et de le remplacer par un arrière-plan graphique:

    #bandeau span { display:none; }
  • On peut également se faire un design « léger » (sans images) à coups de propriétés CSS : bordures, etc. Par exemple :

    #bandeau{ background-color: #eeeeee; }
    #bandeau #accueil { border-top:1px solid #ff9900; }
  • On peut également prévoir un menu dont la police est plus grande et de couleur différente que la normale dans une CSS à part :

    #bandeau{
    font-size:110%; /** ou font-size:large; **/
    color:#FF9A00;
    background-color:#000000;
    }

    Ceci en supposant que la police soit définie à une taille de 100% (ou à "medium") et soit en noir sur blanc.

    Notons que cet exemple n'est qu'une présentation alternative : un site accessible et conforme WCAG n'a pas obligatoirement besoin d'un « style switcher » pour être adaptable au niveau de sa lisibilité, de la taille des caractères (les polices doivent être définies dans une taille relative), etc. À ce sujet, vous pouvez lire un design élastique pour vos sites ou l'utilisation des « ems » comme unité de police.

  • D'autres possibilités sont encore envisageables : on peut décider de ne pas afficher le bandeau pour une version imprimable (display:none;) où seul le contenu importe, etc.

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 :

  • On peut déjà constater qu'il n'y a pas de feuille de style persistante dans ce cas.
  • La première indique la feuille de style favorite pour l'affichage sur écran (media="screen"), donc cette feuille de style sera utilisée par défaut pour ce média.
  • La seconde est la feuille de style favorite, mais pour le média print, donc cette feuille de style sera utilisée par défaut quand vous voudrez imprimer une page et ce sans aucune manipulation supplémentaire.
  • La troisième est un style alternatif pour le média screen.
  • La quatrième montre que l'on peut avoir des styles alternatifs pour d'autres médias que l'habituel écran, en l'occurrence c'est un style alternatif pour une version imprimable.

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 :

  • on gagne en temps, car on n'a qu'une structure à créer.
  • le balisage est sémantique, donc simple à créer, et léger à maintenir.
  • En nommant les divers éléments de la page (bandeau, partie centrale, entête, pied de page, etc.) de manière intuitive, on s'y retrouve bien plus vite, et surtout plus facilement : essayez de chercher l'erreur dans un design à coups de tableaux imbriqués sans sens réel...
  • la maintenance est rapide : on a une erreur dans la présentation « Pâques », on corrige la CSS de ce thème, point final. Il est toujours plus simple de décomposer un problème en 5 sous-problèmes que de devoir tout traiter d'un coup.
  • il n'y a pas besoin de beaucoup de connaissances autres que XHTML/CSS pour implémenter plusieurs présentations.
  • on gagne en évolutivité et en réutilisabilité : les possibilités sont très nombreuses à partir d'une structure unique.

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 :

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant, Expert
  • Technologie : (X)HTML, CSS
  • Thème : Mise en page
  • Auteur :
  • Publié le :
  • Mise à jour : 11 avril 2014

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom