[Pro] Madeleine de Pourpre : menu mobile et logo à 320 px

Bonjour,

Je suis maud de pourpre, de Madeleine de Pourpre. Notre boutique de bougies et de fondants parfumés fonctionne sous PrestaShop. Je souhaite recueillir des critiques sur l’ergonomie de son en-tête mobile.

Un chevauchement entre le menu et le logo a été relevé lors de nos vérifications à 320 px de large. Ce point reste à reprendre. J’aimerais profiter de la correction pour vérifier que l’accès aux catégories est vraiment facile à repérer.

Le site : https://madeleinedepourpre.com/

Sur un écran étroit, le bouton de menu vous paraît-il assez visible et facile à utiliser ? Pour mieux répartir l’espace, privilégieriez-vous un logo plus compact sur une seule ligne, ou un en-tête sur deux lignes ? Je suis preneuse d’arguments sur la lisibilité et la taille des zones cliquables.

Si vous constatez un chevauchement ou un bouton difficile à atteindre, la largeur d’écran et le navigateur m’aideront à reproduire le problème. Merci pour vos conseils et vos critiques.
Modifié par maud_de_pourpre (23 Oct 2026 - 14:38)

salut
tout a l'air de fonctionner, belle harmonie de couleurs. (Mac-Brave)
Modifié par drphilgood (27 Oct 2026 - 09:50)

Salut,

mise en page cassée à cet endroit (Firefox 158 - win 11)

https://i.postimg.cc/9fZSR4xK/Capture-d-ecran-2026-10-26-173941.png
Modifié par Niuxe (26 Oct 2026 - 20:53)

Bonjour Maud,

J’ai vérifié ton site à 320 px de large. Le bouton du menu se superpose au début de « Madeleine », ce qui brouille à la fois le logo et l’icône. Le menu s’ouvre correctement et les catégories sont lisibles une fois dépliées.

Le bouton du menu ne mesure qu’environ 20 × 15 px. Je lui réserverais une zone d’appui plus confortable, par exemple 44 × 44 px, même en gardant une petite icône à l’intérieur.

Le logo étant positionné en absolu, il ne réserve pas sa place entre le menu et les autres boutons. À cette largeur, je privilégierais un en-tête sur deux lignes, avec une ligne dédiée au logo. Cela permettrait de conserver sa lisibilité et d’espacer les commandes.

J’ai aussi reproduit le problème signalé par Niuxe sur la page de connexion, en validant le formulaire vide. À 320 px, le bouton « œil » s’allonge vers le bas et recouvre une partie du message d’erreur du mot de passe.

Le message .mdp-field-error est ajouté dans le bloc .input-group.password-field. Je regarderais donc le script de validation pour placer ce message après le groupe champ/bouton, sur sa propre ligne. Cela éviterait qu’il modifie la disposition des deux éléments.

Dis moi si tu t'en sors, ou ton équipe en production.
Bonne journée
Modifié par Envision (27 Oct 2026 - 10:42)

Oh merci beaucoup pour les retours et le signalement du problème, je m'en occupe tout de suite !

Merci beaucoup Envision pour ton retour super détaillé et merci encore Niuxe pour le signalement !

C'est corrigé sur la page de connexion : le message d'erreur s'affiche sous le champ mot de passe et le bouton oeil ne disparaît plus.

Pour l'en-tête le bouton menu et les icônes font maintenant 44x44 px et le logo ne passe plus sous le menu. En dessous de 384 px il passe sur deux lignes.

Si vous avez un moment pour refaire un test à 320 px je suis preneuse !

J’ai refait le test à 320 px : le logo ne chevauche plus le menu et les boutons sont bien plus faciles à viser. Le menu s’ouvre et se ferme sans souci.

Côté connexion, le message d’erreur reste bien sous le champ mot de passe et le bouton œil fonctionne correctement. Je ne retrouve plus les problèmes de mon premier test.

Bonne continuation pour ta boutique ! Si tu bloques sur autre chose, fais signe 😉
Modifié par Envision (27 Oct 2026 - 20:34)

Bonjour,

320px reste une exigence d'accessibilité (surtout pas d'ascenseur horizontal sur la page et au cas par cas sur des sections de page et aussi pas de chevauchement de texte ni tronqué tant qu'à faire) mais il me semble que plus aucun appareil mobile en service ne fait 320px de large. Android c'est 360px et iPhone 375px (et 5 autres plus larges. 414px, etc).

J'ai un bug en vue responsive (Firefox sur un 27" en vue mobile avec une souris), ce qui n'est pas très représentatif de la réalité mais peut-être indicateur de ...
En survolant le 1er ou dernier pixel de certains visuels, ça se met à gigoter rapidement : soit le visuel soit tout le reste de la page. Aucun souci en largeur tablette et desktop. Il y a un effet au survol qui je suppose modifie la hauteur du bloc ? Astuce connue si c'est par exemple une bordure de 1px qui est ajoutée ou supprimée : ajouter une bordure transparente comme ça la hauteur ne change pas entre les 2 états. Si c'est une transformation, aucun effet évidemment...

Super merci Envision d'avoir refait le test ! Ravie de voir que tout fonctionne maintenant.

Merci aussi à drphilgood et Niuxe pour leurs retours, c'était vraiment utile.

Bonne journée à tous !