La charte graphique

Ebauche de la charte graphique du site web du REF-Union - 24 juillet 2002

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

En société, très vite, dès que l'on désire faire quelque chose avec les autres, l'on s'aperçoit qu'il faut définir des règles strictes et s'y tenir sinon, c'est l'anarchie !

Quelques exemples en vrac : code de la route, droit à l'antenne, civisme, respect d'autrui, droit à l'antenne, hygiène, règles de trafic sur l'air, l'examen radioamateur … etc.

Bon, ce qui nous intéresse ici, c'est de définir des règles de publication simples afin que tous nous parlions le même langage !

Déjà j'affirme, que le site doit garder une certaine unité dans le domaine graphique, sinon l'internaute aura le sentiment de quitter le site d'origine ! (Le mot Union n'aurait plus de sens ?).

Remarque : Il peut y avoir plusieurs niveaux d'arborescence, mais il est préférable de ne pas dépasser 2 niveaux !! Si vous rencontrez des difficultés, vous pouvez me contacter ici, j'aurai le plaisir de vous aider à monter votre page.

Mais aussi, en vrac : (et dans la mesure du possible)

• pas de Pop Up intempestif !
• pas de messages défilant dans le cadre du bas de page ! (ex. "Bienvenue sur le site de la radio-orientation" reste affiché alors que l'on est ailleurs ?)
• pas de fontes autre qu'Arial (les fontes exotiques ne sont pas reconnue par tous !)
• pas de taille (ou peu) supérieure à 10 points ! les taille prohibitives "mangent" de la place pour rien ... surtout si l'utilisateur final a paramétré une taille de texte supérieure à la moyenne dans son navigateur ?
• pas de souligné autres que les liens, et les titre en gras !
• renseigner les "alt" quand on insère une image !
• un minimum d'animations dans une page !
• pas de page trop lourde en longueur ! maxi 10 Ko pour une page d'accueil ! 25 Ko pour une page rubrique longue !
• si vous avez beaucoup d'images à publier le faire sous la forme d'un album avec des images "vignetées" 100X75 pixels avec un lien vers l'image en taille "normale" dans une nouvelle fenêtre.
• les images devront être retravaillées en taille (maximum 320X240)
• pas de texte dans des images
• pas de couleur criardes (texte fonds...)
• pas de texte en blanc sur un fond de couleur foncé
• pas de mise en favoris automatique (ou semi) car l'internaute doit se sentir libre, d'ailleurs qui mettrait dans ses favoris un site de mauvaise facture ?
• pas de taille de fenêtre forcée, la aussi respectons la liberté de l'internaute.
• ne pas remettre le titre Ref-Union dans le cadre du bas
• quand il navigue l'internaute ne doit jamais "perdre" le cadre du haut !
• pas de pub ...
• le code HTML doit être autant que faire se peut conforme à la norme : http://validator.w3.org/ 

etc.

Accueil du site

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

Pour information, voici la structure succinte de la page d'accueil qui est le point d'entrée sur le site du REF-Union :

• la première instruction (dans Body) est l'include de barnav ("barnav.inc", est gérée par le webmestre et se trouve sous le répertoire /include c'est le menu du haut) :

  • le titre

  • puis le menu général

  • et à droite les menus déroulants (Ed, Fédérations... etc.).
    NB : L'ensemble des liens du site y figurent en permanence, ainsi l'internaute n'est en théorie jamais perdu !

• une ligne "vous êtes ici :" devrait rassurer l'usager sur l'endroit où il se trouve ?

• le contenu de la page d'accueil est inclus dans un tableau de 2 colonnes. Sa structure est fixe :

  • Dans la cellule de gauche figurent deux photos (maximum de 320x240 pixels et 256 couleurs),

  • dans la cellule de droite figurent toutes les dernières publications sur le site issues d'une page conjointe "Actualités" et récupérée par include. Dessous l'édito du président apparaît également suite à un include de la page "édito".

NB : Pour information le webmestre de REF-Union est responsable de cette page

Page unique courte sans sous-menu gauche

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

C'est la page en bout d'arborescence. Attention aux pages trop longues :

• elle peut s'afficher sur toute la largeur du tableau centré et dimensionné à 95% de la largeur d'écran.
• exemple : Adhésion
• pour récupérer le code de la Page unique courte sans sous-menu gauche

Page unique longue sans sous-menu gauche

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

Idem à la page unique courte mais avec un contenu plus long ...

C'est la page en bout d'arborescence. Attention aux pages trop longues :

• elle peut s'afficher sur toute la largeur du tableau centré et dimensionné à 95% de la largeur d'écran.
• exemple : Fournisseurs
• pour récupérer le code de la Page unique longue sans sous-menu gauche

Menu de gauche page rubrique

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

Le menu rubrique s'affiche dans la cellule gauche du tableau de la page, (dans la cellule de droite il y a le contenu de la page) :

• en haut votre logo en 130X98 pixels maximum
• la largeur du cadre est en moyenne de 150 pixels !
• en dessous du logo s'affiche en permanence le menu rubrique (il permet l'accès aux niveaux inférieurs de l'arborescence, l'internaute ne devrait pas s'égarer ?) (ne pas modifier la structure ni les puces)
• enregistrez ce fichier sous le nom : barnav_gauche_nom-de-votre-page.inc sous le répertoire "\include" du site.
• pour récupérer le code de la page Menu de gauche page rubrique

Page rubrique courte avec menu gauche

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

C'est la page en bout d'arborescence. Attention aux pages trop longues. Le contenu de la rubrique est dans la cellule droite du tableau (à 95% de la largeur) de la page. Sa structure est fixe.

Même principe que la page d'accueil du site :

• elle peut s'afficher sur toute la largeur du tableau du bas à 95% de la largeur d'écran.
• dans la cellule de gauche le menu gauche page rubrique
• dans la cellule de droite le contenu de la page

• le responsable de cette page est le webmestre associé. (par exemple voir ici : Auxerre)

• pour récupérer le code de la Page rubrique courte avec menu gauche

Page rubrique longue avec menu gauche

Ebauche l Accueil du site l Page unique courte sans sous menu gauche l Page unique longue sans sous-menu gauche Menu de gauche page rubrique l Page rubrique courte avec sous menu gauche l Page rubrique longue avec sous menu gauche

Idem à la page rubrique courte mais avec un contenu plus long ...

C'est la page en bout d'arborescence. Attention aux pages trop longues. Le contenu de la rubrique est dans la cellule droite du tableau (à 95% de la largeur) de la page. Sa structure est fixe :

• elle peut s'afficher sur toute la largeur du tableau centré et dimensionné à 95% de la largeur d'écran.
• exemple : La page du webmestre
• pour récupérer le code de la Page rubrique longue avec menu gauche