Journal
Suivez l’actualité de Fairytree
Fairytree, version 3
Démarrée au début du mois d'octobre 2009, cette refonte s'est étalée sur 4 mois et c'est donc avec beaucoup de satisfaction que je vous livre ici la 3ème version de mon site professionnel.
Pourquoi une refonte ?
L'ancienne mouture répondais à un simple objectif: présenter de manière simple et concise mes prestations et mes réalisations. Je pense que cet objectif a été atteint, du moins dans un premier temps. Puis j'ai vite senti le besoin d'étoffer le contenu: donner des informations plus complètes sur mon activité, présenter plus amplement mes réalisations, créer une section actualités. Et puis mes compétences en design web ont évolué. Bref, il était temps de revoir ma copie.
Un peu de brainstorming
Pour commencer, j'ai simplement pris une feuille de papier et mis à plat mes différentes idées et tenté de définir mes objectifs. Au fur et à mesure, j'ai dégagé deux pistes différentes à emprunter, qui correspondent en réalité aux deux facettes de mon activité :
- une «agence web» qui réalise des projets dans leur intégralité,
- un «freelance» qui intervient sur des projets existants pour apporter des compétences spécifiques (en l'occurence, en webdesign et intégration HTML/CSS).
Ce sont effectivement ces deux aspects qui caractérisent mon activité. Au lieu de créer deux sections différentes, ou bien de favoriser un aspect au détriment de l'autre, j'ai décidé de mêler ces deux facettes dans l'organisation générale du site. Je ne sais pas encore si ce choix est le bon, l'avenir me le dira.
Des wireframes aux maquettes graphiques
Pour démarrer, je n'avais qu'un seul impératif: garder l'esprit graphique du site actuel. Côté contenu, en dehors de quelques éléments isolés en page d'accueil, je suis reparti de zéro.
J'ai utilisé Flairbuilder pour concevoir l'ensemble des wireframes. C'est un excellent logiciel, qui s'améliore petit à petit, et qui permet de créer des maquettes interactives particulièrement précises. J'en suis extrêmement satisfait et l'utilise désormais pour l'ensemble de mes projets.
Voici par exemple la maquette de la page d'accueil. Vous remarquerez que le design final du site reste assez fidèle à l'idée de départ:
Pour la conception graphique, je me suis aidé d'une grille de mise en page. Au départ, j'avais dans l'idée de reprendre un système existant (type 960.gs), mais créer une grille de A à Z était un défi qui me semblait particulièrement intéressant. J'ai donc conçu une grille sur une base de colonnes de 50px et de gouttières de 25px. Voici par exemple une capture de la page d'accueil, avec la grille affichée en surimpression:
Côté graphique, j'ai privilégié la création d'une une interface simple, parfois minimaliste, tout en accentuant le travail sur les différents éléments d'interface, notamment par l'ajout de relief (ombres, dégradés, bordures). Je pense que cet effort participe à une bonne expérience utilisateur.
Intégration et CSS3
Afin de simplifier le travail d'intégration, j'ai utilisé quelques propriétés CSS3 telles que text-shadow ou box-shadow. Bien entendu, celles-ci ne sont visibles que dans les navigateurs les plus récents.
Au niveau de la typographie, ma maquette prévoyait l'utilisation de la police de caractère Museo pour les titres de pages. Pour ce faire, j'ai utilisé le système Cufón. J'ai pris le temps de faire quelques tests avec TypeKit ou l'utilisation directe de la propriété @font-face, mais le rendu sous Windows est particulièrement instable. Vu le peu de texte où la police Museo est utilisé, la solution Cufón me paraissait donc la plus appropriée.
Si vous utilisez Internet Explorer dans version 6, ne soyez pas supris des problèmes de mise en page ou de transparence. Je n'ai fait aucun effort particulier pour corriger les problèmes et ne le ferait probablement pas. Le contenu reste accessible, et pour un navigateur aussi obsolète, je considère que c'est suffisant.
Côté développement
Le CMS qui tourne derrière le site est MODx Evolution. C'est un outil que je connais bien et celui avec lequel je me sens le plus à l'aise. Pour une personne avec un profil webdesigner / intégrateur, c'est le CMS idéal: maîtrise totale du code généré, mise en place simple et rapide des fonctionnalités, variables de modèles pour créer des types de contenus personnalisés, API très accessible même pour un non-développeur. Bref, je n'avais aucune raison de ne pas utiliser à nouveau mon CMS favori.
J'ai bien failli tenter l'aventure MODx Revolution (la nouvelle version de MODx, encore en version beta), mais devant le peu d'extensions disponibles, j'ai préféré me raviser. Ceci dit, je compte bien effectuer la migration une fois la version finale publiée (à venir au cours de l'année 2010).
Et ensuite ?
Maintenant que cette version est en ligne, je vais avoir tout le loisir de réfléchir à de nouvelles évolutions. Attendez-vous donc à voir de légères modifications et améliorations dans les mois à venir.
En tout cas, j'espère que vous prendrez autant de plaisir à découvrir ce site que j'en ai eu à le développer. Si vous remarquez des petites choses qui ne vont pas, n'hésitez pas à me contacter pour me les signaler.