Avis sur site

Bonjour,

avis pour un nouveau site que j'ai mis en ligne depuis peu. Je souhaite recueillir des conseils sur les couleurs de fond par rapport au sujet traité, et aussi par rapport à l'aspect graphique de la présentation. J'ai tenté toutes les couleurs, entre le background noir avec polices en blanc, celui tout blanc qui est en place en ce moment et enfin celui de la version mobile. Je suis incapable d'en faire une évaluation, je n'ai plus le recul nécessaire. Je veux un site aéré, raison pour laquelle je n'ai pas chargé avec des bandeaux et autres blocs.

Et bien sûr le site va encore évoluer en contenu.

https://ecrisdroit.fr

Merci pour les conseils.

Bonjour,

1) fond blanc pour le contenu, éventuellement une couleur très claire pour l'extérieur du contenu (mais selon moi, y a pas besoin ici, blanc pour l'extérieur, ça va aussi).
2) pas besoin de plusieurs boutons pour revenir en haut de page. Ceux qui naviguent au clavier te remercient d'avance.
3) et justement, dès qu'on navigue au clavier, on ne sait pas où on est. On ne supprime pas les contours "bleus" certes hideux des navigateurs tant qu'on ne les a pas remplacés par autre chose.
4) twitter n'existe plus.
5) pour le titre et le sous-titre, voir la balise html <hgroup> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/hgroup

<hgroup>
<h1>Titre</h1>
<p>Sous-titre</p>
</hgroup>

<h2> n'est pas approprié comme sous-titre ou slogan associé au <h1>.
6) le menu se met dans une balise <nav>
7) le menu aurait pu être plus sexy
8) il y a des <div> inutiles qui trainent (toute <div> ou presque est inutile de toute façon). Mais bon, tu n'es pas le seul sur Terre à saupoudrer ton code html de <div> inutiles.
9) <div class="wrapper"> : ça commence super mal ! Mais pourquoi cette balise ???
10) <div class="main"> : nan mais sérieusement !!! On est en 2024, ça fait 10 ans qu'on peut (et doit) utiliser <main> plutôt que <div class="main">.
11) <div class="aside"> : il y aussi une balise <aside>. <div class="aside"> est à proscrire.
12) le footer est désordonné, peu sexy, entouré d'une <div> inutile, et contenant des <div> inutiles. À revoir.
13) lettres bleues sur fond gris foncé dans le footer : vraiment non ! Et les couleurs flashy des boutons du formulaire : pas mieux !
Fond foncé, lettres claires voire blanches, c'est "sans risque" pour un footer.
14) quand on réduit la largeur de la fenêtre (vers 600 px par exemple), le titre et le sous-titre se chevauchent.
15) On finit sur deux notes positives :
- ton site résiste relativement bien au zoom.
- t'es dans le vert si on fait un audit avec Lighthouse (avec Chrome, clic droit + inspecter + onglet lighthouse) : c'est bien !

Amicalement,
Modifié par parsimonhi (13 Jan 2024 - 00:16)

bonjour
le menu déborde a gauche avant de venir se mettre en place au survol du bouton.
il vaudrait mieux qu'il sorte de la fenetre avant de se déplacer.


le halo rose sur fond gris du titre c'est bof.

le texte déborde sur l'image du renard


la page d'accueil fait ancien site des années 90.

pour le contenu tu a tout a fait raison
Modifié par drphilgood (13 Jan 2024 - 10:40)

@parsimonhi

Bonjour,
en effet beaucoup de détail à revoir.
Ok pour le hdgroup, c'est fait, je ne connaissais pas. Mais si le sous-titre doit se mettre en p plutôt qu'en h2, comment le centrer sur un p ? Je vais devoir le mettre dans une class ? Sur l'exemple de Mozilla, tout leur texte est collé à gauche, y compris le titre. Et je croyais que l'on ne devais pas styliser les balises hn.
J'ai déjà enlevé des div inutiles sur le main, aside et surtout dans le footer que je refais totalement. Je l'avais copié quelque part et il était en effet confus et pas adapté à mon projet.

a écrit :
et justement, dès qu'on navigue au clavier, on ne sait pas où on est. On ne supprime pas les contours "bleus" certes hideux des navigateurs tant qu'on ne les a pas remplacés par autre chose.

Je ne sais pas de quels contenus bleus du parles.

a écrit :
On est en 2024, ça fait 10 ans qu'on peut (et doit) utiliser <main> plutôt que <div class="main">.

Désolé, ça fait pas 10 ans que je développe des sites, seulement 5 ou 6 ans, et en amateur. Donc, je gagne 4 ans. Mais tu as raison, en plus je le savais, mais les habitudes.
Par quoi remplacer le wrapper ? Il faut bien un contenant général pour le grid. J'utilise alors le body, comme sur l'exemple de Alsacreations sur Grid ?
Pour la double flèche de retour haut, c'est fait aussi. Comme je suis gaucher sur la souris, mon pointeur est plutôt toujours à gauche de ma page et j'avais ajouté un bouton.

@drphilgood
Je m'occupe de tes remarques. Je suis étonné pour le menu, je l'ai pourtant déplacé loin en dehors de la page afin qu'il disparaisse.
Oui, le halo du titre, à revoir, mais il faut que je trouve quelque chose.
Pour le débordement sur l'image du renard, je vais voir ça, une margin devrait régler l'affaire.
Merci pour vos retours.

Bonjour,

Bongota a écrit :
Ok pour le hdgroup, c'est fait, je ne connaissais pas. Mais si le sous-titre doit se mettre en p plutôt qu'en h2, comment le centrer sur un p ?

C'est hgroup et non pas hdgroup. Et pour centrer le contenu du p, bah :

hgroup p {text-align: center;}

Tu peux aussi centrer l'ensemble de ce que contient le hgroup au lieu de centrer seulement le contenu du p. C'est peut-être plus indiqué ici.

Bongota a écrit :
Et je croyais que l'on ne devais pas styliser les balises hn.

Fichtre !

Bongota a écrit :
Je ne sais pas de quels contenus bleus du parles.

"Contours" et non pas "Contenus". Tu les as supprimés dans ton css via :

:focus, :active {
  outline: 0;
  border: 0;
}

Pour les voir, fais une série de tabulations sur la page du forum d'alsacreations pour donner le focus aux différents éléments de la page qui peuvent le prendre. Tu verras que les liens ont ce contour (qui n'est pas bleu dans le cas du forum, mais vert parce qu'il a été modifié via le css). Il est à noter que pour changer la couleur du contour, mieux vaut utiliser :focus-visible que :focus. Par exemple :

:focus-visible {
  outline: 1px dashed #000;
}

À adapter selon les éléments qui prennent le focus ! Au lieu d'un contour, on peut aussi simplement changer la couleur du fond de l'élément (on le fait par exemple souvent pour les boutons).

Bongota a écrit :
Désolé, ça fait pas 10 ans que je développe des sites, seulement 5 ou 6 ans, et en amateur.

Raison de plus ! Tu ne devrais pas avoir été intoxiqué par les habitudes d'avant html5.

Bongota a écrit :
Par quoi remplacer le wrapper ? Il faut bien un contenant général pour le grid. J'utilise alors le body, comme sur l'exemple de Alsacreations sur Grid ?

Tu as la réponse à ta question ! Bien sûr, le body ! Tu ne voudrais quand même pas faire autre chose que ce que conseille Raphael qui est une référence en la matière ?

Amicalement,

Bonjour,

Pour une raison que j'ignore pour l'instant (mais je finirai bien par trouver), le caractère pour représenter le "hamburger" devant "Menu" (le trigramme représentant le paradis ayant pour code &#9776;) ne s'affiche pas avec Chrome sous Mac OS. Ce n'est pas dû à une maladresse de ta part. Ça a l'air d'être partout pareil.

EDIt: bon, j'ai fini par trouver. C'est dû à une police asiatique installée sur mon ordinateur qui était choisie par Chrome pour afficher ce caractère et qui affichait un blanc à la place.

Amicalement,
Modifié par parsimonhi (13 Jan 2024 - 14:40)

Ça fonctionne alors, ce signe &#9776; pour le menu ? Même s'il existe des solutions plus universelles.
J'avance, mais c'est un peu fastidieux, il y a cinq pages html à revoir. Aucun changement n'est en ligne pour le moment.
Depuis que j'ai mis <div class="aside"> en <aside>, impossible de faire apparaître la bordure bleue verticale qui sépare du main.

aside {
  grid-column: col-start 1 / 1;
  grid-row: 4;
  width:80%;
  border-right:solid blue 1px;
  margin-top:2em;
  margin-left:.8em;
  padding:8px;}