About iDufour

The concept of iDufour  popped in my mind as a way to present 15 years of experience in the Internet industry from a unique point of view. Therefore, I imagined a full website including modern design, functionnalities, technolgies and interactions to describe my professional career.


On iDufour , skills are products evolving years after years like a software would one versions after another. Employers are clients who trusted my products to manage and deliver their projects under tight schedules and inline with ambitious business objectives.


I hope you liked the experience and I would be thankful if you could share it around ! I am currently seeking executive positions in Product, Product Development, Product Marketing or e-Commerce.


For the most curious, you can read in this last section on how the website was thought and delivered.

 

The User Interface of iDufour  is directly inspired from the huge work that had been done on Time of My Life  for the past few years. The result is very close what Time of My Life  would have looked like if the service was still online.


Back then, I did the full integration of the User Interface including:

  • Working on the master photoshop files to design all graphical elements, buttons, backgrounds, images and photos,
  • Optimization of all graphical elements in gif, png, png with alpha transparency or jpg,
  • HTML templating for the diffrent layouts needed for the website,
  • Creation and optimisation of all the style sheets needed to make the design exactly to the pixel as displayed in the photoshop files,
  • Cross-browser validation to make sure the design would be the same in every environment.


For iDufour , I essentially redesigned all the graphics to fit the needs of the website. In order to compare the design differences between both websites, you can have a look to what the Time of My Life  homepage was like: ToML Home Page

iDufour is conceived to be very straight forward in terms of navigation. All content has to be accessible from any page of the website. There is only one level of navigation, one page per category and page content is only loaded once.


Topic navigation inside a category is done with tabs. The content is preloaded and category topics are accessible in one click by selecting the proper tab. The whole idea behind this is to avoid unecessary page load and to have fewer pages to maintain. On a design point of view, the tab components are deliberatly different one from another in terms of look and feel. It is mostly to demonstrate the various possibilities offered by tab navigation: plain tabs, icons, logos ...


Some additional content like the quotation text is not to be linked to any specific category. The content volume is not enough to justify a specific page either. Therefore, it is displayed in a modale window which could be displayed on top of any page of the website.


In addition to the tab navigation, the content links topics one to another which gives one click access to a specific topic instead of two in the default navigation flow by clicking on the category tab then on the topic one.


And finally, one intended goal of iDufour  is to go viral. In order to achieve this, social modules from Add This have been added to each page so sharing would be easy and straight forward on various social platforms.

iDufour could have been coded in various ways depending on what goals were to be achieved. For practical reasons, the entire website is static. It was more straight forward as there are only 4 pages to maintain. It was also a way to guarantee good performance level by relying on fewer server-side components (PHP or MySQL).


Decision was made to rely on more client-side components instead. The website includes some state-of-the-art elements to build a fully interactive user interface:

  • YUI library to build javascript components like the homepage carousel or the different tab navigations,
  • Personal scripting to detect browser language and redirect user to the correct version of the website,
  • Session cookie to store the user language preference,
  • Email address encryption to avoid spam bots to catch email adresses displayed in the content,
  • HTML5 compliant tags and page structure to ensure cross-browser and cross-device compatibility.


On the Search Engine Optimization part, meta tags were included to describe each page properly. An XML site map was done to optimize crawling perfomance of search engine robots.


A tracking has also been added to iDufour  in order to measure visits, navigation, time spent on the website...