Discussion :

[skysor]

Bonjour à tous

Cela fais maintenant plusieurs mois que je développe mon site web basé sur le domaine de l'informatique, le but n'est pas du tout de concurrencer les grands sites du domaine (commentçamarche, ...) mais j'aimerais beaucoup avoir une petite communautés et des visiteurs

Voici les principales fonctionnalités de mon site:
-Des articles (astuces, news) pertinents, faciles et intuitifs.
-Un forum pour aider ceux qui en ont besoin.
-Une boîte à outils comprenant (pour le moment) un analyseur de texte (chercher/remplacer, compteurs), un outil de tirage au sort, une liste et un testeur d'expressions régulière (RegEx).
-Un espace membre (modifier les infos, l'avatar, voir l'activité, possibilité de créer et envoyer ses propres articles).

le lien de mon site:https://www.pcdistrict.fr
J'essaie de faire en sorte que mon site se démarque par son look (sobre, simple, moderne et très intuitif). Ce serait cool de recevoir vos critiques (positives ou négatives) et vos conseils pour améliorer mon site !
Merci d'avance pour votre aide

[Invité]

Bonjour,

A- Quelques remarques (sur le design) :

1/ le site est très sombre !
Il vaudrait mieux utiliser pour le fond du blanc ou un gris clair/moyen, neutre.

2/ la mise en page / design... pas moderne. à revoir

3/ quant on définit width et height pour une image, il faut que les dimensions réelles des images soient en proportion

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.articles_box_header img {
    height: 3.5em;
    width: 4.5em;
	.....
}
.home_present_main_box img {
    height: 20em;
    width: 25em;
	.....
}

Là, tes images sont toutes déformées (de pas grand chose, mais ça se voit)

4/ choix des couleurs :

• la couleur rouge pour les textes, généralement, est utilisée pour des "warning/erreurs".
• les liens en orange... (d'où sort ce orange ?)

5/ typo :

• écriture trop petite (sur grand écran) = fatigant à lire
• police de caractères ?

...et je n'ai regardé que la page d'accueil...

B- Sinon, "techniquement" (programmation, propreté du code), ça à l'air correct / propre.
Néanmoins, l'indentation (cf. source générée) laisse (un peu) à désirer.


CONSEILS :

• REGARDE d'autres sites existants (modernes)
• CHERCHE des thèmes (Wordpress,...) réalisés par des pro
• NOTE ce qui te plait (design, mise en page, typo,...), regarde les code source (CSS,...)
• Fais MIEUX qu'eux

L'utilisation d'un framework (HTML, CSS, JS) comme Bootstrap pourrait te simplifier grandement la mise en page et le design.

[skysor]

Merci pour ta réponse rapide

Je prends bien en compte tes remarques, et je vais tenter d'y répondre:

1/C'est vrai qu'il est sombre, mais c'est justement le but, de faire un site différent des autres et sobre (de plus je trouve le sombre bien plus agréable pour les yeux qu'un fond clair)

2/Je pense qu'il s'agit d'un question de goût, mais je ne voit pas trop pourquoi ce n'est pas "moderne" ? ce qui est justement une des priorités du site

3/J'ai connaissance de ces disproportions, mais merci je les avaient presque oubliés et je pense que je vais faire les ajustement nécéssaires

4/Les couleurs du thème de mon site sont principalement les suivantes: gris foncé(background), blanc doux(texte normal), du rouge (normalement pas pour le texte), du orange (pour les liens et titres, ou mots importants). Le choix de mettre les liens en orange est un choix que j'ai fais, et je trouve ça bien !

5/Ah, j'ai choisi une taille pas trop grande (avant tout était trop grand, je viens de modifier) mais je pense que tu as un écran 4K ? Car sur mon écran 1920*1080 je trouve que ça va, mais je vais encore regarder ça ! En tout cas ce n'est pas plus petit que developpez.net La police de caractère pour les titre est "Novecentosanswide" et pour le texte "OpenSans"

Je vous conseille de regarder les autres pages également, la page d'accueil est encore assez récente, mais merci pour votre aide

[Invité]

OK.

• Ne confond pas "sobre" et "sombre". Là, il est TRES sombre. Trop.
• Ce n'est pas une mise en page "moderne", car trop "amateur". Tout le monde ne peut pas se prétendre graphiste : C'est un métier.
• Mon écran a la même résolution que le tien
• voilà de quoi se faire une palette de couleur : color-wheel
  
• Taille de typo : body { font-size:100%; }.
• Typos : on peut trouver des typos originales sur Google fonts ou dafonts (par exemple)

B- Je reprends la partie technique :

1/ Titres, sous-titres...
Il faut utiliser correctement les balises de titre <h1>,...<h6>, non seulement pour une bonne hiérarchisation des textes, mais aussi un bon référencement.

2/ Balise(s) obsolète(s) ! On utilise le CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<font color="#00ffff">Pour les possesseurs de ...’une marque différente:</font>

3/ Balises HTML5

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="articles_view_header">...

Il existe des balises HTML5 spécialisées : <article>, <aside>,.... à utiliser.
Voir :

• HTML5 : le guide du débutant
• Initiation à HTML5

Pour les articles, par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<article>
  <header>
     <h1>Titre de l'article</h1>
  </header>
  <div>
     <p>contenu de l'article</p>
  </div>
  <footer>
     ...
  </footer>
  <aside>
     liens sociaux,...
  </aside>
</article>

Mais tout ça, ce n'est que mon avis...

[skysor]

1/ Effectivement j'ai remarqué avoir mis quasiment que des <h2> plutôt que des <h1>, car certains titres ne me paraissaient pas assez importants pour être balisés en <h1>

2/ J'en ai connaissance, mais malheureusement je ne peux pas y faire grand chose pour le moment, car les <font> proviennent de la fonction execCommand() en JavaScript, qui m'a permis de créer mon propre éditeur WYSIWYG afin de mettre en forme un article et l'envoyer dans l'espace membre. Une solution serait de remplacer (en PHP ?) toutes les occurrences de <font ...> en <div ...> avec preg_replace_all() ?

3/ C'est vrai mais je préfère pouvoir avoir des noms en sorte d'arbre (ex: article_header -> article_header_infos -> article_header_infos_1 etc...) Mais j'utilise correctement les balises <header> et <footer> et <section> par exemple

[Invité]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(ex: article_header -> article_header_infos -> article_header_infos_1 etc...)

Rien ne t'empêche de les mettre en class, mais sur les balises HTML5 appropriées !

[skysor]

Je viens de modifier un petit peu le design du site (j'ai surtout éclairci le tout) car c'est vrai que c'était trop sombre ! (je viens de le remarquer car mon écran était mal réglé et affichait tout en plus clair..)
J'ai aussi un petit peu modifier l'accueil, c'est mieux ?

[Invité]

Bonjour,

Concernant la sombritude, je ne vois pas de différence.
Cela dit, tu n'es pas loin du design de codepen

Concernant la taille de typo, je te conseille de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

body { font-size:1em; } /* taille standard ! */

et supprime le background-image, qui n'apporte rien.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
    background-color: #999;
    color:#111;
    font-family: "text_light";
    font-size: 1em;
    margin: 0;
/* le reste : à supprimer : */
    /*background-attachment: fixed;*/
    /*background-clip: border-box, border-box;*/
 
    /*background-image: url("../resources/pictures/background.png"), none;*/
    /*background-origin: padding-box, padding-box;*/
    /*background-position: 0 0%, 0 0;*/
    /*background-repeat: repeat, repeat;*/
    /*background-size: auto auto, auto auto;*/
}
 
#home_present_main h1 {
    color: #fff;
    font-family: "title";
    font-size: 1.5em;
    margin: 2em 0;
    text-align: center;
}

et d'adapter les autres typos.
Ca évitera de mettre les p en 1.2em;

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.home_present_main_box p { font-size:1em; }

pour les boites en haut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.articles_box { font-size: 0.8em; }

ASTUCE: Pour nuancer les gris (fonds,...) de façon plus harmonieuse, utilise Color Wheel :

• Règle de couleur : "Nuances"
• couleur centrale : HEX #444444

[skysor]

Enfaite j'ai changé les fonds en rgba(30,30,30,0.6) en rgba(40,40,40,0.6) mais il faut comparer avant / après pour mieux voir la différence ^^
J'avais mis le body en font-size 0.8em pour que tout devienne plus petit, c'est vrai que c'est pas très propre, et je vais refaire tout ca bientot !

Ensuite:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/* le reste : à supprimer : */
    /*background-attachment: fixed;*/
    /*background-clip: border-box, border-box;*/
 
    /*background-image: url("../resources/pictures/background.png"), none;*/
    /*background-origin: padding-box, padding-box;*/
    /*background-position: 0 0%, 0 0;*/
    /*background-repeat: repeat, repeat;*/
    /*background-size: auto auto, auto auto;*/
}

Je pense que c'est ton navigateur qui a rajouté toutes ces lignes à part image attachment et repeat que j'ai bien dans mes sources, mais pourquoi faut-il que j'enlève l'image de background ? Elle n'est pas bien ? https://www.pcdistrict.fr/view/resou...background.png

Merci pour l'astuces pour les couleurs, je vais voir ca

[Invité]

1/ rgba(30,30,30,0.6) en rgba(40,40,40,0.6)...
Tu parles d'une différence !

Pour info : 0.6 est l'opacité. Quel interêt ici ? ([EDIT] ah ok, cf ci-dessous, avec le background-image...)

2/ background : je ne l'avais même pas remarqué... ([EDIT] on le remarque à peine !)

tu peux certainement trouver des textures qui font 50x50 px maxi pour quelques octets (en repeat),
ou juste découper un motif dans ton image (qui fait 1200x1200 px !).

[skysor]

Effectivement, elle fait 1200 * 1200 px, mais elle ne pèse que 32.9 ko, je pense que ce n'est pas grave alors non ?

pour l'opacité: j'en met pour avoir un effet de transparence dans de fond, je trouve ça bien mieux que ci c'est mate !

C'est bizarre que tu remarque a peine le background, ton écran est-il mal réglé ? (pas assez de luminosité ?) car sur mes 2 écrans et mon téléphone on le voit bien

[skysor]

Je viens de mettre en ligne la nouvelle version avec surtout des changements au niveau esthétique :

-Les images ne sont plus cassées, elles gardent les bonnes proportions

-Modifications de la page d'accueil pour la rendre plus agréable

-Changement de quelques couleurs du site (notamment la suppression presque totale du rouge)

-Et le meilleur pour la fin: La possibilité de changer l'arrière-plan du site selon (pour l'instant) 6 arrières-plan que j'ai choisi (des paysages). Il suffit de cliquer sur l'image désirée dans le petit rond en bas à gauche du site

Qu'en pensez-vous ? Aimez-vous la possibilité de changer l'arrière-plan du site selon vos goûts ? Vous pouvez encore me donner vos conseils et vos propositions d'amélioration

PS: Bien entendu, je n'ai pas corrigé les autres petits problèmes dont vous m'avez cité, je me suis surtout concentré sur l'aspect graphique (pour l'instant) !

[Softcadbury]

Hello, c'est plutôt sympathique, tu as déjà pas mal de contenu.

Après tu t'engages dans un domaine très concurrentiel, tu aurais peut-être plus d'intérêt à faire juste un blog d'astuces et éviter l'aspect communautaire car ça risque d'être compliqué de motiver des gens.

Petit point design, je ne suis pas fan de l'image en background, ce n'est plus trop à la mode il me semble.

[skysor]

Merci
Je ne compte pas concurrencer pour l'instant, juste avoir un petit plus de visiteurs ..
Laquelle des 6 images de background proposées te semblerais plus appropriée par défaut ? (on peut changer l'image de fond avec le petit rond en bas a gauche)

[Invité]

Bonjour,

c'est déjà mieux

Quant au fond d'écran, c'est gadget.
Le 1er (paysage orange) est bien adapté (textes orange).
Pas le dernier.

En proposer 3 (ou 4) est suffisant.
Le + serait d'adapter la couleur de texte : paysage -> texte bleu,...
Mais je répète : c'est gadget.

[skysor]

Merci pour ton retour,
Effectivement c'est gadget: j'ai instauré cette fonction car j'ai reçu quelques critiques négatiques à propos du background, et il est vrai que c'est bien plus agréable maintenant, et qu'on peut adapter le background selon nos goûts.
Pour la couleur ce serait pas mal, mais je ne compte pas faire ça pour l'instant (bien d'autres choses plus importantes

[abdelouafiboukhris1]

votre site possède un bon contenu, il est simple et facile pour la navigation. Mais attention il est très lent vis-à-vis aux yeux de google, sa note est 53/100. il faut donc remplacer javascript par d'autres langage moins lourd.

[ABCIWEB]

il faut donc remplacer javascript par d'autres langage moins lourd.

Non c'est pas ça le soucis principal (commencer par l'optimisation des images), il faut lire le rapport et savoir l'interpréter avant de donner des conclusions trop hâtives.

Enfin bon ça m'a donné l'occasion de voir ce site.

@skysor je rejoins l'avis de jreaux62, notamment sur le choix d'écrire en blanc sur fond noir qui est une véritable catastrophe pour le confort de la lecture. C'était à la mode vers les débuts du web mais plus personne ne fait cela depuis au moins une bonne quinzaine d'années, ou alors pour certains titres, ou sur quelques lignes mais pas pour la présentation d'un article entier. Peut-être tu te fait plaisir en croyant avoir un site original, mais en même temps tu ne pourrais pas mieux faire si tu voulais te saboter car avant d'avoir un site original il faut d'abord avoir un site lisible.

Il ne suffit pas de faire des essais personnels, il faut penser "diversité" car ton expérience personnelle sera loin d'être partagée à l'identique par l'ensemble des visiteurs. D'une part la plupart des utilisateurs professionnels ou simplement avertis on pris soin de baisser la luminosité et le contraste de leur écran (par défaut livré à 100%) pour éviter de se cramer les yeux et aussi simplement pour avoir des couleurs plus fidèles, ce qui n'est pas favorable à ce type de mise en page qui nécessite un fort contraste.
D'autre part, selon le type de dalle utilisée, mate, semi mate ou brillante, la visibilité est également différente, sans oublier l'orientation des écrans par rapport à la lumière du jour qui joue également une grande importance et ce sera encore différent en nocturne. Ce qui fait qu'en gros le type de présentation que tu propose ne sera lisible correctement (ce qui ne veux pas dire confortablement) que dans des cas particuliers finalement minoritaires. Ce n'est pas par hasard si tu ne vois plus que très peu de sites de ce type, un professionnel de la communication s'étranglerait si tu lui proposait ça

Déjà en laissant un peu de relief sur certains blocs on peut être qualifié de rétrograde puisque le flat design est devenu la norme actuelle pour ne pas provoquer de fatigue visuelle chez certains visiteurs sensibles, mais bon on peut se dire qu'avec de légers reliefs (comme dans ce forum) ça peut passer. Mais là avec des caractères blancs sur fond noir pour présenter des articles (ce serait quelques blocs de texte ça pourrait aller), tu es passé dans une autre dimension

[skysor]

Merci encore pour vos avis,
cependant cela fais plusieurs mois que j'ai abandonné cette version, bien conscient qu'elle présente de gros défauts visuels et je suis donc entrain de refaire tout l'aspect visuel avec beaucoup plus de javascript et un design aux normes actuelles (fond blanc), je dirais que j'en suis à la moitié mais je n'ai pas trop trop de temps à cause des études ...

Voici un petit aperçu de la page d'accueil (pour le moment):




La page Articles: (tous les chargements se font en ajax et donc sans rechargement de la page pour chaque catégorie / filtre)



Et le menu du compte dans une fenêtre dynamique Javascript (dans cette fenetre se fait egalement la connexion et l'inscription, le tout en ajax)



Donnez moi déjà vos avis sur le côté visuel, sachant que rien n'est encore fini
Je précise que la couleur principale (par exemple ici le bleu) est modifiable entre plusieurs couleurs (rouge, vert, orange, rouge, violet, etc)

Je reviendrais vers vous lorsque la nouvelle version sera en ligne pour de nouveaux avis
PS: Bonnes fêtes et Joyeux Noël !

[ABCIWEB]

Beaucoup mieux, on respire ! Je trouve le design réussi.

Après les goûts peuvent varier mais au moins cette fois-ci je ne vois rien de rédhibitoire qui à priori pourrait faire fuir une bonne partie des visiteurs