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.
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
Taille idéale pour les images
Voici les dimensions auxquelles nous recommandons de préparer les images avant de les charger dans Jahia :
| Composants Jahia | Ratio et dimensions idéales des images à contribuer |
|---|---|
| Homepage Hero – colonne gauche | Paysage 16:9 1340 x 754 Images contribuées et gérées par News et agenda MyUNIL |
| Homepage Hero – colonne droite | Paysage 16:9 1340 x 754 Images contribuées et gérées par News et agenda MyUNIL |
| Hero sur page de niveau 1 | Carré 1:1 1340 x 1340 |
| Image | Paysage 16:9 1340 x 754 |
| Infographie SVG | Paysage 16:9 1340 x 754 |
| Vidéo | Paysage 16:9 1340 x 754 |
| Galerie | Paysage 16:9 1340 x 754 Accepte aussi les formats portraits |
| Citation Interview |
Miniature 1:1 140 x 140 |
| People teaser | Miniature 1:1 140 x 140 |
| Teasers de publications | Portrait 3:4 750px de large |
| Image et texte | Portrait 3:4 750px de large |
| Highlight | Portrait 3:4 750px de large |
| Teasers externes verticaux | Paysage 16:9 750px de large |
| Teasers d'actualité en vedette Teasers d'actualités verticaux Teasers d'événements verticaux Teasers des événements en vedette |
Paysage 16:9 750px de large Images contribuées et gérées par News et agenda MyUNIL |
Vidéo extraite de la formation de mise à niveau Jahia
[ Documentation Jahia: retour au sommaire ]