Agathe Verasdonck est actuellement en dernière année de Bachelor Création Numérique et souhaite poursuivre ses études pour obtenir un master dans le domaine de l'UI et UX design. Elle est par conséquent en recherche active d'une école dans laquelle elle puisse effectuer ces deux dernières années d'études en alternance. Pour faciliter ses entretiens, elle souhaitait réaliser une refonte de son portfolio afin qu'il soit plus conforme aux attendus des écoles et des entreprises.
Agathe, UI / UX Designer, m'as transmis une maquette représentant le portfolio qu'elle souhaitait réaliser début décembre. À ce stade, la maquette n'était pas encore complète. Elle souhaitait une première version du site pour mi-janvier avec les éléments déjà présents sur la maquette. Elle désirait entre-temps compléter la maquette et m'informer pour que je puisse réaliser des ajustements dans le temps. Frustrée de devoir constamment faire appel à mes services pour rentrer ses nouveaux projets, elle m'a demandé de créer un back-office (espace depuis lequel on peut ajouter / modifier des projets) afin de gagner en autonomie.
Dans un premier temps, j'ai commencé à analyser la maquette transmise par Agathe. Durant cette phase d'observation, j'ai commencé à imaginer de quelle manière et avec quelles technologies il serait plus à même de coder ce projet. J'ai également noté toutes mes interrogations pour en parler avec Agathe et comprendre exactement ses envies. La maquette était essentiellement composée de blocs de texte et d'images illustrant ces différents projets. Ainsi, nous avons établi que je rentrerai moi-même les projets qu'elle souhaite au fil du temps.
Vidéo de la maquette
La cliente souhaitant voir le site en ligne le plus tôt possible, j'ai donc commencé par créer quelques pages projets en "dur" : cela m'as permis de créer les différents blocs composant les pages avant de concevoir le back-office. De cette manière, de premiers ajustements ont pu être réalisés avant même son développement, ce qui a permis de gagner du temps, et d'éviter des erreurs de conception.
Le site étant prévu pour le mobile-first, j'ai donc commencé le développement avec cette perspective en tête. J'ai donc utilisé bootstrap-grid, l'un des composants de la bibliothèque CSS Bootstrap. L'usage de cette librairie m'a permis de simplifier le passage en version responsive, grâce à son système de grille prédéfinit.
Une fois les premiers projets intégrés, Agathe a continué de mettre en page d'autres pages projets. Elle m'a par conséquent demandé de rentrer ses nouveaux projets comme nous en avions convenu. Cependant, nous avons tous les deux vite remarqués que cette méthode n'était pas pratique. En effet, de mon côté, il était difficile de dégager du temps pour pouvoir mettre à jour son portfolio quand elle souhaitait. Et de son côté, Agathe était bien embêtée de ne pas pouvoir être autonome et de devoir continuellement faire appel à mes services pour modifier ou ajouter ses projets.
Après réflexion et analyse de la charge de travail, je lui ai proposé de créer un espace administrateur. Grâce à cet espace, elle pourrait interagir avec la base de données de son portfolio et modifier ou ajouter ses projets comme bon lui semble, depuis une interface simple d'utilisation. Dans ce back-office, plusieurs blocs seraient mis à sa disposition, afin de correspondre à tous les blocs présents sur sa maquette. Ainsi, elle n'aurait qu'à choisir le bloc qu'elle désire et y copier coller son texte, ou joindre une image...
En analysant les pages projets de la maquette, on remarque qu'ils sont scindés en plusieurs "blocs", qui reviennent sur chacun d'eux. C'est à ce moment que j'ai décidé de la structure dans le code de l'application. Chaque projet est découpé en plusieurs entités, conçues de manière à être entièrement personnalisables.
La structure est la suivante :
Project, qui représente le projet dans sa globalité. Elle contient les informations telles que son nom, sa description, son image de couverture etc.Block, générique, qui fait la relation entre les différents blocs disponibles pour la création du projet*Type*Block
(ImageBlock,
TextBlock...) représentent les différents blocs existantsUne fois les entités du projet crée, j'ai commencé à développer le back-office. J'ai décidé d'une mise en page simple (photo en dessous). Lorsque l'on crée un projet, on renseigne le minimum d'information, et c'est lors de la modification, que l'on peut alors commencer à remplir le projet.
Page de création d'un projet dans le back-office
Pour me simplifier la tâche pendant le développement, j'ai souhaité utiliser une unique page pour la création des différents blocs. Pour ce faire, j'ai créé un controller (BlockController), qui utilise un
switch
pour déterminer le formulaire à utiliser en fonction d'un paramètre dans l'url.
Cependant, la conception m'oblige tout de même à devoir modifier ce controller à chaque ajout de bloc, ce qui n'est pas idéal.
Extrait du code du
BlockController
Un beau site, c'est important. Un site rapide, ça l'est encore plus. Pour m'assurer que le portfolio le soit, tout un travail d'optimisation à dû être mis en place. En effet, le site comporte énormément d'images de grande taille, qui doivent conserver une qualité optimale.
Pour ce faire, j'ai utilisé le bundle Symfony/UX-turbo : il permet l'intégration de la librairie Javascript
Turbo
, développé par Hotwire. Cette librairie permet de donner au site un feeling de Single Page Application (SPA) : Turbo écoute les clics sur les balises
<a>, les annule, et charge en arrière-plan la page demandée via fetch. Une fois la page chargée, il remplace alors le corps de la page actuelle (balise
body) par celui qu'il vient de récupérer.
L'utilisation de Turbo permet donc de n'avoir qu'un seul chargement "complet" de la page, ce qui augmente les performances de manière significative.
Les pages projet provenant de la base de données, une perte de performances est à prévoir en comparaison à un site statique. Cependant, ce défaut est mitigé par l'utilisation de règles de cache efficace dans le fichier
.htaccess, ainsi que le cache mis en place par Twig, le moteur de template utilisé par Symfony
Résultats du test lighthouse sur une page projet provenant de la base de donnée
Durant la conception du site, la plus grande difficulté était d'allier un back-office intuitif et simple d'utilisation, avec un front-end rapide, qui incite l'utilisateur final à rester sur le site et découvrir les projets. Il était nécessaire pour cela d'optimiser le fonctionnement du site, et le format des visuels affichés.