Case Study

Choixpeau, référence à Harry Potter de J.K Rowlings

Pourquoi moi ?

Coucou ! Ici Lucie, l'héroïne des Bizarreries de Lucie !

Aujourd’hui, je vais vous expliquer comment mes aventures ont vu le jour, créées par Margaux. 

Margaux est étudiante en Design Web et Mobile à la Haute-Ecole Albert Jacquard de Namur. Pour son TFA (travail de fin d’année), elle a dû réaliser un site-project, qui consisterait à créer un concept et développer son projet. 

Montre à gousset

Margaux aime beaucoup écrire des histoires. Pour ce projet, elle a voulu mettre en avant sa passion de l’écriture et créer une histoire mêlant des illustrations et animations. Après réflexion, son projet commence à voir le jour : Margaux va créer une histoire interactive inspirée d'Alice au Pays des Merveilles. C’est comme ça que je suis apparue !

Château de princesse

Lucie, dix ans et toutes ses dents, une imagination débordante pour vivre des aventures trépidantes. 

Créer et animer

Margaux adore le monde du cinéma et du jeu vidéo. Elle a donc eu l’idée d'incorporer dans son histoire des clins d’œil à ces univers. 

Après avoir écrit son histoire, Margaux peut démarrer la création de ses illustrations. Une fois satisfaite, elle essaie de les animer selon son imagination et ses capacités, cela n'a pas toujours été simple. 

Elle fait ça dans des documents HTML différents, en collant le code SVG directement dedans. Ca fonctionne plutôt bien ! Au retour des vacances, elle entame la réalisation de la mise en page et du slider de l'histoire. 

Malheureusement, elle se rend compte qu’en mettant les SVG à la suite, les classes entrent en conflit — les couleurs ne sont plus les bonnes. St0, st1, st2… Les classes sont toujours les mêmes et le navigateur ne sait plus laquelle est la bonne, et laquelle appliquer. Elle renomme donc toutes ses classes SVG. 

Au terme de ce travail titanesque, elle va voir les professeurs. Son slider peine à effectuer les transitions vers les dernières pages… Après discussion, la prochaine étape est de mettre moins de SVG dans l’HTML et passer par des images fixes quand ce n’est pas animé. 

Le JavaScript, c'est pas automatique !

Pour les animations CSS au clic, Margaux utilise du JavaScript. Le souci, c’est qu’elle aimerait qu'on puisse les relancer en cliquant à nouveau dessus. Mais ce n'est pas si évident, elle n'arrive pas à le faire pour toutes les animations. 

Elle s’intéresse donc au GSAP, un autre langage dérivé du JavaScript propre aux animations, après avoir envisagé d'autres solutions. Ce n’est facile mais Margaux finit par le dompter. 

En parallèle, Margaux démarre le design de sa page de présentation. Avant d'amener directement les lecteurs sur l’histoire, il faut leur expliquer à quel point mes aventures sont fantastiques !

La page de présentation

Le premier visuel est créé, Margaux demande l’avis des professeurs. Après quelques petits arrangements, ça y est, c'est validé, elle peut commencer à développer ! Elle a utilisé des flexbox pour l'histoire, c'est donc naturel d’en utiliser aussi pour la page de présentation. 

Tout se passe bien. Le logo est intégré sans trop de difficulté, la navigation est réalisée après discussion avec les professeurs, les blocs s’harmonisent bien et les transitions fonctionnent à peu près. « Passons donc au responsive », se dit Margaux ! « Cela permettra d'harmoniser et adapter mon site à tous les supports ».

Oh… Mais alors pourquoi les éléments de la page de présentation réagissent mal ? Le logo perd la tête — ma jolie tête ! — et les transitions refusent de coopérer. Margaux s'arrache les cheveux, cogite, le projet avance. 

Lucie perd la tête
Lucie perd la tête en responsive

Retour à l'histoire

Les animations et illustrations ne sont pas non plus responsives. Dès qu’on redimensionne un tout petit peu la fenêtre du navigateur, rien ne va plus. Avec l'aide des professeurs, Margaux obtient la solution miracle. Elle y voit enfin plus clair et le responsive du projet ne devrait plus être très long. Tout se passe bien jusqu’aux résolutions de mobiles : 414px de large, le début des ennuis

Malheureusement, le mode portrait pose de gros soucis à Margaux, qui décide en accord avec les professeurs de faire une version responsive uniquement en mode paysage. Et d'après elle, cela convient mieux à son histoire.

Histoire en mode portrait
Apparition d'un bord blanc en portrait

Pour finir

Retour au responsive. Plus vraiment de soucis à ce niveau-là, si ce n’est qu’elle fait une vingtaine d’étapes pour que ce soit le plus complet possible. 

Ça sent la fin, et Margaux s'arme de courage pour finaliser son projet ! Plus que quelques pages à réaliser sur le même modèle que la présentation, une page 404, quelques petites choses à rectifier sur l'histoire et ce sera bon. 

Je suis en vie grâce à ce projet ! Margaux, quant à elle a vécu un projet long et complexe du fait de sa grande ambition. Le plus important, c'est qu'elle en est extrêmement fière. 

J’espère que vous apprécierez découvrir mes aventures au travers de mon histoire. On ne va pas visiter d’autres mondes tous les jours après tout… Sauf quand on s’appelle Lucie !