Structure du site et navigation

Structure du site et navigation

Structure des pages

- Le site est sur fond bleu - Header + footer n’ont pas de limites - le centre de la page est en fond blanc et dans une boite faisant la largeur de la page

Zones et régions des pages

Header
Entête de page
Zone contenu		Sidebar
Pieds de page

• Header/Footer : toute la largeur de la page
• Zone centrale :
  • Les pages de contenu commencent par une zone d’entête qui prend toute la largeur
  • La zone est ensuite divisé en deux zones : 2/3 – 1/3 pour la sidebar
  • La sidebar est optionnelle

• header (jaune)
• entête de page (vert)
• sidebar (rose)
• zone de contenu (bleu)

• Pleine largeur :
  • certaines maquettes laissent à penser que l’entête comme le menu est en plein largeur (non boxé)
  • seule la zone en dessous pouvant être complétée d’une sidebar est boxée

Attention : il semble que les maquettes proposent deux cas de pages :

• Cas des titres
  • le H1 de la page est dans la zone d’entête
  • le h1 de la page est dans la zone de contenu
• Case de la HP
  • la HP est en pleine largeur de page
  • les autres pages sont dans une cadre à fond blanc et contour bleu
• Camp :
  • prévoir une zone avant l’entête de page pour une bannière d’un camp

> voir si on ne peut pas uniformiser ces affichages pour gérer plus simplement les types de tpl

Codes couleur :

Navigation du site

Header : menu et sous menu

Header pages intérieurs

Section	Description
1ère ligne	Fond bleu foncé
Logo Drupal fr	Logo, clic : retour sur la page d'accueil
Entrées du menu principal	liens du Menu principal
Recherche	champ texte à gauche picto loupe pour valider la recherche (sert de submit)
Download	picto lien vers la page télécharger
User	picto lien vers /user, au clic apparition menu utilisateur
2ème ligne	Fond bleu clair
x liens	sous menu (niveau 2) Défaut : blanc Actif : Gras, parent actif Gras

• Par défaut, on ne voit pas le niveau 2
  • Si je clique sur une des entrées du niveau 1, je vois les sous pages niveau 2
  • le premier lien de niveau 2 correspond à l’entrée du niveau 1

Ex :

• Niveau 1 Emploi : liste des jobs
  • Niveau 2 :
    • Offres d’emploi : liste des jobs
    • Annuaire des sociétés : autre page

Changements par rapport à la maquette

• Ajout du picto User à droite
• Menu niveau 1 : augmenter la taille de la police

Header de la HP

Sur la page d’accueil le menu est un peu différent :

• le logo drupal est au dessus et centré
• à droite du logo on retrouve juste la recherche (download et user apparaissent au scroll voir les comportements au scroll du header (Comportements-du-Header)
• en dessous centré les entrées de menu 1

Comportements du Header

• Page d’accueil : format centré plus haut
• Toutes les autres pages : header 1 ligne + second menu sur une autre ligne en dessous

• Dans tous les cas, au scroll ces deux lignes restent en sticky en haut de page.
• Dans le cas de la HP, le header haut se transforme en header simple et se pose en sticky

Footer

Section	Description
Colonne 1
Qui sommes-nous ?	Texte court sur le périmètre du site
Colonne 2
Liens	Rappel des liens de niveau 1
Colonne 3
Newsletter	bloc d’inscription à la NL
Réseaux sociaux	Liens vers les pages diverses
Contact	Liens vers la page de contacts
Dernière ligne
Liste de liens	liens vers des pages statiques

Colonne 1 : Qui sommes-nous ?

• Texte à écrire

Liens colonne 2

• Découvrir Drupal : page découvrir
• Documentation : page documentation accueil
• Assistance : page FAQ
• Emploi : page offres d'emploi
• Communauté : page présentation communauté
• L’association : page présentation asso

Colonne 3

• Garder le contact : bloc d'inscription à la newsletter
• Suivez-nous sur :
  • twitter / facebook / linkedIn
• Contact : page de contacts

Dernière ligne : liens statiques

• à propos : page à propos
• Adhérer : page adhérer
• Télécharger : page télécharger

Composition des pages / types de tpl

• Types
  • Page tpl avec paragraphe :
    • premiers champs > bloc bleu
    • paragraphes
    • références à des blocs

HP	page tpl paragraphe
page découvrir	page tpl paragraphe
page liste références	Vue centrée
page FAQ	page tpl (avec blocs en sidebar)
Forum	custom
Communauté	page tpl paragraphe
Meetups	vue custom rbnb
Page détail camp	tpl à part
Page planète	vue centrée
page d’un user	page d’un user
l’asso	page paragraphe
contribuer	page paragraphe avec une sidebar
adhérer	page paragraphe
liste des actus	vue avec sidebar
liste des emplois	vue
téléchargement	vue avec sidebar

Il manque : Page médiathèque, la liste des camps, modes de contact