Structure et design des sites web Jahia UNIL
Ce document explique la structure des sites et pages web Jahia sur lesquels est basée la présence web institutionnelle de l'UNIL.
Principe de l'imbrication : pages > composants > éléments
Un site web Jahia est composé d'un ensemble de pages, qui sont elles-mêmes composées de composants de contenu, et ces composants sont une addition d'éléments de contenu.
Dans certains cas, les composants sont eux-même parfois imbriqués entre eux. Par exemple une colonne de tableau peut contenir un texte.
Les composants
Les composants fixes
Il s'agit de composants optionnels, qui peuvent être activés ou non sur une page, et qui figureront toujours au même emplacament. Exemples :
- le texte d'introduction et le sommaire en haut des pages de contenu
- la zone hero avec sans image et surtitre en haut des landing pages
- les liens "continuer ma lecture" avant le pied de page.
Les composants de contenu
Il existe plusieurs types de composants de contenu qui peuvent voisiner sur une page, comme dans cet exemple où 3 composants différents sont utilisés :
Ces différents composants partagent souvent plusieurs caractéristiques communes :
- un champ "titre" optionnel, qui aidera à structurer la page (certains composants n'en ont pas, par exemple le composant Bouton)
- des champs optionnels, par exemple pour afficher un éventuel texte explicatif entre le titre du composant et ses éléments
- une marge basse réglable (marge sous le composant), de manière à pouvoir gérer l'espace blanc entre les composants afin de le réduire ou l'augmenter dans certains cas pour être cohérent avec les bonnes pratiques en design web
- un affichage "responsive" conçu pour s'adapter à toutes les largeurs d'écran
Voir la liste des composants de contenu
Structure des sites
Nos sites institutionnels sont basé sur un structure arborescente à plusieurs niveaux :
- niveau 0 = page d'accueil
- niveau 1 = landing pages
- niveau 2 et + = basic pages
A chacun de ces niveaux correspond un template (ou modèle de page). C'est l'emplacement d'une page dans la structure du site qui va automatiquement déterminer le template qui lui sera appliqué.
Certains éléments sont communs à tous les templates d'un site, notamment l'en-tête et le pied de page. Chaque template peut accueillir différents zones de contenu. Certaines de ces zones sont identiques dans tous les templates, et d'autres zones diffèrent d'un template à l'autre. Il existe aussi des zones optionnelles.
A noter que l'accès à l'édition de certaines zones est lié aux droits d'édition. Il faut par exemple avoir des droits de webmaster de site ou de webmaster de faculté pour pouvoir modifier des zones qui apparaissent sur toutes les pages d'un site ou d'une rubrique de site.
Structure des pages
Home page
Landing page
- La partie hero est activable en option au niveau des propriétés de la page (entête page niveau 1).
- Le composant fixe "continuer ma lecture" pour ajouter des liens complémentaires en bas de page est optionnel.
Basic page
- Le texte d'introduction et son bouton sont activables en option au niveau des propriétés de la page (entête page niveau 2+).
- Le sommaire pour les pages longues est optionnel. Il est alimenté par les titres donnés aux composants présents dans la page.
- Le composant fixe "continuer ma lecture" pour ajouter des liens complémentaires en bas de page est optionnel.
Variantes propres aux sites de facultés
Les sites de facultés se caractérisent par diveres variantes et options pour les modèles de pages décrits ci-dessus.
Toutes les pages de facultés sont reconnaissables par ces points :
En complément, à l'intérieur des sites de facultés qui englobent désormais la plupart de leurs unités structurelles, les principales d'entre elles peuvent disposer d'espaces dédiés pour y regrouper leurs pages. C'est notamment le cas des départements, instituts et écoles :
Variantes propres aux sites autonomes
Pour diverses raisons, par exemple du multilinguisme avec des langues différentes de celles de leur faculté ou un rattachement interfacultaire, un très petit nombre de sites sont autonomes, hors des 8 sites institutionnels principaux (UNIL.CH et ses 7 facultés). Ces sites sont reconnaissables à ces variantes :
Navigation
Ecoconception
Le design de nos sites Jahia est basé sur des principes d'écoconception web afin de refléter les engagements de l'UNIL pour la durabilité. Le but est de réduire leur impact environnemental à travers plusieurs choix graphiques et techniques :
- n'utiliser des images que quand elles sont nécessaires pour compléter le contenu, et non pas dans un but décoratif
- optimiser ces images pour réduire leur poids, et les remplacer par des éléments graphiques plus légers quand cela est possible
- pour des éléments multimédias ou interactifs comme les vidéos, les podcasts et les plans d'accès, ne pas les charger directement dans la page mais laisser le choix de le faire aus personnes qui visitent le site
- pour les documents à télécharger, les compléter d'une description afin de limiter autant que possible les downloads inutiles
En lien avec l'écoconception, voir les bonnes pratiques pour la gestion des médias dans Jahia.
Vidéo extraite de la formation de mise à niveau Jahia
[ Documentation Jahia : retour au sommaire ]