Pendant mon stage chez First Car, j'ai passé une semaine entière rien que sur le responsive du site vitrine. Voici les quelques principes qui m'ont vraiment servi, avec les erreurs que j'ai faites au passage.

Commencer par les vraies tailles d'écran, pas des chiffres au hasard

Au début, je changeais des breakpoints un peu à l'aveugle jusqu'à ce que "ça ait l'air bien". Grosse perte de temps. Ce qui marche mieux : tester avec les DevTools sur des tailles réelles et n'ajouter un breakpoint que quand la mise en page casse vraiment.

Sur le site First Car, j'ai fini avec deux breakpoints principaux :

/* Tablette */
@media (max-width: 768px) {
    .galerie { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 480px) {
    .galerie { grid-template-columns: 1fr; }
    .nav-links { display: none; } /* menu burger à la place */
}

Flexbox vs Grid : j'ai arrêté de me poser la question à chaque fois

↔️ Flexbox

Pour aligner des éléments sur un axe : header, footer, barre de navigation, boutons alignés.

▦ Grid

Pour une vraie grille en deux dimensions : galerie de véhicules, cartes de projets, tableaux de contenu.

La galerie de véhicules du site First Car (Tesla Model Y, Toyota, Mercedes Viano, VW Jetta) est en display: grid avec repeat(auto-fit, minmax(...)), ce qui évite d'avoir à recalculer le nombre de colonnes à chaque breakpoint.

Le menu mobile, plus casse-tête que prévu

Sur desktop, le menu de navigation s'affiche en ligne. Sur mobile, il fallait un menu burger qui ouvre/ferme un panneau. Rien de sorcier en soi, mais j'ai eu un bug bête : le menu s'affichait bien, mais un clic en dehors ne le refermait pas. Un simple event listener sur le document a réglé le problème :

document.addEventListener('click', (e) => {
    if (!menu.contains(e.target) && !burger.contains(e.target)) {
        menu.classList.remove('open');
    }
});

Tester pour de vrai, pas juste redimensionner la fenêtre

Redimensionner la fenêtre du navigateur donne une bonne idée, mais ne remplace pas un vrai test sur téléphone. Deux-trois bugs (zone de clic trop petite sur un bouton, texte qui débordait) ne sont apparus que sur mon propre téléphone, pas dans les DevTools. Depuis, je teste systématiquement sur un vrai appareil avant de considérer une page terminée.

Ce que je retiens

  • Peu de breakpoints, mais bien choisis — pas un par pixel cassé
  • Flexbox pour aligner, Grid pour structurer
  • Toujours tester sur un vrai appareil, pas seulement dans les DevTools
  • Le responsive prend souvent plus de temps que le design lui-même — à prévoir dans le planning