Centre International de Recherche

sur l’Environnement et le Développement


Nos tutelles

CNRS Ecole des Ponts CIRAD EHESS AgroParisTech

Nos partenaires

R2DS MPDD FUTURS URBAINS LCS-R Net

Rechercher




Accueil > Rubrique de services > Projet site web - Sun Wu Kong > Documentation

Sur la mise en page de ce site

Variation sur le kit graphique CNRS SHS

publié le , mis à jour le

La maquette de ce site a été faite à partir du kit graphique CNRS SHS. Un grand merci à la DSI pour avoir produit ce kit graphique clair et très complet.

La mise en page de ce site est complètement définie par une feuille de style, et je n’ai pas pu résister à l’envie d’apporter quelques modifications par rapport au modèle visuel proposé par la DSI. En conséquence, ce site ne suit pas rigoureusement la charte graphique. Cet article explique pourquoi, à mon sens, ces modifications sont des améliorations.

La plupart des modifications sont justifiées en référence à l’article 47 de la loi sur l"accessibilité stipulant que les services de communication publique en ligne des services de l’Etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées. Voir en particulier le Référentiel accessibilité des services Internet de l’administration française.

Caractères de couleur noire et plus larges

Les caractères gris de petite taille spécifiés par la charte se sont avérés difficilement lisibles avec certaines configurations d’écran/yeux, nous avons choisi une combinaison de tons plus contrastée et une taille des caractères plus large.

Boite de recherche unique, plus large et au milieu

Avoir une seule boite de recherche simplifie l’utilisation du site. Pour offrir un confort supplémentaire à l’utilisateur, nous avons élargi la boite par rapport aux recommandations, ce qui nous a conduit à la sortir de la barre de navigation.

Barre de recherche et d’authentification

L’observation des pratiques d’Amazon a conduit à la création d’une barre horizontale en video inverse contenant la boite de recherche. Cette barre contient aussi le sélecteur de langue (absent des recommendations DSI) et le lien pour s’authentifier.

Explicitation des liens utilitaires (accueil, plan, contact...)

En plus de l’icône standard, nous mettons un texte sur liens utilitaires : Accueil du site, Plan du site, Crédits, Nous écrire et Accessibilité.

Utilisation du logo de l’unité

La charte graphique excluait la possibilité d’avoir le logo CIRED en haut à gauche puisque le nom du labo a plus que 5 mots. Le site outrepasse cette recommendation.

Maquette à largeur adaptative

Nous avons opté pour une mise en page fluide qui s’adapte à la largeur de la fenêtre, au lieu de la largeur fixe de 800 pixels spécifiée par la charte.

La colonne de gauche mesure 170 pixels de large pour loger le logo CNRS. La bande du haut mesure 75 pixels de haut, pour loger le logo CIRED, la double découpe et les liens CNRS / SHS / Autre sites CNRS. Lorsque le visiteur est authentifié, les boutons d’administration SPIP s’affichent en haut à droite dans cet espace.

Moins d’icônes

Compte tenu du nombre déjà élevé d’élements graphiques qui pèsent sur le chargement de la page et des remarques fonctionnelles ci dessous, nous avons utilisé les icones moins systématiquement que prévu par la charte.

Concernant ces icônes, nous trouvons que les images manquent d’harmonie (taille, forme, densité de couleur, niveau d’abstraction). C’est peut-être simplement un problème de classement en sous répertoires ? Mais surtout nous nous interrogeons sur le fonctionnement du système graphique. On a pas trouvé la clé pour décider quand et où utiliser les icônes proposées.

- Une icône par rubrique ? On aimerait utiliser le logo CIRED réduit pour la rubrique "Présentation du labo". De plus les concepts représentés ne correspondent pas toutes clairement à notre rubriquage ni à notre contexte (exemple : atomes et éprouvettes).

- Une icônes par article ? Il serait alors utile de coder une extension à SPIP pour qu’il permette au rédacteur d’un article de choisir une icône parmi la liste du kit, comme pour les smileys dans les forums.

Les liens externes restent dans la même fenêtre

Nous n’avons pas suivi les recommandations spécifiant que les liens externent ouvrent une nouvelle fenêtre.

Techniquement, les liens vers le CNRS sont créés en imagemap à la CSS : texte invisible en positionnement absolu par dessus l’image de fond. Les liens sont créés par le fragment de code html suivant :

<h1 class="structure">Les tutelles</h1>

<a id="organisation" href="http://www.cnrs.fr/" class="topmenu"><b>Le CNRS</b></a>
<a id="division" href="http://www.cnrs.fr/SHS/" class="topmenu"><b>Acceuil SHS</b></a>
<a id="annuaire" href="http://www2.cnrs.fr/band/5.htm" class="topmenu"><b>Autres sites CNRS</b></a>

Nous avons essayé de positionner les logos en tête de colonne de gauche, mais 1/ ça renvoyait la barre de navigation sous le premier écran, et 2/ l’effet visuel manquait d’harmonie avec le reste de la page. Après réflexion nous avons donc décalé les logos vers le bas, mais pas trop pour que les tutelles primaires apparaissent quand même toujours sur le premier écran sans scroller.

Les liens ne sont pas soulignés dans la feuille de style, on préfère laisser le choix à l’utilisateur (les liens sont soulignés par défaut dans IE).

Quelques autres détails techniques sur le kit

En attendant des rapports de bugs ou commentaires sur la mise en page, voici quelques remarques sur le kit graphique. Que du détail, puisque j’ai trouvé que l’ensemble est par ailleurs tout à fait opérationnel :

- J’ai une icône qui rentre pas dans notre serveur SVN à cause d’un problème d’encodage UTF8.
- La résolution des images dans le kitLabo.pdf est insuffisante : on a du mal à lire les cotes et les pages d’icônes.
- Le zip n’a pas de numéro de version et il ne se décompresse pas dans un répertoire unique
- Je n’ai pas bien saisi le rôle respectif des deux feuilles de style styles.css et xcharte.css.
- La séparation entre les éléments impératifs relatifs à l’image du CNRS, et les recommandations et les suggestions techniques relatifs au web mériteraient d’être encore mieux tracée.
- C’est pas du Kit Graphique, mais je pense que l’harmonisation devrait s’étendre aux intitulés des rubriques, comme pour les icônes. Et on devrait aussi harmoniser une table de traduction dans toutes les langues européennes.

Vous pouvez réutiliser et redistribuer ce squelette, mais :
- Le style CNRS-SHS n’est pas réutilisable pour un site non affilié au CNRS.
- Ce style n’est pas le style CNRS-SHS c’est une variante non homologuée.
- Si vous faites des modifications utilisées sur un site en ligne il faut que le squelette modifié soit aussi en logiciel libre.

Si le résultat ne vous plaît pas, n’hésitez pas à le dire dans le forum ci-dessous, c’est fait pour discuter. Si il vous plaît, dites le aussi ça fait toujours plaisir, et après c’est par là pour télécharger les squelettes et les styles.