L'histoire du site Jordanmaxou

Cette copie d'écran est la première réalisée sur le site Jordanmaxou. Réalisé avec le bloc-note de Windows, le site représente une dizaine de pages web en HTML simple. Je venais juste d'apprendre ce langage et la mise en page est très sommaire : une image de fond très lunaire, un usage abusif de la police de caractères Comic Sans Ms et une succession de tableaux. La couleur dominante est le noir et le texte est en blanc. Pour la première fois, on voit apparaître l'image célèbre de Michael Jordan de dos, avec son célèbre numéro 23. Il suffit de cliquer sur l'image pour accéder au reste des pages. Ce système était très répandu à l'époque sur internet et j'ai longtemps gardé cette image sur la page d'accueil du site.
J'ai créé le nom de domaine jordanmaxou.free.fr un peu au hasard. Je le trouvais amusant car c'était la contraction de mon prénom et de Jordan. Si j'avais imaginé maintenir ce site 10 ans plus tard, j'aurais certainement choisi un autre nom de domaine...
Pour l'anecdote, j'utilisais le site pour communiquer des documents de travail durant mes stages d'IUT. En effet, chaque jour, je faisais un compte-rendu d'activité que je rédigeais sur Word. Je faisais ensuite un lien vers ce document directement sur la page d'accueil. De cette manière, mes professeurs pouvait suivre l'avancement de mon stage.
Côté marketing, j'insérais énormément de bannières publicitaires les unes sous les autres. Dès qu'un site proposait un paiement par clic, j'ajoutais un nouveau lien. Evidemment, personne ne connaissait ce site donc inutile de vous dire que je n'ai jamais touché un seul centime à cette époque.

En 2003, j'introduis la fameuse animation Flash du taureau des Bulls. Ayant appris les rudiments de l'animation Flash, j'ai donc mis à profit cette compétence pour mon site personnel.
On retrouve la photo de Jordan de dos, avec son maillot des Bulls. L'internaute doit cliquer sur cette photo pour entrer dans le site.
Etant dans ma période Ciao (j'ai rédigé une cinquantaine d'articles), je mets en avant une publicité Ciao accompagnée d'un lien vers le site http://nba.cartes.free.fr.
Ce site, modestement nommé "le premier site d'échanges de cartes", a été conçu dans le cadre d'un projet tutoré à l'IUP SID.

Il y a un grand changement dans l'information donnée par la page d'accueil du site.
- on voit apparaître une bannière titre en haut à gauche. Un travail de design réalisé avec Photoshop est à souligner...
- l'image principale n'est plus celle de Jordan de dos mais celle du fameux concours de dunck de 1988. On le voit en pleine lévitation lors de son célèbre dunk depuis la ligne des lancers-francs.
- on voit apparaître les prémisses d'un menu gauche. Le ocntenu n'est pas extraordinaire mais les rubriques principales sont présentes : biographie, palmares, stats
- jouissant d'une petite réputation avec une centaine de visiteurs uniques par jour, je mets en avant ma photo et mon CV (je n'avais pas conscience que la moyenne d'âge des visiteurs ne dépassait pas les 17 ans donc opur trouver un éventuelle empliyeur intéressé...) Une particularité de cette version est la tête des Bulls qui suit la souris. j'avais trouvé un script javascript qui permettait à une image de suivre les mouvements de la souris. Ce qui m'a valu des commentaires du style : "il va me lâcher la souris ton taureau ?"

Petit retour en arrière dans le contenu de la première page. Retour à la photo de dos et l'animation Flash du taureau. Le menu gauche a disparu pour faire la promotion à mon site d'échanges de cartes et au site de l'association de l'IUP SID.
En effet, je suis le co-fondateur de cette association et j'étais notamment chargé de la création et l'animation du site internet de l'association AluSid.
Cette version est plus sobre que la précédente. Conscient de la popularité naissante du site, j'ajoute un compteur de visites.

Cette version marque un changement technique important dans la gestion du site. Je découvre le javascript, les styles CSS, l'ajax et MySQL.
Je crée moi-même le logo du site en assemblant les cornes des Bulls, le logo jumpan et un logo Air Max. J'ai adoré ce logo au point d'un faire des autocllants et un T-shirt (que je pensais vendre...).
Je propose même la traduction du site en anglais. Comme souvent, ce site me sert d'expérimentation technique et après avoir mis en place le système, je vais rarement au bout. Ainsi, je n'ai traduit que très peu de pages sur le site.
Conscient que la navigation doit être simple et complète, je propose un menu gauche vertical qui se déploit à la demande; avec un découpage en plusieurs catégories. Le nombre de pages du site commence à être important donc il faut structurer mon information afin qu'elle soit facilement consultable.
Appelé "News", je propose mon blog avec des articles traitant du basket et d'autres sujets. J'ai même une interface d'administration (lien Administration en bas à gauche) qui me permet d'ajouter des articles du blog et de gérer la question du jour.
La question du jour est une question simple avec 2 réponses possibles Oui et Non. Calqué sur le modèle du site lequipe.fr, j'ai réalisé ma propre question du jour en utilisant la technique d'ajax (cela permet de voter et voir les résultats sans recharger la page - c'est un confort pour l'internaute).
Je travaille un peu l'aspect référencement avec un texte d'introduction et en metant en avant les dernières pages créées.

Changement d'orientation et de style. Une têtière (entête) est créée pour donner le titre de l page courante et fournir un menu horizontal déroulant. J'ai énormement fait évoluer le menu au fil des mois, n'étant jamais satisfait et parcourant les sites web pour m'inspirer.
Un menu droit fait son apparition. J'y insère le moteur de recherche interne de Google, le formulaire d'identification vers l'espace privé, le sondage du jour et les articles du blog.
Concernant l'espace privé, j'ai créé cette fonctionnalité pour améliorer ma technique de développement. En effet, j'ai introduit la gestion des droits en proposant un contenu que seuls les internautres connectés pouvaient consulter. Mais, j'ai rapidement abandonné l'intérêt de cette fonctionnalité.
Au centre, on trouve un montage graphique haut en couleurs. Comme le menu, je cherche régulièrement l'inspiration pour trouver une idée originale.

Depuis quelques temps, je ne développe plus dans le cadre professionnel. La seule manière de m'améliorer techniquement est de travailler sur mon site personnel. C'est donc avec cette motivation que je vais améliorer mon site en le rendant le plus professionnel possible.
D'abord, d'un point de vue technique. Je travaille énormément sur les performances (temps de chargement côté internaute et côté robot d'indexation) et la compatbilité sur tous les navigateurs (IE, Firefox, Chrome).
Travaillant principalement dans le e-marketing, je travaille énormement mon référencement naturel en proposant un contenu de qualité et unique dans chacune de mes pages. Ce travail long et fastidieux est très gratifiant quand j'observe mon positionnement dans les résultats de Google (je suis sur la première page de résultats de toutes les requêtes contenant "Michael jordan").
J'ai découvert la bibliothèque jQuery et je vais beaucoup d'exploiter en proposant des "blocs" animés. Ces blocs réagissent automatiquement ou aux mouvements de la souris et proposent des liens vers des pages internes du site. Le menu est pour moi une grande réussite. J'ai réussi à trouver un modèle tendance (c'est la mode des méga-menus), facile d'utilisation et design. Je suis très satisfait jusqu'au moment où une autre inspiration me viendra...
D'un point de vue utilisateur. Je propose un pavé de sociabilisation en haut de mon menu droit. Ce pavé propose de noter la page courante dans Facebook, Tweeter et Google+ (ce sont les 3 principaux systèmes de sociabilisation).
Actuellement, j'ai plus de 300 visiteurs uniques par jour donc je soigne le design du site. Je m'insipre toujours autant des autres sites. Je travaille tous les éléments de mon site. Que ce soient le fil d'ariane, le footer (pied de page) et la position de la publicité, j'essaie de proposer un contenu de qualité et une facilité de navigation.
Le logo a changé. Très fortement inspiré du célèbre slogan "I love this game" des années 90 en NBA, j'ai voulu moderniser le logo en l'adaptant à la charte graphique du reste du site.
La couleur de fond est très sombre avec un dégradé du bleu vers le noir. J'avais pas mal utilisé des images en fond d'écrans mais dans une logique de performance, j'ai privilégié un motif simple et sobre (j'ai appris la technique du sprite pour réduire le poids des images et le nombre déléments à télécharger par page).

Le site a beaucoup évolué techniquement afin d'être compatible sur les break points des tablettes et smartphones (2013). On parle désormais de responsive design et j'ai utilisé la technique des media queries pour garantir un affichage agréable et ergonomique quelque soit le device utilisé. Le logo a évolué en adoptant un design plus épuré (2013). Sur un fond noir, j'ai mergé les lettres J et M dans un carré blanc. Puis, le nom "jordanmaxou" utilise une police design.
Dans le cadre d'un partenariat avec Cdiscount (utilisation de l'API produit, 2014), j'ai rajouté dans le menu droit une boutique. C'est en fait un caroussel de produits (dans le domaine du basket et de la NBA) qui renvoie vers les fiches produit de Cdiscount.
En 2015, j'ai créé plus de 1000 nouvelles pages sur le site. Le principe adopté est de créer une page par match de saison régulière, en essayant de mettre toutes les informations possibles sur chaque match (stat, vidéo, citation, photo).

Le site fait peau neuve en 2017 avec deux changements majeurs : le full screen et Boostrap. Le site est conforme aux standards actuels du web avec toujours du responsive design mais surtout, on exploite toute la largeur de l'écran. La page d'accueil reprend la structure des sites en boostrap : un header, un slider, des grosses images, des espaces.
Cela faisait longtemps que je voulais reprendre les styles actuels de design. Je trouve le site plus rapide à charger et plus facile à naviguer.
Le logo est aussi nouveau avec un M et un J qui sont entrelacés. Je cherche un style assez épuré et sobre, sur des dominantes de noir et blanc. Avec de beaux visuels et un peu de couleur, cela donne un rendu sympathique.

Jordanmaxou sur un sous-domaine de free.fr devient https://www.michael-jordan.fr ! Cela faisait longtemps que je voulais changer de nom de domaine, en .fr et plus sérieux. J'ai donc passé le cap en ce début 2018 en faisant l'aquisition du domaine libre michael-jordan.fr. La transition s'est faite relativement vite entre l'achat du nom de domaine (+ hébergement) et la disparition de jordanmaxou sur free. J'ai migré le code et je me suis aperçu que le php utilisé sur free était obsolète donc il a fallu adapter quelques lignes de code. En migrant en https, il a fallu vérifier que toutes les ressources externes et internes étaient en https. Cela m'a permis de corriger beaucoup de bugs qu'on trouvait sur le site. Puis, quand le nouveau site était opérationnel, j'ai appliqué une redirection 301 de l'ancien domaine vers le nouveau. J'attends donc maintenant l'impact en termes SEO sur ce changement. Le temps que Google indexe le nouveau site, je devrais avoir une baisse du trafic mais nul doute que celui-ci remontera très prochainement.

J'apprenais le Flash à ce moment donc même si je n'avais pas encore de vrai logo, j'ai fait une petite animation avec le taurreau des Chicago Bulls.

Premier logo présent sur toutes les pages. Je mets en pratiques mes connaissances Photoshop avec ce magnifique reflet. Je mets en avant la marque Jordanmaxou (contraction de Michael Jordan et le surnom de Maxime).

J'assemble le Jumpman, le logo Nike Air et celui des Chicago Bulls pour donner un logo carré efficace et reconnaissable. Entre les cornes, je mets la marque Jordanmaxou. Le logo était efficace et reconnaissable.

Je reprends le logo NBA "I love this game" et je l'adapte avec le nom "Jordanmaxou". Il y a une dominante orange et on retrouve le Jumpman en petit.

Premier logo un petit design et plus sobre. Toujours accès sur la marque jordanmaxou, j'ai simplement copié le logo "jm" sur un autre site (sans demander le droit) et j'ai ajouté le nom avec une police tout en rondeurs. Le noir et blanc coïncident avec un style sobre, épuré et sérieux.

Je ne fais plus de fond noir mais un fond transparent. Le principe reste le même avec un logo emprunté et le nom de la marque avec Maxou en gras.

Changement de nom de domaine donc j'abandonne Jordanmaxou au profit de Michael Jordan. Je garde le même logo qu'en 2017 en changeant uniquement le titre du site.

J'avais envie de moderniser le logo avec de la couleur. J'ai donc emprunté le logo et j'ai mis le rouge du logo des Chicago Bulls. Je mets aussi en avant la marque avec le nom de domaine.

Source