Sommaire

1. Mise en page
2. Images
3. Calendrier
4. Couleurs

1. Mise en page

Nous voulions une mise en page qui soit la plus fluide possible. Il est en effet important que le contenu soit consultable dans les plus petits écrans comme dans les plus grands. Nous avons directement rejeté l'idée d'une mise en page de largeur fixe. En effet, en cherchant l'accessibilité, pourquoi pénaliser les écrans larges au bénéfice des petits ? La largeur des deux colonnes est donc exprimée en pourcentage afin qu'elles puissent être étirées à volonté. Les marges latérale de cinq pixels sont un compromis pour laisser des espaces aérés et éviter une surcharge visuelle.

Pour le rapport de largeur des deux colonnes (60% pour la colonne de gauche, 34% pour celle de droite) nous avons d'abord tenté de nous baser sur le nombre d'or grâce au petit programme Phiculator. Cependant les valeurs idéales ont été quelque peu aménagées. L'idéal doit dépendre de la situation parce qu'en l'occurrence, ces valeurs donnaient une largeur exagérée au menu au détriment de la zone de contenu.

Nous avons rencontré un problème avec le positionnement des images de l'effet d'ombre du fond. Ce positionnement dépend directement de la position de la colonne centrale fixée en pourcentages. Il nous a donc fallut placer l'arrière plan dans la même unité.
L'explication du problème étant aussi fastidieuse que sa solution, vous pourrez consulter le billet « Positionnement des images d'arrière plan en pourcentages » pour plus d'informations.

Retour au sommaire

2. Images

Toutes les images utilisées dans le thème sont fortement optimisées afin de prendre le moins de place possible. Le poids cumulé de la totalité des images du site est de 51Ko.
Nous utilisons deux types d'images. Tout d'abord des images d'arrière plan. Celles-ci sont ajoutées par la feuille de style CSS. Elle permettent notamment de démarquer les différentes zones de la page — par exemple de distinguer le contenu et le menu principal — ou de faire ressortir les titres. Il est important de noter que ces images sont complétées par des couleurs de fond et des informations de mises en forme diverses. Ainsi, leur désactivation ne change que peu l'apparence générale des pages.
Ces images d'arrière plan sont ensuite rejointes par des images placées dans le code HTML des pages. Ces dernières sont donc encore visibles une fois la feuille de style désactivée ou bien « lisibles » dans un navigateur texte ou un lecteur d'écran grâce à leur attributs ALT. Ces images n'ont pas été placées là par hasard et leurs attributs de texte alternatif n'ont pas été renseignés en désespoir de cause. Nous avons essayé de fournir le maximum d'information pour tous les médias. Ainsi ces images ont-elles un double rôle dans les pages en apportant d'une part des repères visuels pour les navigateurs graphiques et fournissant d'autre part des informations de contexte pour les navigateurs alternatifs.

Retour au sommaire

3. Calendrier

Testé dans un navigateur texte, le calendrier d'origine présente une navigation laborieuse. En effet les changements successifs de mois ramènent à chaque fois en haut de page. Ce comportement relativement pénible lorsque l'on veut exécuter une recherche par le calendrier et rien d'autre devient réellement gênante lorsque l'on doit parcourir plusieurs mois pour trouver le bon.
Nous avons donc tenté de solutionner ce problème.
L'ajout d'ancres dans les liens à permis de se retrouver au niveau du calendrier après chaque changement de mois. Un nouveau lien intra-page placé ensuite sur le nom du mois courant permet de revenir au début de la liste des billets de ce mois une fois le parcours chronologique terminé.

Les liens "mois précédent" et "mois suivant" possédant à l'origine des libellés en format texte — respectivement « et » — ont été transformés en images. Ce changement à permis d'alléger la présentation graphique de la page dans laquelle les libellés sous forme de flèches graphiques sont sans ambiguïté et de fournir une information complète aux navigateurs texte ou vocaux.

Retour au sommaire

4. Couleurs

Bien que choisies en premier lieu pour correspondre à nos goûts du moment, les couleurs ont ensuite été adaptées avec soin. Vous pouvez constater sur les captures d'écrans ci-dessous que le thème reste tout à fait lisible même avec un handicap visuel (Les simulations ont été réalisée grâce au logiciel Sim Daltonisme) :

Thème vu à travers un filtre simulant une protanopie (Rouge-vert).

Thème vu à travers un filtre simulant une tritanopie (Bleu-Jaune).