cbsch.net

Principes directeurs.

Avant de me lancer dans mon travail, j'ai mené quelques réflexions fondamentales, pour m'aider à dresser le cadre de mon blog et définir sa structure. J'ai notamment pensé aux éléments suivants:

• créer une logique naturelle dans la navigation
• rendre le design agréable à l'oeil et fonctionnel
• simplifier au maximum la navigation et les menus
• créer un blog ergonomique, accessible et agréable

Bien que ces considérations restent très vagues, elles n'en sont pas moins nécessaires. En outre, par ces réflexions préliminaires, une certaine idée du site tel qu'il apparaîtra dans sa version définitive se dégage. Reste à les mettre en pratique.

Définition de l'audience.

C'est une donnée fondamentale: sans elle, on se retrouvera avec un site sans queue ni tête, une navigation hasardeuse et incompréhensible ou, pire, un contenu à l'allure de patchwork. Selon moi, le blog de cbsch.net devait toucher en premier lieu des recruteurs et des programmeurs: en fin de compte, il s'agit un peu de ma carte de visite. Du coup, les sujets abordés devaient traiter d'informatique (tout en indiquant, par le titre de mon blog, que l'informatique n'est pas ma formation d'origine).

J'ai donc imaginé ainsi mon public: 40% des utilisateurs seraient des recruteurs ou des informaticiens ne venant sur mon blog que pour avoir un rapide aperçu de mon travail. Il était donc primordial de fournir un produit très clair, sobre, facile à lire et à parcourir, avec des articles et des rubriques ciblées, pas trop nombreuses (afin de garder l'attention du lecteur après une minute), tout en définissant du mieux possible mes attentes et mes buts dans le développement web. Dans cet état d'esprit, je me devais de réserver une petite place pour des données personnelles (pas encore insérées malheureusement, je manque cruellement de temps), sans qu'elles n'encombrent la lecture des autres visiteurs, voire mieux, en leur proposant en un coup d'oeil un petit encadré "intéressant" à mon propos.

J'ai ensuite défini que 40% des utilisateurs de mon site allaient être des amis, des connaissances ou des personnes de passage sans réel intérêt dans les sujets abordés. J'ai donc prévu, à terme, d'insérer dans ce blog des liens vers mes autres sites personnels (en cours d'élaboration). J'ai également décidé d'insérer une rubrique concernant les MMORPG: en fin de compte, les facteurs de design et d'ergonomie sont aussi des sujets précieux dans le monde vidéoludique.

Pour finir, seuls 20% des utilisateurs seraient des informaticiens. Je ne comptais pas, a priori, référencer mon site de manière internationale. Du coup, le nombre de personnes averties à le lire seraient peu nombreuses (les faits m'ont donné tort, vu qu'environ 65% des requêtes faites sur le site concernent des sujets techniques, avec des mots-clés comme aDesigner, PDF accessible ou workflow).

Buts.

Les quelques buts que je me suis fixé sont simples:

• créer une petite carte de visite
• ancrer le plus profondément possible dans le site tous les principes d'accessibilité et d'ergonomie: cela passe par la réécriture complète du code XHTML et partielle du PHP
• montrer qu'un site accessible peut être agréable à l'oeil, voire fournir du contenu très "contemporain" (AJAX, par exemple)
• prévoir une structure XHTML simple, souple, fonctionnelle et prospective
• être proactif dans mes développements, et ne jamais pallier un défaut "à la va vite"

Principes de développement.

Les normes d'accessibilité, contrairement à ce que pensent certains développeurs étroits d'esprit, ne limitent pas les possibilités de développement ou de graphisme: elles les canalisent. Une fois définis les principes que l'on veut appliquer sur le site, des solutions accessibles peuvent être envisagées et, dans la plupart des cas, d'une façon élégante et adéquate. En termes de développement pur, j'ai donc choisi les options suivantes, dès le début de mon travail:

• utiliser un CMS simple, très malléable et paramétrable. Il me fallait pouvoir modifier le plus simplement possible le frontend, ajouter des fonctions supplémentaires, en modifier d'autres, etc.
• prévoir une modification de l'apparence figée de l'outil blog, certains ne me satisfaisant guère (comme le calendrier), tout en conservant à la fois la fonction du blog et son identification en tant que tel par les internautes
• créer une CSS en unités relatives au maximum
• prévoir des emplacements permettant d'accueillir d'autres aménagements (qui n'ont d'ailleurs pas encore été inclus dans le site actuel): une valeur ajoutée pour les voyants (options affichées en AJAX) et une pour les aveugles (ajout de billets lus au format MP3)
• restreindre le nombre de données et d'éléments redondants (dates de publication, mots-clés, etc.)

Principes de templating.

Il me paraissait important de fonder tout mon travail sur l'exploitation d'unités relatives. Comme je prévois à terme de doter le site de plusieurs feuilles de style sélectionnables, j'ai décidé de commencer mon travail par un style un peu hybride. Concevoir la page totalement relative dans sa largeur, mais garder certains éléments fixes en hauteur. La raison en est simple: comme je m'orientais vers un design comportant quelques éléments de décoration peu compatibles ou problématiques (cadres arrondis et dégradés), je pouvais ainsi garder une page dont la largeur serait "élastique" tout en donnant l'illusion à l'internaute qu'il se trouve sur une page "standard", fixée en unités absolues. De plus, ce style à mi-chemin entre les deux techniques me laisse la porte ouverte à des modifications faciles par la suite.

La deuxième grande question concernait les couleurs à employer. J'ai donc commencé par choisir un bleu roi, très proche de la couleur des liens par défaut, dont la saturation et la luminosité étaient suffisants pour des questions d'accessibilité. J'ai décidé de garder le blanc pur comme couleur de fond. Pour finir, j'ai défini l'orange en inversant la couleur bleue employée, puis en l'obscurcissant un peu (la couleur d'origine manquant de contraste). J'avais ainsi les prémisses d'une charte graphique basée sur trois couleurs:

• orange pour les titres et la barre de navigation: ces éléments devant se distinguer du reste sur la page
• bleu pour le titre et les liens: toutefois, j'ai bien veillé à garder les typographies de l'image de titre blanches sur fond bleu, et non l'inverse (il ne s'agit pas de liens, mais de titres)
• gris clair pour le fond de la page: moins fatiguant pour le regard qu'un blanc pur, il met en évidence le contenu de la page

J'ai ensuite cherché définir la position des différents éléments sur ma page. Le menu, notamment, a causé de nombreuses interrogations. Logiquement, il devrait se trouver sur la gauche, tous les internautes s'attendant à l'y trouver (ou presque). D'un autre point de vue, les menus situés à droite sont relativement fréquents sur les blogs (ils le sont même par défaut sur plusieurs templates fournis pour Wordpress, par exemple. De plus, comme je désirais alléger considérablement la navigation (et la rationnaliser surtout), je ne voulais pas que mon menu encombre le contenu. Car, en fin de compte, c'est le center stage de ma page qui est important. Le menu, sur mon blog, n'est qu'un moyen alternatif de le visiter si l'un des articles en page d'accueil a capté l'attention. En fin de compte, comment et pourquoi navigue-t-on sur un blog?

1. On y vient par hasard, on regarde les titres en faisant défiler la page: si ça nous intéresse, on va alors chercher les rubriques (chercher une date de publication serait... étonnant).
2. On y arrive en ayant suivi un lien. On arrive donc sur la page d'un article. Les liens les plus susceptibles d'être activés sont ceux pointant vers la page d'accueil ou vers une catégorie.
3. On consulte le site de manière épisodique: on va commencer par regarder les derniers articles sur la page d'accueil ou directement sur la page de la rubrique qui nous intéresse, puis naviguer sur le site en utilisant soit les dates de publication, soit les rubriques.
4. On consulte très régulièrement le site ou on veut le faire: la syndication doit donc être un élément très visible et très facilement accessible.

On le voit bien: les éléments les plus importants du menu seront, dans l'ordre d'importance, le lien pointant vers l'index, la syndication (parce que je veux que beaucoup d'internautes consultent régulièrement le site) et l'affichage des catégories, les autres éléments ayant une importance secondaire (la navigation par date représentant de loin la moins pratiquée: cela me fournit une raison de plus pour éliminer le petit calendrier qui apparaît par défaut). Ces trois catégories de liens seront d'ailleurs les seules à rester permanentes sur toutes les pages. En effet, comme les menus redondants peuvent alourdir ou agacer lorsqu'ils sont répétés (surtout là où elles ne sont pas utiles), j'ai décidé d'éliminer l'affichage des éléments secondaires sur toutes les pages hormis l'index.

Pour finir mes réflexions sur le menu, voici donc un concentré de mes décisions:

• titre de la page avec une forte identification: le bandeau doit contenir le titre, le slogan, et la description du site en deux coups d'oeil
• center stage fortement contrasté, qui attire le regard, focalisation sur le contenu
• menu dédoublé: une navigation verticale coupant la lecture, avec un contraste fort, et comportant les deux liens les plus importants (retour à l'accueil et syndication, avec l'ajout du contact) et un menu à droite, prolongeant le regard et comportant en premier lieu les rubriques, puis les autres éléments
• pied de page totalement dissocié, ne véhiculant que des informations optionnelles

Telles furent donc mes premières préoccupations. J'approfondirai certains points dans des articles futurs.