Bonjour,

J’ai codé de A à Z un site dédié aux finances personnelles : www.lesfinances.fr

Au départ, j’utilisais Vim… Et puis je suis passé à Visual Studio, c’est quand même plus confortable.
Je n’ai pas indenté le code mais je l’ai bien espacé et il est relativement simple (je ne voulais pas faire quelque chose de compliqué).

Mon objectif est de faire un site visuellement attrayant et qui colle avec l’esprit de la thématique (je vise donc un rendu sérieux et pas trop de fantaisie).
Je souhaitais aussi qu’il soit « responsive » pour être consulté aussi bien sur un smartphone que sur un grand écran d’ordinateur. En pratique, le menu latéral bascule sous les articles sur mobile. Et le plus difficile a été de faire un menu qui s’adapte à l’appareil (il devient déroulant sur smartphone).

J’ai moi-même plusieurs remarques à l’égard de mon site :
- Je trouve la présentation générale un peu trop froide et datée. Je suis preneur de conseils et de suggestions pour mettre en valeur le contenu. Problème de couleur ? De police ? De proportion des éléments ?
- Au niveau du code, je n’ai pas de remarques particulières, mais vous allez peut-être voir des choses qui sont à améliorer.
D’un point de vue technique, j’utilise du html, du php et du CSS (pas de SQL ni rien d’autre). Les pages sont directement codées en html (j’utilise le PHP pour injecter le header et le footer). C’est du « très simple », comme je n’ai pas beaucoup de pages, c'est gérable.

Google Search Console m’indique un warning dont je ne sais pas trop comment me départir (c’est aussi pour cela que je présente mon site ici).

Le messages est : « Problème CLS : plus de 0,25 (ordinateur) »
Ce problème concerne presque toutes les pages et ne concerne que la navigation depuis un ordinateur (pas de message d’alerte pour la version smartphone).
Il va falloir que je me penche dessus. Si la solution a ce problème est évidente pour vous, je suis tout ouïe.

Note : le site est sans cookie (je ne mesure pas l'audience), il y a juste le cookie technique de l'hébergeur.

N’hésitez pas à critiquer le site ! Je suis demandeur de critiques constructives.

Au passage, j’en profite pour féliciter les développeurs du forum et sa communauté, le site est une belle mine d'informations utiles.

Au plaisir de vous lire,

Ludovic
Modifié par luchac (14 Jan 2021 - 17:28)
Modérateur
Bonjour,

Ça a l'air pas mal, tant au niveau contenu qu'en terme de réalisation.

Quelques remarques :

1) Dans ton menu, tu ne devrais pas mettre les <a> autour des <li> mais plutôt à l'intérieur des <li> (<a> ne doit pas être une balise directement enfant de <ul>),

2) Des images n'ont pas d'attributs "alt" (il faudrait qu'elles en aient),

3) Dans ton css, tu utilises des "//". J'imagine que c'est pour commenter la ligne. En fait, ça ne commente pas la ligne, ça provoque une erreur qui conduit à ignorer la ligne ainsi que les suivantes situées dans le même bloc. Du coup, ça marche à peu près, mais c'est un coup de bol. Les commentaires dans le css, c'est entre /* et */ uniquement

4) Vitesse de chargement : bien

5) Look
Ça peut valoir le coup de consulter un graphiste pro, vu la bonne qualité du reste. C'est un métier, et tu es visiblement plus codeur que graphiste.

Tes font-family, c'est parfois Arial, Helvetica, parfois Helvetica, Arial. Il vaudrait mieux selon moi que ce soit toujours dans le même ordre. D'une manière générale, il ne faut pas trop multiplier les polices/tailles de police/style des caractères. Ça fatigue, et ça donne une impression de site mal fini.

Tu pourrais te passer des polices serif ici.

Eventuellement, tu peux aller sur https://fonts.google.com/ et choisir une police de base pour ton site qui ne soit pas Arial ou Helvetica.

Tu peux éventuellement chercher à utiliser des couleurs qui "vont ensemble" (visiblement, tes couleurs sont choisies sans aucune méthode). Par exemple, en allant à https://htmlcolorcodes.com/fr/selecteur-de-couleur/ (tu prends par exemple le bleu de ton bandeau du haut, ou toute autre couleur, et tu dérives en nuances, tonalités, couleurs analogues, etc.)

Tes photos sont austères, elles pourraient l'être moins.

Tu peux faire des fonds d'éléments qui ne soient pas rectangulaires. Quelques obliques (mais sans excès) peuvent "moderniser" l'ensemble.

La ligne juste en dessous du bandeau du haut (qui commence par Accueil > ...) me semble utiliser des caractères trop petits.

Tu peux essayer de suivre quelques tutoriels de graphisme web (je n'ai rien de particulier à te conseiller, il y en a des tonnes).

Tu peux consulter les sites qui parlent des tendances dans le web design. Ça peut te donner des idées.

Ceci étant, à ta place, je resterais globalement sobre. Le sujet s'y prête bien. Il est austère lui aussi.

6) Je ne vois pas ce qu'il faudrait faire pour le « Problème CLS : plus de 0,25 (ordinateur) » (mais bon, je n'ai pas cherché aussi Smiley cligne ).

Amicalement,
Meilleure solution
Parsimonhi,

Merci pour ce retour complet !

Les points faibles concernent donc essentiellement le design (polices, couleurs, etc.).
Je vais tâcher de progresser sur ce point (le site était "encore" moins beau avant).

Pour les couleurs, j'utilisais paletton.com mais en cours de développement, je n'ai pas bien noté les codes des couleurs, j'ai fait des modifications, et ça part un peu dans tous les sens maintenant...