Étude de cas

Festival MMI 2026

Le Festival MMI 2026 se tenait à Troyes et avait besoin d'une page pour annoncer l'événement et donner accès au live de la cérémonie. En binôme et en une semaine, nous avons réalisé sa landing page officielle.

Février 2026 ⏱ Durée : 1 semaine Binôme Bénévolat

Voir la démo Voir le code

Landing page du Festival MMI 2026 : rendez-vous à Troyes le 4 juin 2026, bouton vers le live de la cérémonie de remise des prix et illustration d'un personnage portant un casque de réalité virtuelle

Le besoin

Le Festival MMI est un événement annuel organisé par la ville du lauréat de l'édition précédente. Pour l'édition 2026, il se déroulait donc à domicile, à Troyes.

Le festival avait besoin d'une page d'atterrissage pour annoncer la date du 4 juin, présenter les modalités et mettre en avant l'accès au live de la cérémonie de remise des prix. Elle s'adressait aux étudiants et professionnels du réseau MMI dans toute la France, qui la consultent aussi bien sur ordinateur que sur téléphone.

La solution

Je me suis porté volontaire, en binôme, pour réaliser cette landing page en une semaine, à partir d'une maquette Figma :

Intégration fidèle de l'interface en HTML5 et CSS3.
Structure sémantique pour une page lisible et bien hiérarchisée.
Travail en binôme sur un dépôt GitHub partagé pour fusionner nos avancées.
Version mobile : media queries pour adapter la mise en page, les typographies et les visuels à chaque taille d'écran.

Mes choix techniques

HTML et CSS, sans framework

Une seule page vitrine, sans logique applicative : un framework aurait alourdi la page sans rien apporter. Du HTML sémantique et du CSS suffisaient, et la page reste légère.

un framework CSS ou JavaScript.

Un dépôt GitHub partagé

À deux sur les mêmes fichiers, il fallait avancer en parallèle sans écraser le travail de l'autre : commits, dépôt distant et relecture du code de mon binôme.

s'échanger les fichiers à la main.

Un menu burger sur petit écran

Sur téléphone, la navigation desktop ne tenait plus : sous un certain point de rupture, elle se replie dans un menu burger.

garder la navigation complète en la rétrécissant.

La difficulté principale

Problème

Le passage au mobile. La page avait été pensée pour ordinateur : sur téléphone, la navigation, les typographies et les visuels ne tenaient plus.

Résolution

Des media queries sur plusieurs points de rupture, une navigation repliée en menu burger, et des typographies et visuels réduits pour chaque taille d'écran.

Ce que je referais autrement

Concevoir en mobile-first dès le départ : partir du petit écran puis enrichir, plutôt qu'adapter le desktop après coup. C'est ce qui a rendu le passage au mobile difficile.
Optimiser les images : formats WebP/AVIF et tailles adaptées (srcset) pour charger plus vite sur mobile.
Faire un audit d'accessibilité : contrastes, textes alternatifs, navigation au clavier.

Ce que j'ai appris

Git & GitHub

Ma toute première expérience avec le versioning ! J'ai appris à faire des commits, gérer un dépôt distant et collaborer de manière asynchrone sans écraser le travail de l'autre.

Travail en binôme

Se coordonner efficacement, diviser intelligemment les tâches d'intégration et relire le code de son partenaire pour maintenir une base propre et cohérente.

Intégration Responsive

Ma toute première expérience de rendu adaptatif ! J'ai appris à passer d'une structure desktop à une version mobile ergonomique en gérant les contraintes d'affichage et de navigation tactile.

Implication bénévole

Découvrir la dynamique d'un projet réel avec de vrais enjeux de communication, destiné à être vu par de nombreux étudiants et professionnels du réseau au niveau national.

Stack technique

Technologies utilisées :

HTML5 CSS3 Figma Git GitHub