L'audit des maquettes, et le plan pour la meilleure page d'accueil

La synthèse, en une page

Les 5 décisions qui changent le plus de choses

1. Remettre la 9 dans l'ordre du brief. « C'est la place que j'ai envie de prendre à vos côtés » répond à « On a besoin de comprendre ce qui se passe ». Dans la 9, les deux portes s'intercalent entre les deux phrases : « la place » ne renvoie plus à rien. La 10 a déjà fait la correction. Effet secondaire utile : le portrait de Laura remonte de 2,8 à 1,3 écran sur ordinateur, de 3,8 à 1,8 sur téléphone.
2. Sortir les « Parce que… » du film. Aujourd'hui : un cadre de 560 px qui montre une phrase à la fois, 24 secondes pour tout voir, et la cinquième pensée (20 mots) affichée 2,2 secondes, soit trois fois trop vite pour être lue. Ma recommandation : une strophe statique, tout visible, qui s'installe en moins de 5 secondes. Si tu tiens au film, il existe une version compacte qui tient la route. Les deux sont esquissées et mesurées plus bas.
3. Viser 5,5 écrans sur téléphone, au lieu de 6,8. Le film n'est pas le plus gros poste sur mobile (0,70 écran). Les portes en font 1,87, « C'est la place… » 1,44, « En pratique » 1,07 et le pied de page 0,59, avec les coordonnées affichées deux fois à 240 px d'écart. C'est là qu'il faut resserrer.
4. Un seul bouton plein par écran. Le premier écran de l'ordinateur affiche trois fois « Prendre rendez-vous » (en-tête, ouverture, barre d'infos). Le troisième est en plus le seul texte de la page sous le seuil de lisibilité (4,33:1 pour 4,5 demandé). On le retire : la barre d'infos informe, elle ne vend pas.
5. Poser le socle technique avant de construire en Astro. Les maquettes chargent 5 familles de polices chez 2 fournisseurs, par 3 feuilles de style qui bloquent l'affichage : Lighthouse estime à 2,2 secondes le retard que cela cause sur un mobile lent, sur 4,2 secondes au total. Deux familles hébergées avec le site, un logo en SVG et des images redimensionnées ramèneraient la page de 856 ko à environ 350 ko (estimation).

Ce qui est déjà bon et qu'il ne faut pas casser : aucun débordement de 320 à 1440 px sur les 13 pages, le focus visible partout, la page complète sans JavaScript et en mouvement réduit, aucun tiret long dans les textes, des textes alternatifs soignés sur les portes, zéro décalage de mise en page dans les maquettes 7 à 10.

Mise à jour : les maquettes 11 et 11 bis sont construites

À ta demande, les deux maquettes proposées dans le plan d'action existent. Elles ne diffèrent que par un bloc.

• 11 · La synthèse : la 9 dans l'ordre du brief, avec les « Parce que… » en strophe.
• 11 bis · Le film compact : la même base, avec le film réduit et la phrase pivot toujours affichée. C'est ta préférée, retouchée le soir même d'après ton retour (voir plus bas).

Les deux sont repassées au même banc de mesures que les autres. Résultat, critère par critère :

Ce qui est réglé : les sept corrections P0 de maquette (ordre, « Parce que… », longueur sur téléphone, un seul bouton plein par écran, menu replié, coordonnées en cibles de 44 px, plus de boucle), plus trois points P1 qui ne coûtaient rien : le titre et le bouton visibles dès le premier affichage, la photo révélée en 1,5 s, le nom accessible du logo.

Ce qui ne l'est pas, et c'est normal : le poids et la vitesse n'ont pas bougé (Lighthouse mobile 78, contre 77 pour la 9). Les polices viennent toujours de deux fournisseurs et les images ne sont pas redimensionnées : c'est le chantier du site Astro. Le portrait reste provisoire, et la phrase sur le cadre non médical attend les mots de Laura.

Retouches de la 11 bis après ton retour : sur ordinateur, le film occupe 40 % de la largeur et la phrase pivot 60 %, en grand ; les pensées défilent de bas en haut (floues, nettes au milieu, floues et plus petites en remontant, toujours visibles) ; il n'y a plus de bouton Pause ni de barre de progression ; « C'est la place… » est sur fond sable, les deux portes sont deux cartes séparées, et « En pratique » reprend la boîte compacte de la 7, sans la grande photo. Un point à savoir : comme le défilement dure plus de 5 secondes, j'ai gardé un moyen de l'arrêter sans le montrer. Un clic ou un toucher sur le cadre le met en pause (un petit mot l'indique), et un bouton apparaît seulement pour qui navigue au clavier. La version d'avant est conservée dans temp/archive-maquettes/11-bis-v1/.

Libertés nouvelles à lui signaler, en plus de celles de la 9 : la ligne d'infos en trois cellules (« Présentiel à Huy, le mercredi après-midi », « Visio, sur rendez-vous »), les trois liens légaux du pied de page, et la seconde phrase du pivot en couleur.

La grille comparative

Sept axes, chacun noté sur 5 (les demi-points existent). En gras de couleur, la meilleure note de chaque axe. La justification de chaque note est dans la fiche de la maquette (et au survol de la case).

Classement : 10 (25), 9 (24,5), 7 (23,5), 8 (23,5), 2 (23), 3 (23). Deux lectures. D'abord, la 10 et la 9 font jeu égal : la 10 gagne sur la fidélité au brief, l'accessibilité et le poids, la 9 sur le parcours et le design. D'où la recommandation de prendre le corps de la 9 et l'ordre de la 10 plutôt que de choisir. Ensuite, aucune maquette complète ne dépasse 3 en référencement ni 3,5 en performance : ce sont des chantiers de construction (titres, descriptions, polices, images), pas de choix de maquette. Les pistes A, B et C sont pénalisées parce qu'elles ne couvrent que le haut de la page.

Les chiffres mesurés

Un écran = la hauteur de la fenêtre (844 px à 390 de large, 900 px à 1440). « 1,0 éc. » veut dire juste sous le pli. Le poids est celui de tout ce que la page télécharge. « Affichage complet » est l'estimation de Lighthouse sur un téléphone moyen en 4G lente. Le décalage mesure si le contenu saute pendant le chargement (acceptable sous 0,1).

Le parcours

La technique

Communs aux maquettes 2 à 10 : aucune erreur dans la console, aucun débordement horizontal de 320 à 1440 px, focus visible sur tous les éléments, page complète sans JavaScript. Seul défaut d'accessibilité relevé par Lighthouse, partout : le nom accessible du logo ne reprend pas le texte affiché. Liens du pied de page hauts de 19 px sur téléphone dans toutes les maquettes du labo.

Le problème des « Parce que… », et trois façons de le régler

Ce que disent les mesures

Dans la 9, le passage occupe une section de 648 px sur ordinateur (0,72 écran) et de 592 px sur téléphone (0,70 écran). Ce n'est pas énorme en soi. Le vrai problème est ce que cette surface contient à un instant donné : une phrase, parfois quatre mots.

* Repère de lecture confortable : 1 seconde pour s'installer, puis 0,3 seconde par mot (environ 200 mots par minute).

Trois conséquences :

• La phrase la plus riche est illisible. La cinquième pensée, celle qui dit le doute (« agir, attendre, changer quelque chose… ou simplement faire confiance »), reste 2,2 secondes pour 20 mots.
• La phrase pivot arrive à la 19e seconde. « On a besoin de comprendre ce qui se passe » est la phrase qui amène Laura. Un parent qui passe 5 secondes sur ce bloc ne la voit jamais.
• Le film ne survivra pas aux modifications de Laura. Les durées sont fixées dans le code, phrase par phrase. Si elle allonge une pensée ou en ajoute une sixième dans Pages CMS, le rythme casse.

Et une surprise : sur téléphone, mettre tout le passage à plat ne prend pas moins de place que le film. La 7 le fait en 0,89 écran, contre 0,70 pour le film. Sur un écran de 390 px, 79 mots en caractères de titre demandent environ 560 px, quoi qu'on fasse. Le gain d'une version à plat sur mobile n'est donc pas la hauteur : c'est que les 560 px contiennent tout le texte au lieu d'un septième.

Solution recommandée · La strophe

Tout le passage visible d'un coup, composé comme une strophe : les cinq pensées en Gloock, la chute en texte courant, la phrase pivot en grand, sa seconde moitié dans la couleur d'accent du site (celle du nom de Laura dans le logo). À l'arrivée dans l'écran, les lignes s'installent une à une, une seule fois, en moins de 5 secondes (c'est ce que fait déjà la 10, et c'est le seuil au-delà duquel il faudrait un bouton Pause). Puis plus rien ne bouge.

• Pour : le parent trouve « sa » phrase en deux secondes (chacun se reconnaît dans une ligne différente) ; aucune attente ; aucun bouton Pause à prévoir ; rien à régler quand Laura change un mot ; identique avec ou sans JavaScript ; moitié moins haut sur ordinateur.
• Contre : on perd l'effet d'accumulation du film, ce moment où les pensées s'empilent. C'est le prix. L'entrée ligne à ligne en garde une trace.
• Liberté à faire valider par Laura : aucune sur les mots. Seule la mise en page change (retours à la ligne, seconde phrase du pivot en couleur).

Si tu tiens au film · Le film compact

C'est la solution qui garde l'esprit de la 9 : les pensées continuent de passer une à une, au centre, avec l'écho de la précédente. Mais quatre choses changent.

1. Le cadre est taillé pour une phrase, pas pour un écran : 14 rem sur ordinateur, 16,5 rem sur téléphone. La plus longue pensée y tient (vérifié : 123 px de texte dans 224 px).
2. La phrase pivot sort du film et reste affichée en permanence, à côté sur ordinateur, dessous sur téléphone. Le parent pressé lit au moins l'essentiel.
3. Chaque phrase reste à l'écran le temps de la lire : 1 seconde plus 0,3 seconde par mot, calculé à partir du texte lui-même. Avec les textes actuels, les cinq pensées et la chute durent 24,3 secondes, autant qu'aujourd'hui mais sans tricher sur la cinquième. Et le calcul suit tout seul quand Laura modifie un texte.
4. Le bouton dit toujours la vérité (aujourd'hui, quand le film se met en pause hors écran, il affiche un triangle « lecture » à côté du mot « Pause »).

• Pour : tu gardes ton moment préféré, dans un cadre réduit de 60 % sur ordinateur et de 25 % sur téléphone ; la phrase pivot est toujours lisible.
• Contre : le texte des pensées reste rationné par le temps (24 secondes pour tout voir) ; il faut garder un bouton Pause, un repli statique, et un peu de JavaScript à maintenir.

Ce que je ne ferais pas · Tout mettre dans l'ouverture

C'est ce qu'a tenté la 10, et tu as senti que ça ne marchait pas. Les mesures disent pourquoi : pour faire tenir les pensées dans le premier écran, la photo perd la moitié de sa surface (de 504 à 353 px de large), les pensées tombent à 17 px en italique, et le premier écran passe de deux choses à lire à cinq. Sur téléphone, le pli coupe la liste en son milieu. Enfin, des phrases disposées en arc autour d'une forme ne supportent ni une phrase plus longue ni une sixième pensée. Si tu voulais quand même cette voie, il faudrait : renoncer à l'arc (une simple liste), limiter le titre à trois lignes, et accepter que la photo soit petite. Je ne pense pas que le résultat vaille la strophe.

Mon conseil pratique : la différence entre les deux se juge en regardant, pas en lisant. Construire les deux sur la même base coûte peu (c'est un seul bloc qui change). Tu choisis, ou tu laisses Laura choisir.

La cible : la page d'accueil idéale, section par section

Rien de nouveau à inventer : chaque section existe déjà dans une maquette. Il s'agit de prendre le meilleur de chacune et de les remettre dans l'ordre du texte de Laura.

Longueur attendue : environ 4,1 écrans à 1440 px (4,4 aujourd'hui) et 5,3 à 5,5 écrans à 390 px (6,8 aujourd'hui). Mouvement : deux moments seulement, tous deux motivés et joués une fois : les mains du logo qui deviennent la photo, et la strophe qui s'installe. Rien ne boucle, rien ne dépend du défilement.

Pour Google et pour Huy

• Le H1 reste la phrase de Laura. Il ne contient aucun mot-clé, et c'est assumé : c'est sa voix. Le métier et le lieu sont portés par le titre de l'onglet, la description, le logo en texte, la ligne d'infos (« Huy ») et les données structurées. Les pages Sommeil et Accompagnement parental, elles, ont des titres descriptifs dans le brief (« Sommeil du bébé et du jeune enfant ») : ce sont elles qui répondront aux recherches.
• Titre de l'onglet (proposition, 64 caractères) : « Laura Swinnen · Accompagnement parental et sommeil du bébé à Huy ».
• Description (proposition à faire valider par Laura, 166 caractères) : « Consultations pour les parents de bébés et de jeunes enfants : sommeil, émotions, limites, séparations. À Huy, au centre Sens & Santé, ou en visio. Environ 1 h, 70 €. »
• Données structurées de type ProfessionalService : nom, adresse (Chaussée de Liège 66, 4500 Huy), téléphone au format international, e-mail, horaires (mercredi 13h30 à 18h), prix, zone desservie (Huy, province de Liège, et la Belgique francophone en visio), photo.
• Même nom, même adresse, même téléphone partout, au caractère près : pied de page, page Consultations, fiche Google Business, page du centre si elle existe.
• Liens internes parlants : les deux portes mènent aux pages Sommeil et Accompagnement parental ; aujourd'hui tous les liens des maquettes pointent dans le vide (18 liens sur 23 dans la 9, normal pour une maquette).
• Textes alternatifs : garder ceux des portes et de la tasse (déjà bons) ; portrait décrit par « Laura Swinnen » et le contexte ; photo des mains laissée décorative.
• À prévoir sur le vrai site : plan du site, adresse canonique, image de partage (1200 × 630, avec le nom et le descripteur), icône d'onglet tirée du symbole, langue « fr-BE », retrait de l'interdiction d'indexation le jour de la mise en ligne, fiche Google Business au nom de Laura à l'adresse du centre (avec son accord).

Le plan d'action

P0 indispensable avant de montrer la maquette de synthèse à Laura ou de construire. P1 important, à faire en construisant le site. P2 bonus.

Ce que je te propose de construire ensuite

1. Une maquette 11, « la synthèse » : la 9 dans l'ordre de la 10, avec la strophe, et les sept corrections P0 de maquette. Une variante 11 bis ne change qu'un bloc : le film compact à la place de la strophe. C'est fait : voir les deux maquettes et leurs mesures. Il te reste à les comparer sur ton téléphone, puis à les montrer à Laura.
2. Le contrôle automatique : le script de mesures a été repassé sur les deux ; tous les critères de maquette du tableau sont tenus.
3. Puis le prototype Astro, avec les composants partagés, les polices hébergées, les images optimisées et Pages CMS, sur la base validée.

Questions et propositions pour Laura

Mise à jour du 5 octobre : ces points sont repris dans « Ce qu'on décide ensemble ».

Nouvelles, issues de cet audit

1. La mise en page des « Parce que… ». Lui montrer la strophe (et le film compact si tu le construis) : ses mots sont intacts, seuls les retours à la ligne et la couleur de « On a besoin de comprendre ce qui se passe » sont de nous.
2. Où mènent « Parlons de son sommeil » et « Parlons de ce que vous vivez » sur l'accueil ? Son brief utilise le même libellé à la fin de la porte (accueil) et à la fin de la page Sommeil. Proposition : sur l'accueil, le bouton ouvre la page ; sur la page, il ouvre la prise de rendez-vous.
3. Une phrase sur le cadre. Son brief pose un accompagnement « éducatif et préventif, non thérapeutique et non médical, avec orientation vers un autre professionnel lorsque la situation le nécessite », mais aucun de ses textes de page ne le dit. Comme elle consulte dans un centre médical, lui demander sa formulation, et où elle la veut (« En pratique », page Consultations, ou les deux).
4. Son portrait. Il aura une vraie place, juste après l'ouverture. Format utile : vertical, lumière naturelle, fond clair, 1 200 px de large au moins. Et quelles photos compte-t-elle fournir (le lieu, des mains, un détail) ?
5. La description de la page pour Google (une phrase d'environ 160 caractères) : lui soumettre la proposition du chapitre « La cible », puisque ce sont des mots qui ne sont pas d'elle.
6. « Le mercredi après-midi » dans la ligne d'infos : la formulation vient de son e-mail du 2 octobre, pas de son brief. La garde-t-elle telle quelle ?
7. Un premier échange gratuit ? Plusieurs consultantes en proposent un de 15 à 20 minutes comme bouton principal. Elle n'en a pas prévu : c'est cohérent avec « une seule consultation », mais autant qu'elle le décide en connaissance de cause.

Déjà dans ta liste, confirmées par les mesures

• Le titre coupé en deux (titre et sous-titre) : à garder, c'est ce qui permet un premier écran lisible.
• Les deux phrases de sa page Sommeil dans la porte « sommeil » : elles équilibrent réellement les deux portes (sans elles, la porte « jour » est deux fois plus longue).
• La ligne d'infos et « En pratique » sur l'accueil : c'est un résumé de la page Consultations, donc une liberté par rapport au §4. Mais son §1 demande qu'on comprenne vite « comment prendre rendez-vous », et les sites comparables affichent tous prix, durée et lieu dès l'accueil. Je garderais les deux, en version courte.
• La grande zone ardoise de la porte « sommeil » : c'est plus qu'un « accent très discret ». Si elle hésite, une variante claire (beige soutenu) existe en un changement de couleur.
• Le portrait sur l'accueil : appuyé par son e-mail du 15 septembre.

Une fiche par maquette

Sur chaque capture, les pastilles rouges renvoient à la liste qui suit. Les captures de téléphone défilent horizontalement.

Piste A · Éditoriale archive

Ton avis : première piste. Ma note : 19 sur 35. Ouvrir la maquette

Le texte de Laura, seul, dans une belle police. Propre, fidèle, mais sans image ni idée : c'est exactement le « look GPT-3.5 » que tu veux éviter.

1. Le titre occupe 6 lignes : toute la première phrase de Laura.
2. Les « Parce que… » en italique décalé : élégant, mais ce n'est que du texte.
3. La barre fixe de rendez-vous est là dès le premier écran et recouvre la fin du passage.
4. Emplacement photo vide.

Forces

• Texte du brief dans l'ordre exact, rien d'ajouté : la plus fidèle à « sans résumer les autres pages ».
• Très légère en images (18 ko), aucun mouvement, rien à maintenir.
• Contrastes tous conformes, focus visible partout.

Faiblesses

• Aucune photo, aucun portrait, aucun prix ni lieu : on ne sait ni à qui on parle ni comment ça se passe.
• Le titre reprend toute la première phrase : 6 lignes sur téléphone, 5 lignes à 74 px sur ordinateur.
• Le seul bouton de rendez-vous du premier écran est celui de l'en-tête (ou la barre fixe, qui recouvre le bas du texte dès l'arrivée sur mobile).
• 307 ko de polices (Newsreader variable) pour 340 ko au total : premier affichage estimé à 3,9 s sur mobile lent, le plus lent des trois pistes.
• Bouton « Menu » de 38 px de haut, la touche Échap ne referme pas le menu, pas de lien d'évitement.

À garder

• La retenue : aucun effet gratuit.
• L'idée de décaler les « Parce que… » en escalier, si on cherche une variante typographique.

Longueur : 3,8 écrans à 390 px, 3 à 768, 3,7 à 1024, 3,5 à 1280, 3,1 à 1440. Poids : 340 ko (7 fichiers de polices, 1 feuille bloquante). Lighthouse mobile : performance 78, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 100. Sans mouvement : 3,8 écrans à 390 px ; sans JavaScript : 3,8. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 3 (par exemple « Menu », 62 × 38 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	2	Se reconnaître : oui. Comprendre qui est Laura, où, combien, et réserver : non (ni prix, ni lieu, ni portrait).
Design (UI)	2	Hiérarchie nette mais page de texte nue ; moitié droite vide sur ordinateur.
Mobile	2,5	3,8 écrans, lisible ; barre fixe présente dès l'arrivée, qui masque la fin du texte ; « Menu » 62 × 38 px.
Accessibilité	3,5	Contrastes et focus conformes ; pas de lien d'évitement, Échap inopérant, liens de contact hauts de 25 px.
Performance	3,5	340 ko mais 307 ko de polices bloquantes : Lighthouse mobile 78, premier affichage 3,9 s.
Référencement	2	Titre correct, pas de description, ni adresse ni « Huy » dans la page, H1 très long.
Conformité au brief	3,5	Texte et ordre exacts ; mais le §9 demande des photos naturelles et lumineuses, absentes.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Toute la moitié droite du premier écran est vide.
2. Seul bouton de rendez-vous visible : celui de l'en-tête.

Piste B · Organique archive

Ton avis : celle que tu préférais au départ. Ma note : 21 sur 35. Ouvrir la maquette

La première apparition des formes du logo comme langage. Tout ce qui a suivi (2, 5, 7, 8, 9, 10) en descend. À garder comme origine, pas comme candidate.

1. Le symbole du logo en grand : la naissance du langage des formes.
2. Les « Parce que… » en paragraphe gris, sous le titre.
3. Emplacement photo vide.
4. Les deux portes en cartes : correctes, sans image.

Forces

• Les formes organiques du logo deviennent un langage : l'idée fondatrice de tout le labo.
• La plus rapide : 173 ko, Lighthouse mobile 94, affichage complet estimé à 2,5 s sur mobile lent.
• Typographie Gloock + Figtree déjà en place, celle des maquettes retenues.

Faiblesses

• Le titre est « Parfois, on n'a pas besoin d'un conseil de plus… » : l'ordre du texte de Laura est inversé.
• Les « Parce que… » sont un paragraphe gris en texte courant sous le titre : le passage où le parent se reconnaît devient une note de bas de titre.
• Aucune photo réelle : le symbole du logo en grand tient lieu d'image.
• À 1024 px, le menu passe sur deux lignes et le bouton de l'en-tête sur trois.
• Ni prix, ni lieu, ni portrait.

À garder

• Le principe des formes du logo (repris et abouti dans la 2 puis la 9).

Longueur : 4,1 écrans à 390 px, 3 à 768, 3,5 à 1024, 3,3 à 1280, 3 à 1440. Poids : 182 ko (6 fichiers de polices, 1 feuille bloquante). Lighthouse mobile : performance 94, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 99. Sans mouvement : 4,1 écrans à 390 px ; sans JavaScript : 4,1. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 3 (par exemple « Menu », 68 × 36 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	2,5	Message d'ouverture fort, mais aucune information pratique et un seul bouton (en-tête).
Design (UI)	3	Identité reconnaissable grâce aux formes ; hiérarchie du texte secondaire trop faible (paragraphe gris).
Mobile	2,5	4,1 écrans ; barre fixe dès l'arrivée ; « Menu » 68 × 36 px.
Accessibilité	3,5	Contrastes conformes ; pas de lien d'évitement, Échap inopérant.
Performance	4,5	173 ko, 3 fichiers de polices, Lighthouse mobile 94 : la référence de légèreté.
Référencement	2	Comme la A : pas de description, pas d'adresse, H1 non descriptif.
Conformité au brief	3	Mots exacts mais ordre modifié (le pivot devient le titre).

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Illustration seule, aucune photo.
2. Passage clé relégué en petit texte.

Piste C · Portrait archive

Ton avis : première piste. Ma note : 21,5 sur 35. Ouvrir la maquette

La seule piste qui ouvre sur Laura elle-même : portrait, nom, métier et bouton dans le premier écran. Bonne intuition de confiance, exécution raide, et le texte de Laura est remonté dans le désordre.

1. Sur téléphone, le portrait occupe l'essentiel du premier écran.
2. Nom, métier : oui. Bouton : seulement la barre fixe.
3. Le texte d'ouverture de Laura n'arrive qu'ici, après « Je peux y apporter… ».

Forces

• Portrait, nom, descripteur et bouton de rendez-vous dans le premier écran (ordinateur) : répond au mail du 15/9, « mon nom et mon expertise en avant ».
• Le H1 est « Laura Swinnen, Accompagnement parental et sommeil, Bébés & jeunes enfants » : le meilleur titre de page pour Google de toute la série.
• La plus légère : 77 ko, Lighthouse mobile 91.

Faiblesses

• Le texte de Laura est recomposé : « Je peux y apporter mon regard… » passe en tête, avant la phrase d'ouverture.
• Sur téléphone, le premier écran est en grande partie un emplacement photo vide.
• Yeseva One, cadres rectangulaires, pied sombre : plus dur et moins fin que le logo.
• Un paragraphe collant sur ordinateur (le seul effet de la piste).

À garder

• Le portrait et la signature dès le haut de page : l'idée est reprise dans la 6, et dans ma cible sous une autre forme (portrait remonté juste après l'ouverture).

Longueur : 4,2 écrans à 390 px, 3 à 768, 3,8 à 1024, 3,6 à 1280, 3,3 à 1440. Poids : 83 ko (5 fichiers de polices, 1 feuille bloquante). Lighthouse mobile : performance 91, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 99. Sans mouvement : 4,2 écrans à 390 px ; sans JavaScript : 4,2. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 3 (par exemple « Menu », 65 × 34 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	3	Confiance immédiate (visage, nom, bouton) ; mais le fil du texte est cassé et aucune info pratique.
Design (UI)	2,5	Composition franche ; typographie de titre lourde, angles vifs peu cohérents avec le logo.
Mobile	2,5	4,2 écrans ; premier écran dominé par la photo, bouton via la barre fixe seulement.
Accessibilité	3,5	Contrastes conformes ; mêmes manques que A et B.
Performance	4,5	77 ko, 2 fichiers de polices, Lighthouse mobile 91.
Référencement	3	H1 descriptif (nom + métier) ; pas de description, pas d'adresse.
Conformité au brief	2,5	Ordre du texte bouleversé ; en revanche fidèle au « nom et expertise en avant » du mail du 15/9.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Portrait pleine hauteur : la confiance d'abord.
2. Nom, métier et bouton dans le premier écran.

1 · Lumière écartée

Ton avis : écartée (trop sombre, photo faible). Ma note : 21 sur 35. (Maquette archivée, retirée de cet espace.)

Une ouverture de cinéma : photo plein écran à contre-jour. Belle série d'images, mais sombre, très longue (7,4 écrans partout) et les infos pratiques arrivent tout à la fin. Je confirme ton choix de l'écarter.

1. Photo plein écran, sombre.
2. Un bouton clair dans le premier écran.
3. Les « Parce que… » : 1,5 écran.
4. Prix et lieu : à 6,4 écrans du haut.

Forces

• Premier écran très lisible : une phrase, un bouton, une image qui raconte quelque chose.
• Le texte sur la photo reste conforme en contraste (mesuré sur les pixels, aucun échec).
• Parmi les mieux structurées pour les lecteurs d'écran : 6 sections nommées sur 6, lien d'évitement, descriptions d'images soignées, description de page présente.

Faiblesses

• 7,4 à 7,9 écrans à toutes les largeurs : la plus longue des maquettes sans scène collante.
• Les « Parce que… » occupent 1,5 écran sur téléphone et 1,9 sur ordinateur ; le pivot « Parfois… » 1,4 écran de plus.
• Prix et lieu à 6,4 écrans (mobile) et 6,8 (ordinateur).
• Ouverture sombre : à l'opposé du « lumineux » du §9, et l'en-tête fixe reste collé pendant toute la page.
• Une photo collante sur ordinateur (1,6 écran), liens du menu mobile hauts de 38 px.

À garder

• La qualité des descriptions d'images et le nommage des sections.
• L'idée qu'une seule photo forte vaut mieux que cinq moyennes.

Longueur : 7,5 écrans à 390 px, 7,6 à 768, 7,2 à 1024, 7,9 à 1280, 7,4 à 1440. Poids : 633 ko (6 fichiers de polices, 4 feuilles bloquantes). Lighthouse mobile : performance 82, accessibilité 100, bonnes pratiques 92, référencement 63 ; bureau : performance 98. Sans mouvement : 7,5 écrans à 390 px ; sans JavaScript : 7,5. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 6 (par exemple « Sommeil », 67 × 38 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	2,5	Ouverture limpide, puis 6 écrans avant le prix et le lieu.
Design (UI)	3,5	Série photo cohérente et vrai parti pris ; mais sombre, et de grands vides entre les blocs.
Mobile	2,5	7,5 écrans ; menu avec liens de 38 px ; en-tête fixe de 97 px en permanence.
Accessibilité	4	Lien d'évitement, sections nommées, textes alternatifs, contrastes sur photo conformes.
Performance	3	633 ko, 4 feuilles de polices bloquantes, Lighthouse mobile 82.
Référencement	3	Description présente, adresse présente ; H1 non descriptif.
Conformité au brief	2,5	Texte exact, mais ambiance sombre contraire au §9 et page bien plus longue que « textes courts ».

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Belle image, mais le site s'ouvre dans le noir.
2. 1,9 écran pour les cinq « Parce que… ».
3. 1,4 écran pour le pivot « Parfois… ».
4. Infos pratiques à 6,8 écrans.

2 · Organique retenue comme source

Ton avis : appréciée (formes du logo, petite animation). Ma note : 23 sur 35. Ouvrir la maquette

Le langage visuel le plus cohérent avec le logo, et le texte de Laura dans l'ordre exact. C'est la mère de la 9. Ses limites : pas d'infos pratiques avant la fin, et beaucoup d'air (5,5 à 6,9 écrans).

1. La photo dans la forme du logo : l'image de marque.
2. Bouton dans le premier écran.
3. Tout le passage lisible d'un coup.
4. Portrait : emplacement encore vide.
5. Prix et lieu à 5,8 écrans.

Forces

• Les formes du logo découpent les photos et rythment la page : identité immédiatement reconnaissable, sans cliché « bébé ».
• L'ouverture où les mains se tracent puis laissent place à la photo : un vrai moment d'auteur, motivé par le logo.
• Ordre du §4 respecté : raisons, pivot, « C'est la place… », portes, pratique.
• Les « Parce que… » sont statiques et entièrement lisibles d'un coup (0,9 écran sur téléphone).

Faiblesses

• Prix et lieu à 5,8 écrans (mobile) et 4,8 (ordinateur) : rien de pratique dans les quatre premiers écrans.
• Sur ordinateur, les « Parce que… » prennent 1 écran entier et le pivot 0,6 de plus.
• Les formes sont partout (ouverture, raisons, portrait, deux portes) : le §9 les veut « ponctuelles, sans être répétées partout ».
• La photo de l'ouverture « respire » en boucle (14 s) sans bouton de pause.
• À 1024 px, menu sur deux lignes et bouton sur trois ; emplacement du portrait vide, avec un texte à 3,9:1.

À garder

• L'ouverture (forme + photo + mains qui se tracent).
• La composition typographique des « Parce que… » en Gloock, base de la « strophe » que je recommande plus bas.
• L'ordre du brief.

Longueur : 6,9 écrans à 390 px, 6,2 à 768, 6,7 à 1024, 6,2 à 1280, 5,5 à 1440. Poids : 508 ko (8 fichiers de polices, 3 feuilles bloquantes). Lighthouse mobile : performance 77, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 98. Sans mouvement : 6,9 écrans à 390 px ; sans JavaScript : 6,9. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : 1 texte sous le seuil (« Ton portrait ici » à 3,94:1 pour 4,5:1 demandé). Cibles tactiles de moins de 44 px sur téléphone : 6 (par exemple « contact.lauraswinnen@gmail.com », 242 × 19 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	3	Récit clair et bien rythmé ; mais le parent pressé ne trouve ni prix ni lieu avant la fin.
Design (UI)	4	Langage de formes abouti, typographie tenue, bon contraste des tailles.
Mobile	3	6,9 écrans ; bouton dans le premier écran ; liens du pied hauts de 19 px.
Accessibilité	3,5	Bonne base (évitement, focus, mouvement réduit) ; boucle sans pause, libellé du logo, un texte à 3,9:1.
Performance	3	508 ko, 5 familles de polices, Lighthouse mobile 77 ; une fois, la feuille Google Fonts a bloqué l'affichage 1,8 s.
Référencement	2,5	Pas de description ; toutes les photos sont déclarées décoratives (aucun texte alternatif).
Conformité au brief	4	Texte et ordre exacts ; seule liberté notable : les formes omniprésentes.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Forme + photo : ouverture reprise telle quelle dans la 9.
2. 1 écran entier pour les « Parce que… ».
3. 0,6 écran de plus pour le pivot.
4. Infos pratiques à 4,8 écrans.

3 · Deux lumières retenue comme source

Ton avis : appréciée (portes soir/jour, « En pratique » avec la tasse). Ma note : 23 sur 35. Ouvrir la maquette

La plus efficace pour orienter : un titre en deux lignes, puis les deux portes dès le premier écran. Deux idées excellentes (soir/jour, « En pratique » avec photo), dans un habillage plus froid et avec le pire décalage de mise en page de la série.

1. Titre compact : 3 lignes sur téléphone.
2. La porte « sommeil » dès le premier écran.
3. Premier bouton : « Parlons de son sommeil ». Pas de « Prendre rendez-vous ».
4. Les « Parce que… » n'arrivent qu'après les deux portes.
5. « En pratique » avec la photo de la tasse.

Forces

• Titre sur 2 lignes à l'ordinateur (toutes les autres en font 4) : le premier écran montre le titre ET les deux portes.
• Les portes soir/jour : le sommeil a sa lumière, l'accompagnement la sienne. Les deux piliers du brief deviennent visibles sans un mot d'explication.
• « En pratique » avec la photo de la tasse : l'information pratique devient un moment calme, pas un tableau.
• Courte : 4,4 écrans à l'ordinateur, 5,6 sur téléphone.

Faiblesses

• Aucun bouton « Prendre rendez-vous » dans le corps du premier écran ; sur téléphone, le bouton flottant n'apparaît qu'après les deux portes (2 écrans plus bas) et le premier bouton visible est « Parlons de son sommeil ».
• Les portes passent avant tout le texte d'accueil : le parent choisit une porte avant de s'être reconnu. C'est l'inverse du §4.
• Décalage de mise en page mesuré : 0,15 sur mobile, 0,34 à 0,38 sur ordinateur (seuil acceptable : 0,1). Le contenu saute au chargement des polices.
• General Sans : propre mais plus « logiciel » que chaleureux ; angles droits partout alors que le logo est tout en courbes.
• Prix et lieu à 4,6 écrans (mobile) ; portrait absent.

À garder

• Les portes soir/jour en écran partagé (reprises dans la 9).
• « En pratique » avec photo (repris dans la 9).
• La leçon du titre court : un titre de 2 lignes libère le premier écran.

Longueur : 5,6 écrans à 390 px, 4,6 à 768, 5 à 1024, 4,8 à 1280, 4,4 à 1440. Poids : 549 ko (5 fichiers de polices, 4 feuilles bloquantes). Lighthouse mobile : performance 76, accessibilité 100, bonnes pratiques 96, référencement 63 ; bureau : performance 82. Sans mouvement : 5,6 écrans à 390 px ; sans JavaScript : 5,7. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 8 (par exemple « contact.lauraswinnen@gmail.com », 261 × 27 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	4	Orientation immédiate vers les deux piliers ; mais pas de rendez-vous direct et texte d'accueil relégué.
Design (UI)	3,5	Concept soir/jour fort ; typographie et angles en décalage avec le logo.
Mobile	3,5	5,6 écrans, portes bien empilées ; bouton de rendez-vous flottant seulement après les portes.
Accessibilité	3,5	Structure et alternatives correctes ; contenu qui saute au chargement, liens du pied de 19 px.
Performance	2,5	Décalage 0,34 sur ordinateur (Lighthouse bureau 82, la plus basse avec la 6), 4 feuilles bloquantes.
Référencement	3	Description présente, textes alternatifs sur les portes.
Conformité au brief	3	Texte exact ; ordre inversé (portes avant le texte) ; grande zone ardoise au lieu d'un accent discret.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Seul titre de la série sur 2 lignes.
2. Le soir : ardoise.
3. Le jour : sable.
4. Texte d'accueil après les portes.
5. La photo qui a servi de modèle au « En pratique » de la 9.

4 · Revue écartée

Ton avis : écartée. Ma note : 21 sur 35. (Maquette archivée, retirée de cet espace.)

Le site comme une revue imprimée : bichromie caramel, lettrine, grande citation. Un vrai parti pris éditorial, mais sépia donc daté, et la plus lente de toutes. Je confirme ton choix.

1. Photos en bichromie caramel.
2. Bouton dans le premier écran.
3. Lettrine : l'esprit revue.
4. Portrait : emplacement vide.

Forces

• La bichromie donne une unité immédiate à des photos de banque disparates : une bonne réponse au caractère provisoire des images.
• Seule maquette (avec la 10) dont l'en-tête reste propre à 1024 px : le menu y est replié.
• Mise en page éditoriale assumée : c'est la plus proche du mot « éditoriale » du §9.

Faiblesses

• Affichage complet estimé à 5,1 s sur mobile lent : Lighthouse mobile 70, la plus basse. 743 ko, 5 feuilles de polices bloquantes, 7 fichiers de polices.
• Photos monochromes : l'inverse de « naturelles, lumineuses » ; l'ensemble tire vers l'album ancien.
• Pivot « Parfois… » en très grand : 0,7 écran à lui seul.
• Décalage de mise en page de 0,14 sur mobile.

À garder

• Le menu replié jusqu'à une largeur suffisante.
• La bichromie comme solution de secours si les photos définitives sont hétérogènes.

Longueur : 6,5 écrans à 390 px, 5 à 768, 5,2 à 1024, 5,5 à 1280, 5,1 à 1440. Poids : 743 ko (7 fichiers de polices, 5 feuilles bloquantes). Lighthouse mobile : performance 70, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 98. Sans mouvement : 6,5 écrans à 390 px ; sans JavaScript : 6,7. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 2 (par exemple « contact.lauraswinnen@gmail.com », 248 × 30 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	3	Parcours classique et clair ; infos pratiques tardives (5,7 écrans sur mobile).
Design (UI)	3,5	Voix éditoriale singulière ; palette monochrome qui vieillit le propos.
Mobile	3	6,5 écrans ; menu correct ; bouton dans le premier écran.
Accessibilité	3,5	Structure complète, sections nommées ; liens de contact de 30 px.
Performance	2	La plus lourde en polices et la plus lente (5,1 s estimées sur mobile).
Référencement	2,5	Pas de description ; textes alternatifs présents.
Conformité au brief	3,5	« Éditoriale, aérée » : oui. « Photos naturelles, lumineuses » : non.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Trois planches en bichromie.
2. Le pivot occupe 0,7 écran.

5 · Organique 2 écartée

Ton avis : écartée (scène collante) ; tu aimais l'ouverture des mains et la ligne sous « Être parent… ». Ma note : 18 sur 35. (Maquette archivée, retirée de cet espace.)

La 2 avec deux scènes collantes. Les chiffres donnent raison à ton rejet : 12,7 écrans sur téléphone, dont 4,3 écrans de défilement pour les seuls « Parce que… ». L'ouverture, elle, est la bonne et se retrouve dans la 9.

1. L'ouverture : les mains se tracent, puis la photo. À garder.
2. Scène collante : 4,3 écrans de défilement pour cinq phrases.
3. Seconde scène collante : 2,5 écrans pour le pivot.
4. Le portrait n'arrive qu'à 7,9 écrans.

Forces

• Le tracé des mains « à la plume » : le plus beau mouvement de la série, et il a un sens (le logo devient photo).
• La mise au point progressive de la photo sur « On a besoin de comprendre ce qui se passe » : image et texte disent la même chose.
• Sans mouvement (préférence système) ou sans JavaScript, la page redevient normale : 7,7 et 6 écrans.

Faiblesses

• 12,7 écrans sur téléphone, 11,8 sur ordinateur.
• Scène des pensées : 4,3 écrans de défilement (mobile), 5,2 (ordinateur), pour 45 mots. Scène du pivot : 2,5 à 2,7 écrans de plus.
• Portrait à 7,9 écrans, prix à 11,6 écrans.
• Texte qu'il faut faire défiler pour lire : exactement ce que tu as exclu.

À garder

• L'ouverture (déjà dans la 9).
• La mise au point de la photo, en version « une fois, à l'arrivée » (c'est ce que fait la 7).

Longueur : 12,7 écrans à 390 px, 11,8 à 768, 12,8 à 1024, 12,3 à 1280, 11,8 à 1440. Poids : 715 ko (8 fichiers de polices, 3 feuilles bloquantes). Lighthouse mobile : performance 81, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 98. Sans mouvement : 7,7 écrans à 390 px ; sans JavaScript : 8,1. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 6 (par exemple « contact.lauraswinnen@gmail.com », 242 × 19 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	1,5	Le parcours vers le rendez-vous est noyé : 11 écrans avant le prix.
Design (UI)	3,5	De beaux moments de mouvement, au service du texte ; mais ils imposent leur rythme.
Mobile	1,5	12,7 écrans : hors sujet pour un parent fatigué sur son téléphone.
Accessibilité	3	Repli propre en mouvement réduit ; mais contenu piloté par le défilement et boucle sans pause.
Performance	3	715 ko, Lighthouse mobile 81 ; deux scènes animées image par image.
Référencement	2,5	Comme la 2.
Conformité au brief	3	Texte exact ; « textes courts, respiration » contredit par la longueur.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. 5,2 écrans de défilement pour les « Parce que… ».
2. 2,7 écrans pour « Parfois… ».

6 · Deux lumières 2 écartée

Ton avis : écartée (trop de défilement). Ma note : 18,5 sur 35. (Maquette archivée, retirée de cet espace.)

La 3 avec une « journée qui tombe » en scène collante. Même verdict que la 5 : 11,5 écrans. Mais c'est la seule maquette qui met le portrait de Laura dans le premier écran, et ça, il faut le retenir.

1. Le portrait dans le premier écran : unique dans la série.
2. La porte « sommeil » suit immédiatement.
3. Scène « journée » : 4,3 écrans de défilement.
4. Scène « aube » : 2,2 écrans.

Forces

• Portrait, nom et métier dès le premier écran, sur téléphone comme sur ordinateur : la seule de toute la série.
• L'idée narrative (la lumière baisse avec les doutes, revient avec « comprendre ») est juste.

Faiblesses

• 11,5 écrans sur téléphone, 11,6 sur ordinateur ; scène « journée » de 4,3 à 5,2 écrans.
• Aucun bouton de rendez-vous dans le premier écran du téléphone (premier bouton à 972 px, et c'est « Parlons de son sommeil » ; le bouton flottant n'arrive qu'après les portes).
• Décalage de mise en page : 0,15 (mobile) et 0,34 à 0,38 (ordinateur), comme la 3.
• Prix à 10,6 écrans.

À garder

• Le portrait tôt dans la page : dans ma cible, il remonte juste après l'ouverture (1,3 écran sur ordinateur) plutôt que dedans, pour ne pas concurrencer la photo des mains.

Longueur : 11,5 écrans à 390 px, 11,3 à 768, 12,3 à 1024, 12 à 1280, 11,6 à 1440. Poids : 775 ko (5 fichiers de polices, 4 feuilles bloquantes). Lighthouse mobile : performance 80, accessibilité 100, bonnes pratiques 96, référencement 63 ; bureau : performance 81. Sans mouvement : 6,5 écrans à 390 px ; sans JavaScript : 6,6. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : aucun texte sous le seuil. Cibles tactiles de moins de 44 px sur téléphone : 8 (par exemple « contact.lauraswinnen@gmail.com », 261 × 27 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	2	La confiance arrive tout de suite (portrait), puis le parcours se perd dans le défilement.
Design (UI)	3,5	Récit de lumière cohérent ; habillage General Sans plus froid.
Mobile	1,5	11,5 écrans ; bouton de rendez-vous flottant tardif.
Accessibilité	3	Contenu piloté par le défilement ; contenu qui saute au chargement.
Performance	2,5	775 ko, décalage 0,34 sur ordinateur (Lighthouse bureau 81).
Référencement	3	Description présente, portrait avec texte alternatif.
Conformité au brief	3	Texte exact ; ordre modifié ; longueur contraire à « textes courts ».

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Portrait et signature en ouverture.
2. 5,2 écrans de défilement pour la scène « journée ».

7 · Condensée candidate

Ton avis : pas d'avis marqué. Ma note : 23,5 sur 35. Ouvrir la maquette

La plus efficace de toutes, et celle que tu as le moins regardée. Tout le passage des « Parce que… » lisible en un bloc, les infos pratiques dans le premier écran, 3,9 écrans à l'ordinateur. Elle manque de souffle et ses portes sont timides, mais c'est elle qui prouve que le passage n'a pas besoin d'un film.

1. Prix, lieu, visio : à 1 écran du haut.
2. Tout le passage visible d'un coup, « Parce qu' » en étiquette.
3. Pivot avec vignette qui fait sa mise au point une fois.
4. Portes en petites vignettes : trop discrètes.
5. Portrait présent.

Forces

• Prix, lieu et visio dans le premier écran de l'ordinateur (barre d'infos en trois cellules) ; à 1,0 écran sur téléphone.
• Les « Parce que… », la chute et le pivot tiennent en 0,7 écran (ordinateur) : tout est lisible sans attendre ni défiler.
• La vignette qui fait sa mise au point une seule fois : le bon dosage de mouvement.
• La plus courte avec la 10 : 3,9 écrans à l'ordinateur.

Faiblesses

• L'anaphore détache « Parce qu' » en petit italique à gauche : le texte de Laura est tout là, mais redécoupé (à lui faire valider si on garde cette forme).
• Portes réduites à deux vignettes de 145 px : les deux piliers pèsent moins que la barre d'infos.
• Trois boutons « Prendre rendez-vous » dans le premier écran de l'ordinateur (en-tête, ouverture, barre).
• Bouton de la barre d'infos à 4,33:1 (seuil 4,5) ; à 1024 px, le logo passe sur 5 lignes et le menu sur 2.
• Sur téléphone, le passage statique prend 0,89 écran : plus que le film de la 9 (0,70).

À garder

• La preuve qu'on peut tout montrer d'un coup.
• La barre d'infos en cellules (libellé + valeur), plus lisible que la ligne à points médians de la 9.
• La mise au point unique de la vignette.

Longueur : 5,9 écrans à 390 px, 4,8 à 768, 5,1 à 1024, 4,4 à 1280, 3,9 à 1440. Poids : 706 ko (8 fichiers de polices, 3 feuilles bloquantes). Lighthouse mobile : performance 79, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 98. Sans mouvement : 5,9 écrans à 390 px ; sans JavaScript : 6,2. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : 1 texte sous le seuil (« Prendre rendez-vous » à 4,33:1 pour 4,5:1 demandé). Cibles tactiles de moins de 44 px sur téléphone : 6 (par exemple « contact.lauraswinnen@gmail.com », 242 × 19 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	4	Qui, quoi, combien, où, et le bouton : tout dans le premier écran. Rien n'est caché derrière du temps.
Design (UI)	3,5	Dense et bien réglée ; moins de respiration que ce que demande le §9, portes sous-dimensionnées.
Mobile	3,5	5,9 écrans ; barre fixe après l'ouverture ; liens du pied de 19 px.
Accessibilité	3,5	Rien qui boucle hormis la respiration de la photo ; un bouton à 4,33:1.
Performance	3	706 ko, 5 familles de polices, Lighthouse mobile 79.
Référencement	2,5	Pas de description ; photos décoratives sans texte alternatif.
Conformité au brief	3,5	Mots exacts ; portes avant « C'est la place… » ; barre d'infos = résumé de la page Consultations.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Barre d'infos dans le premier écran, mais 3 boutons identiques visibles.
2. Le passage complet en 0,7 écran.
3. Le pivot, lisible en permanence.
4. Portes sous-dimensionnées.
5. Portrait à 2,5 écrans.

8 · Le petit film candidate

Ton avis : ta préférée avant la 9. Ma note : 23,5 sur 35. Ouvrir la maquette

La 7 avec le film à la place de la composition statique. Le film est un vrai moment d'auteur, proprement fait (pause, barre de progression, repli statique). Il a aussi trois défauts mesurables, que la 9 hérite tels quels.

1. Infos pratiques à 1 écran.
2. Le film : 0,7 écran pour une phrase à la fois.
3. Portes en formes : moins fortes que le soir/jour de la 3.
4. Portrait présent.

Forces

• Le film ne dépend pas du défilement : il se joue sur place, se met en pause hors écran, et dispose d'un bouton Pause utilisable au clavier.
• Sans mouvement ou sans JavaScript, tout le passage apparaît en composition statique : rien n'est perdu.
• Mêmes atouts que la 7 pour les infos pratiques (premier écran à l'ordinateur).

Faiblesses

• Le cadre du film fait 560 px de haut à l'ordinateur (0,72 écran avec ses marges) et 520 px sur téléphone, pour afficher une phrase à la fois.
• 24 secondes pour voir tout le passage ; la phrase pivot « On a besoin de comprendre ce qui se passe » n'apparaît qu'à la 19e seconde.
• La cinquième pensée (20 mots) reste 2,2 s à l'écran : il faudrait environ 7 s pour la lire.
• Quand le film est en pause automatique, le bouton affiche le triangle « lecture » avec le mot « Pause ».
• Portes en formes moyennes : ni la force de la 3, ni la compacité de la 7.

À garder

• La mécanique du film (horloge propre, pause, repli statique) si tu choisis la solution « film compact ».
• Le principe « jamais lié au défilement ».

Longueur : 6,2 écrans à 390 px, 5,1 à 768, 5,2 à 1024, 4,5 à 1280, 4 à 1440. Poids : 722 ko (8 fichiers de polices, 3 feuilles bloquantes). Lighthouse mobile : performance 77, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 97. Sans mouvement : 6,4 écrans à 390 px ; sans JavaScript : 6,8. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : 1 texte sous le seuil (« Prendre rendez-vous » à 4,33:1 pour 4,5:1 demandé). Cibles tactiles de moins de 44 px sur téléphone : 6 (par exemple « contact.lauraswinnen@gmail.com », 242 × 19 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	3,5	Parcours de la 7, mais le passage où l'on se reconnaît est maintenant rationné par le temps.
Design (UI)	4	Le film donne une personnalité à la page ; cadre trop grand pour ce qu'il montre.
Mobile	3,5	6,2 écrans ; barre fixe ; film de 0,7 écran.
Accessibilité	3,5	Pause présente et accessible ; respiration de la photo sans pause ; bouton à 4,33:1.
Performance	3	722 ko, Lighthouse mobile 77 ; film animé image par image mais suspendu hors écran.
Référencement	2,5	Texte du film bien présent dans la page (version statique) ; pas de description.
Conformité au brief	3,5	Mots exacts ; animation non demandée ; portes avant « C'est la place… ».

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Barre d'infos.
2. 648 px de haut pour quatre mots à la fois.
3. Triangle « lecture » + mot « Pause » : l'état du bouton est incohérent hors écran.
4. Portes.
5. Portrait à 2,5 écrans.

9 · Film + portes base recommandée

Ton avis : TA PRÉFÉRÉE. Ma note : 24,5 sur 35. Ouvrir la maquette

La meilleure composition de la série, et je te rejoins : c'est la bonne base. Elle réunit l'ouverture de la 2, les infos de la 7, le film de la 8 et les portes de la 3. Il lui reste sept défauts précis, tous corrigibles sans toucher à ce que tu aimes.

1. La photo des mains dans la forme du logo.
2. Bouton visible sans défiler (690 px sur 844).
3. Prix et lieu : juste sous le pli.
4. Le film : 592 px pour une phrase à la fois.
5. Porte « sommeil » : la plus forte de la série.
6. Portrait : seulement à 3,8 écrans.
7. Téléphone et e-mail : 20 px de haut.
8. Les mêmes coordonnées répétées 240 px plus bas.

Forces

• Premier écran clair à toutes les largeurs : la phrase de Laura, un bouton, la photo des mains dans la forme du logo. Bouton visible sans défiler à 390 × 844.
• Prix, lieu et visio dans le premier écran de l'ordinateur ; juste sous le pli sur téléphone (1,0 écran).
• Les portes soir/jour avec leurs photos : les deux piliers ont enfin le poids que leur donne le brief.
• Alternance réussie entre blocs organiques (contenus) et bandes pleine largeur (portes, « En pratique ») : la page a un rythme.
• Le portrait a sa place, avec signature ; « En pratique » donne adresse complète, téléphone et e-mail cliquables.
• Socle technique sain : aucune erreur, aucun débordement de 320 à 1440 px, focus visible sur les 23 éléments, page complète sans JavaScript et en mouvement réduit, 0 décalage de mise en page.

Faiblesses

• Le film : 648 px à l'ordinateur et 592 px sur téléphone pour une phrase à la fois, 24 s pour tout voir, cinquième pensée illisible (20 mots en 2,2 s).
• Ordre : les portes passent avant « C'est la place… », qui perd alors son sens (« la place » répond à « comprendre ce qui se passe », six cents pixels plus haut).
• Portrait à 2,8 écrans (ordinateur) et 3,8 (téléphone) : trop tard pour la confiance.
• 6,8 écrans sur téléphone : hors scènes collantes, seules la 1 (7,5) et la 2 (6,9) font plus.
• Trois boutons « Prendre rendez-vous » identiques dans le premier écran de l'ordinateur ; celui de la barre d'infos est à 4,33:1.
• En-tête cassé sur les écrans moyens : de 992 à 1100 px le logo passe sur 5 lignes, et jusqu'à 1279 px deux liens du menu passent sur 2 lignes.
• Téléphone et e-mail : cibles de 20 px de haut sur mobile, affichées deux fois à 240 px d'écart (« En pratique » puis pied).
• 856 ko, dont 636 ko d'images ; 5 familles de polices servies par 2 fournisseurs, 3 feuilles bloquantes.

À garder

• Tout, sauf le film sous sa forme actuelle et l'ordre des sections.
• L'ouverture, la barre d'infos (sans son bouton), les portes, le portrait, « En pratique », la barre de rendez-vous fixe sur mobile.

Longueur : 6,8 écrans à 390 px, 6,1 à 768, 5,6 à 1024, 4,9 à 1280, 4,4 à 1440. Poids : 856 ko (8 fichiers de polices, 3 feuilles bloquantes). Lighthouse mobile : performance 77, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 96. Sans mouvement : 7,1 écrans à 390 px ; sans JavaScript : 7,4. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : 1 texte sous le seuil (« Prendre rendez-vous » à 4,33:1 pour 4,5:1 demandé). Cibles tactiles de moins de 44 px sur téléphone : 8 (par exemple « contact.lauraswinnen@gmail.com », 257 × 20 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	4	Qui, quoi, combien, où et le bouton en un écran d'ordinateur ; le passage central est rationné par le temps, et le portrait arrive tard.
Design (UI)	4,5	La hiérarchie, le rythme et la cohérence avec le logo les plus aboutis ; titre sur 4 lignes et cadre du film surdimensionné.
Mobile	3,5	Bouton à 690 px sur 844 (visible), barre fixe ensuite ; mais 6,8 écrans, et bouton sous le pli sur un petit téléphone (320 × 568).
Accessibilité	3,5	Lighthouse 100 et base saine ; reste un bouton à 4,33:1, une boucle sans pause, le libellé du logo, des cibles de 20 px.
Performance	3	Lighthouse mobile 77 ; affichage complet estimé 4,2 s sur mobile lent, dont 2,2 s dues aux feuilles de polices ; 414 ko d'images économisables.
Référencement	2,5	Structure et adresse en place ; ni description, ni données structurées, H1 non descriptif (assumé), liens vides (maquette).
Conformité au brief	3,5	100 % du texte, mot pour mot ; un écart d'ordre, deux ajouts (phrases du §5, résumé pratique), une grande zone ardoise.

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Bouton 1.
2. Bouton 2.
3. Bouton 3, à 4,33:1.
4. 648 px de haut pour quatre mots à la fois.
5. Le soir.
6. Le jour.
7. « C'est la place… » et le portrait, après les portes : à remonter.
8. « En pratique » : complet et calme.

10 · Ouverture candidate

Ton avis : tu l'aimes MOINS que la 9. Ma note : 25 sur 35. Ouvrir la maquette

Elle a raison sur le fond et tort sur la forme. Raison : plus de film, l'ordre du brief rétabli, le portrait à 1,3 écran, la page la plus courte. Tort : elle a voulu tout mettre dans l'ouverture, et l'ouverture y a perdu son calme. Ton impression est juste, et elle se mesure.

1. Photo réduite, en haut à droite : bon réglage pour le téléphone.
2. Bouton à 576 px : le plus haut de la série.
3. Les pensées, en petit italique, coupées par le pli.
4. Le pivot ouvre « C'est la place… » : l'ordre de Laura.
5. Portrait à 1,8 écran.

Forces

• Ordre du §4 exact : pensées, chute, pivot, « C'est la place… », portes.
• Portrait à 1,3 écran (ordinateur) et 1,8 (téléphone), contre 2,8 et 3,8 dans la 9.
• Plus rien ne boucle, contrairement à la 9 : une seule apparition de 3,6 s, puis tout reste en place.
• En-tête propre à 1024 px : le menu y reste replié jusqu'à 1199 px (il reste deux liens sur 2 lignes entre 1200 et 1279 px). 3,9 écrans à l'ordinateur.
• Sur téléphone, le haut de l'ouverture est le mieux réglé de la série : photo réduite à droite, titre à 312 px, bouton à 576 px.

Faiblesses

• Premier écran d'ordinateur en trois colonnes concurrentes (titre, pensées, photo) plus la chute, plus la barre d'infos : cinq choses à lire au lieu de deux.
• La photo passe de 504 à 353 px de large : la moitié de sa surface. C'est elle qui portait l'émotion.
• Les pensées passent de 36 à 48 px (film) à 17 px en italique brun : le passage où le parent se reconnaît devient une note de marge.
• Sur téléphone, l'ouverture fait 1,17 écran et le pli coupe la liste des pensées en son milieu.
• Les pensées disposées en arc autour de la photo ne supporteront pas un texte plus long ou une sixième phrase (Laura modifiera ses textes).

À garder

• L'ordre des sections.
• « Parfois… » en ouverture de « C'est la place… ».
• Le haut de l'ouverture sur téléphone.
• Le menu replié à 1024 px.
• L'absence de boucle.

Longueur : 6,7 écrans à 390 px, 6,1 à 768, 5 à 1024, 4,3 à 1280, 3,9 à 1440. Poids : 738 ko (8 fichiers de polices, 3 feuilles bloquantes). Lighthouse mobile : performance 80, accessibilité 100, bonnes pratiques 96, référencement 54 ; bureau : performance 98. Sans mouvement : 6,7 écrans à 390 px ; sans JavaScript : 7. Contrastes (mesurés sur les pixels, à 390 et 1440 px) : 1 texte sous le seuil (« Prendre rendez-vous » à 4,33:1 pour 4,5:1 demandé). Cibles tactiles de moins de 44 px sur téléphone : 8 (par exemple « contact.lauraswinnen@gmail.com », 257 × 20 px).

Notes sur les 7 axes, et pourquoi

Axe	Note sur 5	Justification
Parcours (UX)	3,5	Rien n'est caché derrière du temps et la confiance arrive tôt ; mais le premier écran demande trop de lecture.
Design (UI)	3,5	Sous l'ouverture, la qualité de la 9 ; l'ouverture elle-même perd sa hiérarchie.
Mobile	3,5	6,7 écrans ; bouton à 576 px ; liste des pensées coupée par le pli.
Accessibilité	4	Aucune animation infinie, ordre de lecture identique au brief ; reste le bouton à 4,33:1 et les cibles de 20 px.
Performance	3,5	738 ko, pas de film à animer, Lighthouse mobile 80.
Référencement	2,5	Comme la 9.
Conformité au brief	4,5	Texte et ordre exacts ; restent les ajouts communs (phrases du §5, résumé pratique).

Le premier écran aux 5 largeurs

La page entière sur ordinateur, annotée

1. Colonne 1 : le titre.
2. Colonne 2 : les pensées à 17 px.
3. Colonne 3 : la photo, moitié moins grande.
4. Puis la barre d'infos : cinq blocs dans un seul écran.
5. Le pivot, bien placé.
6. Portrait à 1,3 écran.

Les références externes

Onze sites retenus, tous réellement consultés le 2 octobre 2026 (texte et balises de la page d'accueil ; le rendu visuel n'a pas été examiné, donc rien ci-dessous ne juge leur graphisme). Trois d'entre eux ont été vérifiés une seconde fois de mon côté (Les Petits Rêveurs, La Voix Lactée, Gentle Nights). Deux sites qui refusaient les lectures automatiques n'ont pas été consultés (dodo-co.com, birthsavvy.com.au). Aucune consultante en sommeil installée à Huy, Liège ou Namur n'est ressortie de la recherche, mais l'outil s'appuie sur un index américain : à vérifier dans Google.be avant d'en conclure quoi que ce soit.

Ce qu'elles nous apprennent

1. Le premier écran dit le métier, le public et la modalité. Chez Laura, le métier et le public sont dans le logo, la modalité dans la ligne d'infos : c'est suffisant, à condition que la ligne d'infos soit bien dans le premier écran du téléphone.
2. Une phrase de reconnaissance juste après le titre. Toutes les bonnes pages en ont une. Laura en a cinq, et meilleures : raison de plus pour qu'elles soient lisibles tout de suite.
3. Le prix s'affiche sur l'accueil, avec la durée. Celles qui le cachent vendent des programmes. Les tarifs relevés en francophonie (70 à 80 € la consultation) situent les 70 € de Laura dans la norme.
4. La réservation en un clic, depuis le haut de la page et depuis l'offre. Formulaire long ou e-mail seul : friction.
5. Dire ce qui va se passer, en trois temps. C'est le rôle du texte de la page Consultations de Laura (« Un temps pour faire le point ») : pas besoin de l'ajouter à l'accueil.
6. Le cadre non médical tient en une phrase, près de l'offre ou en FAQ.
7. Sans avis clients, la confiance passe par le portrait, le parcours et le lieu. Le centre médical pour enfants est un ancrage fort : le citer en toutes lettres, comme le fait « En pratique ».
8. Des pages courtes (500 à 1 500 mots, 5 à 7 sections) et un référencement local soigné dans les balises plutôt que dans le texte.

Les sites, un par un

Les Petits Rêveurs · Belgique, Hainaut

Titre « Retrouvez des nuits sereines grâce à un accompagnement personnalisé », bouton « Je prends rendez-vous » vers Calendly en un clic. « Consultation ciblée · 70 € » dans l'intitulé de l'offre. Sous chaque offre : « mes consultations ne remplacent en aucun cas un avis médical ».

Pour Laura : La référence la plus proche. Même prix que Laura, affiché sans détour ; cadre non médical dit en une phrase près de l'offre ; données structurées locales complètes (zones desservies, dont Liège et Namur).

Gentle Nights · Royaume-Uni

Titre « Helping your family sleep again », puis « If sleep has become the hardest part of your day, you're not alone ». Prix en grands titres (129, 279, 399 livres). Aucun témoignage sur l'accueil ; une phrase de posture mise en exergue.

Pour Laura : La plus sobre. Preuve qu'on peut lancer sans avis clients : la confiance vient du parcours, d'un déroulé en trois temps et d'une phrase de posture. La phrase de reconnaissance juste sous le titre fait le travail des « Parce que… » de Laura.

La Voix Lactée · France, Valence

Bouton « Prendre rendez-vous » vers cal.com en un clic ; sur la page Cal.com, chaque type de rendez-vous porte sa durée et son prix dans son intitulé. Foire aux questions : « Je ne remplace pas un médecin, une sage-femme ou un autre professionnel de santé. »

Pour Laura : Le précédent Cal.com. Mettre « environ 1 h · 70 € » et le lieu dans l'intitulé de chaque type de rendez-vous ; traiter le cadre non médical comme une question de FAQ.

Charlotte Pouyet · France, Nantes

Titre « Spécialiste du sommeil bébé et enfant », suivi d'une sous-ligne qui donne en six mots la tranche d'âge, la ville (Nantes) et la visio. Page de réservation avec deux boutons par prestation : « Je réserve en visio » et « Je réserve au cabinet ».

Pour Laura : La sous-ligne « âge, ville et visio » en six mots. Le double bouton visio ou cabinet est exactement le cas de Laura (deux types de rendez-vous dans Cal.com). À éviter : le carrousel d'avis avant toute présentation.

L'Atelier des Nuits · France

Environ 500 mots : titre, méthode en trois étapes, deux tarifs avec durée (1 h 30, 75 € ; 45 min, 55 €), deux articles. Mais aucun bouton de réservation sur l'accueil et aucune présentation de la praticienne.

Pour Laura : Une page d'accueil de 500 mots suffit à dire qui, comment et combien (celle de Laura en fait environ 420 dans la 10). Contre-exemple pour le reste : sans bouton ni visage, le parent ne sait pas quoi faire.

Petite framboise · France

Les deux mêmes piliers que Laura : « Accompagner le sommeil, Cultiver l'attachement », menu à deux entrées (sommeil, guidance parentale). Ni prix ni lieu sur l'accueil.

Pour Laura : Deux piliers tenus par deux entrées parallèles : c'est le rôle des portes soir/jour. À éviter : émojis dans les titres, accueil tirée vers la vente.

Child in Time, « Confident Parenting » · Royaume-Uni, en ligne

Prix, durée et livrable en une phrase (« Sessions cost £80 per single session (45mins) + follow up email summary »). Parcours en trois étapes : réserver, court questionnaire de trois questions, rendez-vous. Réservation dans la page.

Pour Laura : Le questionnaire de trois questions à la réservation : Laura en avait un dans son premier dossier. Dire ce qui se passe après le clic rassure.

The Positive Parent Coach · Royaume-Uni

Titre « Helping parents stay grounded when emotions run high » : une situation vécue, pas un métier. Page très longue (19 sections), sans prix.

Pour Laura : Confirme le choix de Laura d'ouvrir sur ce que vit le parent. Contre-exemple pour la longueur.

Caroline Grenade · Belgique, Beaufays et Verviers

Concurrente locale. Titre « Bienvenue », aucun bouton d'action, contact par téléphone ou formulaire ; « 75€ / rencontre » en bas de page ; titre d'onglet en liste de mots-clés (coach parental, Rituel Rebozo, Sprimont, Liège, Verviers).

Pour Laura : Laura sera mieux armée sur trois points : un premier écran qui dit quelque chose, la réservation en ligne, et un positionnement clair sur le sommeil et les 0 à 3 ans, que cette concurrente n'occupe pas.

Sara Fondaire · Belgique, Namur

Une centaine de mots : le nom en titre, deux phrases de présentation, quatre liens. Titre d'onglet « Sara Fondaire | Psychologue Namur ». Rendez-vous par e-mail seulement, pas de prix.

Pour Laura : La sobriété « nom + deux phrases » tient quand le titre d'onglet porte le métier et la ville. Contre-exemple pour la prise de rendez-vous.

La Fée du Sommeil · Belgique, Bruxelles

Deux titres principaux (« La fée du sommeil », « Il dort... Vous aussi »), méthode certifiée mise en avant, promesse de résultat, prix absent de l'accueil, appel découverte de 20 minutes.

Pour Laura : Ce que le brief de Laura exclut : une méthode, une promesse. Utile pour mesurer l'écart de ton. Seul point commun à garder : l'invitation finale à « parler du sommeil de votre enfant », proche de son bouton.

Comment j'ai mesuré

• 13 pages (pistes A, B, C et maquettes 1 à 10), ouvertes dans Chromium piloté par Playwright, à 5 largeurs : 390 × 844, 768 × 1024, 1024 × 768, 1280 × 800 et 1440 × 900.
• À 390 et 1440 px, trois passages : normal, mouvement réduit, sans JavaScript.
• Pour chaque page : longueur en écrans, hauteur de chaque section, position de chaque bouton, du prix, du lieu et du portrait, taille des cibles tactiles, titres, zones de repère, images, polices, poids réseau, animations en cours, premier affichage, décalages de mise en page.
• Contrastes mesurés sur les pixels : je rends le texte transparent, je photographie le fond réel (photo, dégradé, grain compris) et je compare chaque texte à ce qu'il a vraiment derrière lui. C'est ce qui révèle le bouton à 4,33:1, que le calcul sur les couleurs déclarées donne conforme (4,53:1) : le grain de papier assombrit le fond et mange la marge.
• Lighthouse 13.5 sur chaque page, en mobile (téléphone moyen, 4G lente simulée) et en bureau.
• Sur la 9 : parcours complet au clavier (23 éléments), affichage à 320 px, images clés du film et de l'ouverture.
• Les solutions pour les « Parce que… » ont été esquissées et mesurées sur une page d'essai, avec les couleurs et les polices de la 9 et le texte de Laura mot pour mot.

Limites à garder en tête : mesures faites sur ton ordinateur (le site est servi en local, seules les polices viennent d'internet) ; un seul moteur, Chromium (pas de Safari sur iPhone) ; aucun test sur un vrai téléphone ni avec un lecteur d'écran ; photos provisoires. Les notes Lighthouse de référencement sont basses partout (54 à 63) pour une raison normale : les maquettes interdisent volontairement l'indexation. Le coût du grain de papier au défilement n'a pas pu être mesuré honnêtement (le navigateur de test n'utilise pas de carte graphique). Les scripts sont dans temp/audit-2026-10-02/ et se relancent en une commande.