A propos d' iDufour

L'idée d'iDufour  m'est venue pour présenter mes 15 ans d'expérience dans l'industrie Internet sous un angle inédit. J'ai par conséquent imaginé un site web complet avec un design , des fonctionnalités et des technologies modernes. Un soin particulier a été porté à l'interactivité pour profiter pleinement de l'expérience.


Sur iDufour , les compétences sont des produits qui évoluent années après années comme un logiciel évolue versions après versions. Les employeurs sont des clients qui ont fait confiance à mes produits pour gérer et livrer leurs projets souvent avec des contraintes de temps et d'objectifs très ambitieux.


J'espère que vous avez apprécié l'expérience et je vous invite à en parler autour de vous ! Je suis actuellement en recherche active d'opportunités pour des postes de Direction Produit, Direction du Développement Produit, Direction Marketing Produit ou Direction e-Commerce.


Pour les plus curieux d'entre vous, vous pouvez découvrir dans cette dernière section comment le site a été pensé et realisé.

 

L'interface utilisateur d'iDufour  est directement issue de l'énorme de travail de design qui a été fait sur Time of My Life  pendant 4 ans. Le résultat est d'ailleurs très proche de ce à quoi Time of My Life  pourrait ressembler si le service était toujours en ligne.


Durant cette période, j'ai assuré l'intégralité de l'intégration de l'interface utilisateur :

  • Travail sur les fichiers Photoshop source pour définir tous les éléments graphiques du site (boutons, images de fond, photos...),
  • Optimisation tous ces éléments pour intégration (gif, png, png avec transparence alpha, jpg),
  • Création des modèles de page nécessaires à la réalisation du site,
  • Création et optimisation de toutes les feuilles de styles nécessaires à la réalisation "au pixel" du design validé,
  • Validation de la compatibilité du design entre les différents navigateurs et de la portabilité du site (ordinateurs, tablettes, smartphones...).


Pour la réalisation du site iDufour , j'ai essentiellement retravaillé les éléments graphiques pour coller au propos. Si vous souhaitez voir la différence entre les deux sites, voici ce à quoi Time of My Life  ressemblerait : Page d'accueil ToML

iDufour a été conçu avec une navigation très simple. Tous les contenus doivent être accessibles facilement depuis toutes les pages du site. Il n'y a qu'un niveau de navigation, qu'une seule page par catégorie de contenu et le contenu de chaque page n'est chargé qu'une seule fois.


La navigation entre les sujets d'une catégorie se fait par onglet. Le contenu d'une catégorie est entièrement préchargé et l'accès aux différents sujets se fait en un clic lorsque l'on sélectionne l'onglet souhaité. L'idée qui a guidé ce choix est d'éviter de charger des pages différentes inutilement et réduire le nombre de pages à maintenir. D'un point de vue du design, les barres d'onglets sont sciemment toutes différentes les unes des autres. L'idée est de démontrer les possibilités de design pour une navigation par onglets : onglets pleins, icônes, logos...


Certains contenus comme la page de devis ne sont liés à aucune catégorie. La quantité de contenu ne justifiait pas en elle-même de créer une page dédiée. C'est pour cela que le contenu de cette page est affiché dans une fenêtre dite "modale" qui peut se positionner au-dessus de n'importe quel autre contenu.


En complément de la navigation par onglet, les sujets des catégories sont liés les uns aux autres au sein des pages, ce qui permet un accès en un clic à ces sujets au lieu de deux en repassant par les onglets des catégories.


Enfin, l'un des objectifs avoué d' iDufour  est de créer une certaine viralité. Par conséquent des modules dits "sociaux" ont été rajoutés dans chaque page pour permettre un partage simple et rapide sur la plupart des réseaux sociaux.

iDufour aurait pu être codé de multiples façons selon les objectifs à atteindre. Pour des raisons pratiques, le site est entièrement statique. C'est une approche plus directe car il n'y a que 4 pages à maintenir. C'est aussi une manière simple d'assurer un bon niveau de performance en réduisant les actions côté serveur (PHP ou MySQL).


La décision a été prise de plutôt s'appuyer sur des actions côté client (navigateur). le site inclut des éléments très actuels pour construire une interface utilisateur entièrement interactive:

  • La librairie YUI pour construire des composants javascript facilement comme le carroussel de la page d'accueil ou les différentes barres de navigation par onglets,
  • Des scripts personnels pour détecter la langue du navigateur et rediriger l'utilisateur sur la bonne version du site en fonction,
  • Un cookie de session pour mémoriser la langue préférée de l'utilisateur,
  • Les adresses email qui apparaissent dans le contenu sont encryptées pour éviter que les robots de spam ne les lisent,
  • Des balises et une structure de page compatible avec les standards HTML 5 pour assurer une compatibilité entre navigateurs et une meilleure portabilité (PC, smartphones, tablettes).


En ce qui concerne l'optimisation du référencement, les balises meta ont été renseignées pour décrire chacune des pages. Un plan de site en XML a également été mis en place afin d'optimiser les performances d'indexation.


Enfin, des scripts de mesure d'audience et d'actions utilisateur ont été inclus pour mesurer le nombre visites, le temps passé sur le site, les pages affichées...