Produits Entr'ouvert » Intégrations graphiques Publik

Sur la base de https://www.mnhn.fr/ et de la charte graphique ci-jointe

En complément des remarques de Fred sur le pied-de-page, j’ai appliqué en local le thème et je note que :

· Je trouve l’effet d’ombre sous la nav un peu forcé par rapport au site institutionnel.

· Je retrouve pas sur le site institutionnel les effets de hover que tu as défini sur les liens. Je loupe un truc ?

· J’aurais bien vu une inversion des couleurs entre fond de la page et fond des cellules
(sur le site institutionnel les "cellules" sont sur un fond plus clair que le fond de la page, voir par exemple cette page https://www.mnhn.fr/fr/les-plantes-de-nos-jardins)

· Peut-être accroître le ratio entre la taille des titres et la taille du texte ? Sur le site institutionnel les titres sont bien plus massifs que le texte.

· Dans le formulaire, en mode desktop sur l’affichage des étapes à droit des champs, il y a une étrange marge entre la dernière étape et la fin de l’encadré. J’ai jamais constaté ça auparavant mais j’ai l’impression que c’est dans base-theme directement que c’est défini (voir capture wcs-steps-desktop.png). Étrange.

· En mode mobile, toujours cet affichage des étapes me paraît bizarre (voir capture wcs-steps-mobile.png, l’effet d’ombre est présent partout sauf sur la limite inférieure, laquelle présente une simple bordure 1px solide). Je serais pour retirer cet effet d’ombrage en mode mobile.

· Pas super fan de l’input text qui n’apparaît que par une bordure inférieure, sans effet de survol. À première vue je l’avais pas vu, et je croyais à un bogue d’affichage de mon formulaire de test. Sans savoir si je préfère la version du site institutionnel, celle-ci diffère avec ce que tu proposes, voir par exemple le formulaire d’inscription à la newsletter : https://www.mnhn.fr/fr/recevez-nos-actualites (formulaire pour lequel les champs présentent trop peu de contraste avec le fond, pas fan non plus, peut-être une autre solution à trouver).

· Pour le footer je pense que tu peux simplement prendre la partie du milieu ("Nous suivre", "Professionnels", "Où nous trouver"). Peut-être par exemple s’inspirer du thème de la Corrèze : https://services-en-ligne.correze.fr/ ? (lequel reprend lui aussi un affichage en trois pans horizontaux et des icônes / liens vers les réseaux sociaux)

· Plutôt que de déclarer une police distante (je ne vois ça fait que pour les thèmes de Quimper et Toulouse dans nos dépôts), je crois qu’assez systématiquement on cherche à proposer au client une police libre qui ressemble à celle initialement voulue.

· Pour le patche en lui-même, des plus puristes de la css te reprocheraient de mélanger espaces et tabulations pour l’indentation (je crois qu’ici on est plutôt team tab), mais perso ça ne me choque pas plus que ça :)

· Tu définis dans le config.json une ressource de bannière (header:background) que je ne retrouve pas reprise par la suite, ni dans la css ni dans tes captures. Je loupe un truc ?

–––––

Rien à voir avec la relecture du thème en lui-même, mais je vois au passage qu’il y a un glitch de chevauchement du champ carte sur le menu responsive en left-to-right. Je vais faire un ticket. Je vais ticketter aussi le $font-line-height que je n’arrive toujours pas à déclarer avec succès dans _vars.scss.

Paul Marillonnet a écrit :

En complément des remarques de Fred sur le pied-de-page, j’ai appliqué en local le thème et je note que :

· Je trouve l’effet d’ombre sous la nav un peu forcé par rapport au site institutionnel.

Étonnant, le rendu semble différent chez toi. Sous chrome 105 ça rend ça chez moi (cf screenshot), justement j'avais fait gaffe que ça matche leur site. J'ai un rendu similaire sur Firefox 104. Tu utilise quel navigateur ?

· Je retrouve pas sur le site institutionnel les effets de hover que tu as défini sur les liens. Je loupe un truc ?

On les voit ponctuellement par exemple sur https://www.mnhn.fr/en/our-research-themes

· J’aurais bien vu une inversion des couleurs entre fond de la page et fond des cellules
(sur le site institutionnel les "cellules" sont sur un fond plus clair que le fond de la page, voir par exemple cette page https://www.mnhn.fr/fr/les-plantes-de-nos-jardins)

J'ai vu plusieurs versions, celle que tu as partagée (fond cellule plus clair que le fond de page), celle ci (https://www.mnhn.fr/fr/l-enseignement-et-la-formation), ou même https://www.mnhn.fr/fr ou on voit les deux. Je suis un peu embétée parce que leurs pages de contenus un peu plus classiques, typiquement https://www.mnhn.fr/fr/faq-contacts ou https://www.mnhn.fr/fr/familles, sont en fond blanc.

· Peut-être accroître le ratio entre la taille des titres et la taille du texte ? Sur le site institutionnel les titres sont bien plus massifs que le texte.

Je viens de changer ça, ça devrait être mieux (j'ai pas mis à leur niveau, nos cellules sont plus esquichées ça déborde vraiment trop)

· Dans le formulaire, en mode desktop sur l’affichage des étapes à droit des champs, il y a une étrange marge entre la dernière étape et la fin de l’encadré. J’ai jamais constaté ça auparavant mais j’ai l’impression que c’est dans base-theme directement que c’est défini (voir capture wcs-steps-desktop.png). Étrange.

Oui je l'ai vu aussi, ce n'est pas lié au thème MNHN a priori, je vais faire un ticket dédié.

· En mode mobile, toujours cet affichage des étapes me paraît bizarre (voir capture wcs-steps-mobile.png, l’effet d’ombre est présent partout sauf sur la limite inférieure, laquelle présente une simple bordure 1px solide). Je serais pour retirer cet effet d’ombrage en mode mobile.

Je l'ai enlevée sur mobile (c'était beaucoup plus visible chez toi à cause de cette histoire de rendu d'ombrage qui diffère entre nos navigateurs)

· Pas super fan de l’input text qui n’apparaît que par une bordure inférieure, sans effet de survol. À première vue je l’avais pas vu, et je croyais à un bogue d’affichage de mon formulaire de test. Sans savoir si je préfère la version du site institutionnel, celle-ci diffère avec ce que tu proposes, voir par exemple le formulaire d’inscription à la newsletter : https://www.mnhn.fr/fr/recevez-nos-actualites (formulaire pour lequel les champs présentent trop peu de contraste avec le fond, pas fan non plus, peut-être une autre solution à trouver).

J'avais activé le mode light pour les formulaires, mais tu as raison, c'est trop peu visible. Je suis repassé sur le mode normal, qui est plus accessible (leurs formulaires du site institutionnel me semblent mauvais de ce point de vue). J'ai aussi assombri légèrement la couleur de fond des input pour que ça ressorte plus.

· Pour le footer je pense que tu peux simplement prendre la partie du milieu ("Nous suivre", "Professionnels", "Où nous trouver"). Peut-être par exemple s’inspirer du thème de la Corrèze : https://services-en-ligne.correze.fr/ ? (lequel reprend lui aussi un affichage en trois pans horizontaux et des icônes / liens vers les réseaux sociaux)

J'ai intégré le footer en dur suggéré par Frédéric, je pense que je vais attendre le retour client pour intégrer un footer plus complexe, car je ne suis pas certaine de leur besoin en termes de contenus.

· Plutôt que de déclarer une police distante (je ne vois ça fait que pour les thèmes de Quimper et Toulouse dans nos dépôts), je crois qu’assez systématiquement on cherche à proposer au client une police libre qui ressemble à celle initialement voulue.

Assez d'accord aussi, je garde Montserrat.

· Pour le patche en lui-même, des plus puristes de la css te reprocheraient de mélanger espaces et tabulations pour l’indentation (je crois qu’ici on est plutôt team tab), mais perso ça ne me choque pas plus que ça :)

J'utilise effectivement des espaces systématiquement, les tabs sont probablement des résidus de copier coller (j'ai harmonisé en espaces).

· Tu définis dans le config.json une ressource de bannière (header:background) que je ne retrouve pas reprise par la suite, ni dans la css ni dans tes captures. Je loupe un truc ?

Bien vu, c'est corrigé.

–––––

Rien à voir avec la relecture du thème en lui-même, mais je vois au passage qu’il y a un glitch de chevauchement du champ carte sur le menu responsive en left-to-right. Je vais faire un ticket. Je vais ticketter aussi le $font-line-height que je n’arrive toujours pas à déclarer avec succès dans _vars.scss.

Merci !

Agate Berriot a écrit :

Étonnant, le rendu semble différent chez toi. Sous chrome 105 ça rend ça chez moi (cf screenshot), justement j'avais fait gaffe que ça matche leur site. J'ai un rendu similaire sur Firefox 104. Tu utilise quel navigateur ?

C’est plus en amont que le problème se pose : c’est mon compilo sassc qui n’aime pas la valeur de l’alpha '10%' passée en dernier argument de la fonction rgba(). Il ne prend pas en compte cette valeur d’alpha et la couleur générée est du noir opaque 100%.
J’ai remplacé par 0.1 et ça passe nickel. Est-ce que tu peux en faire de même dans le patche stp ? Je ne vois cet usage de l’alpha exprimé en pourcents nulle part dans la doc sass.

Pour info j’ai

$ sassc --version
sassc: [NA]
libsass: 3.6.5+20211226
sass2scss: 1.1.1
sass: 3.5

On les voit ponctuellement par exemple sur https://www.mnhn.fr/en/our-research-themes

Ok, j’avais loupé ça, désolé.

J'ai vu plusieurs versions, celle que tu as partagée (fond cellule plus clair que le fond de page), celle ci (https://www.mnhn.fr/fr/l-enseignement-et-la-formation), ou même https://www.mnhn.fr/fr ou on voit les deux. Je suis un peu embétée parce que leurs pages de contenus un peu plus classiques, typiquement https://www.mnhn.fr/fr/faq-contacts ou https://www.mnhn.fr/fr/familles, sont en fond blanc.

Oui, ok, restons sur le plus classique.

Je viens de changer ça, ça devrait être mieux (j'ai pas mis à leur niveau, nos cellules sont plus esquichées ça déborde vraiment trop)

Ok.

Oui je l'ai vu aussi, ce n'est pas lié au thème MNHN a priori, je vais faire un ticket dédié.

D’ac, merci.

Je l'ai enlevée sur mobile (c'était beaucoup plus visible chez toi à cause de cette histoire de rendu d'ombrage qui diffère entre nos navigateurs)

Ok, en mettant la valeur du canal alpha en décimal plutôt qu’en pourcents sans doute que ça doit être mieux, à toi de voir si on laisse comme dans la première version ou la seconde version du patche, pas d’avis sur la question.

J'avais activé le mode light pour les formulaires, mais tu as raison, c'est trop peu visible. Je suis repassé sur le mode normal, qui est plus accessible (leurs formulaires du site institutionnel me semblent mauvais de ce point de vue). J'ai aussi assombri légèrement la couleur de fond des input pour que ça ressorte plus.

C’est top comme ça, merci.

J'ai intégré le footer en dur suggéré par Frédéric, je pense que je vais attendre le retour client pour intégrer un footer plus complexe, car je ne suis pas certaine de leur besoin en termes de contenus.

Oui ok je pense que c’est déjà très bien.

Assez d'accord aussi, je garde Montserrat.

D’ac.

J'utilise effectivement des espaces systématiquement, les tabs sont probablement des résidus de copier coller (j'ai harmonisé en espaces).

Ah oui ok c’est du copier-coller, j’avais pas capté. Merci pour l’harmonisation :)

––––

Modulo le tout petit ajustement sur le format de la valeur du canal alpha pour les appels à la fonction rgba dans le scss, c’est tout bon pour moi, ack.

Je valide, et je pousse en l’absence d’Agate tel qu’elle me l’a demandé hier.

commit 16fd0b6cffdab482a4cb4c3996e51229b4e684e3
Author: Agate Berriot <aberriot@entrouvert.com>
Date:   Tue Sep 6 11:43:42 2022 +0200

    mnhn: new theme (#68742)