[Intermédiaire] Blog perso blog.nicolasgilis.be

Bonjour à tous,

Je viens soumettre mon site aux feux des critiques, ça fais pas mal de temps que je suis dessus j'ai donc perdu toute objectivité, donc n'hésitez pas que ce soit au niveau code, accessibilité et biensure design.

Je fais vite un tour du site pour vous situé le contexte, c'est un blog que j'ai codé à la main avec XHTML/CSS, du javascript avec jquery (la seul partie que je n'ai pas codé entièrement moi même) et PHP5/MySQL. Il est donc administrable via une interface d'administration, c'est bien sure ce côté qui m'a pris le plus de temps, et c'est celui qui se voit le moins.

Niveau design, je ne suis pas un illustrateur chevronner, j'ai donc essayer de faire un site plutôt typographique, avec comme police de base Gill-sans, malheureusement n'ayant pas la licence tout le monde ne pourra pas en profiter.

Merci d'avance !

J'oubliais : http://blog.nicolasgilis.be
Modifié par Gili (08 Aug 2011 - 13:03)

Salut,

Je passe vite fait mais manque de temps.

Juste une chose que j'ai vu avant de voir la page : accueil et non pas acceuil !

Arf ça c'est une faute que je fais tout le temps ! ^^

Merci de la remarque, mais n'hésite pas à m'en dire plus

Une autre faute : "Cathégories". Puis "Se blog" devrait être "Ce blog".

Tu devrais te procurer Antidote.
Modifié par Tony Monast (08 Aug 2011 - 14:48)

Merci beaucoup Tony je vais le télécharger de ce pas ^^

Cependant je sais que mon orthographe est déplorable, mais je ne sais toujours rien de mon design et du reste ^^

Donc n'hésitez pas à critiquer au tant le site que l’orthographe hien ^^

Ton formulaire de commentaire est très pauvre comparé à l'aspect très graphique et typographique de ton site.
De plus, est répété deux fois "Poster un commentaire", de deux manières différentes.

Sinon l'aspect visuel me plait beaucoup, et je serais intéressé de connaitre les fonctionnalités que tu t'es construites dans ton interface d'administration "maison".

Tu l'as fait en PHP Orienté Objet ?

Salut Mathy, merci pour ton commentaire/avis.

Pour ce qui est du formulaire de commentaire figure toi que j'avais réussi à coder la moitié d'un script qui envoyais le commentaire directement en ajax, mais je n'ai jamais réussi à parvenir a mes fins, et évidement, ça le rendait beaucoup plus sexy, néanmoins si tu as une idée ou un exemple pour lui donner un lifting graphique je suis tout à ton écoute.

Merci pour ton avis sur l'aspect visuel car c'est vraiment un point sur lequel j'aimerais avoir des avis autre que le mien ^^.

Sinon côté interface d’administration je peux poster/editer/supprimer des articles (enrichissement typographique compris et redimensionnement de l'image (seulement du jpeg) automatique pour le chapeau de l'article) pareil pour les catégories et les commentaires, et aussi pour les «meta» information du site type le nom, l'auteur, la langue etc...

Enfin tout n'est pas terminer de ce côté. Notamment au niveau de la sécurité, car je n'utilise même pas le sha1 pour la connexion je n'ai point réussi ! ^^

Sinon je ne sais pas ce que tu entends par orienté objet, mais j'utilise PDO, et mon blog s'appuie sur le modèle MVC, bref c'est du propre quoi ! ^^

J'ai juste quatre erreurs qui m'ennuie niveau html, surement due aux sessions, j'ai essayé plusieurs solutions mais rien n'y fais ^^

En tout cas merci de ton intérêt ^^

Pour le design de ton blog.
Tu as essayé de travailler la typo, c'est une bonne idée mais il te manques, a mon gout, quelques clés pour que ce soit réussi.
Pour travailler la typo, il faut aussi travailler l'espace qu'il y a autour, laisser respirer tes blocs de texte.
bien choisir le type de typo et son épaisseur par rapport à l'importance du texte (titre, titre rubrique, simple texte...).

Je ne suis pas fan du titre de ton blog collé à la première actualité. le petit message "cliquez pour revenir à l'accueil" est inutile.
Essaye aussi peut-être d'uniformiser le graphisme en général (séparation des bloc en pointillé puis en ligne continue, puis cadre...).
Les roll-over en JS sont un peu lent je trouve
Tu peux utiliser une grille pour t'aider (voir les tutos alsacréation et sur le net).
Et pour le rose, je ne suis pas sur que ce soit la bonne couleur, à voir.


Voila les remarques en général. ça n'engage que mon avis. Le mieux ça aurais aussi été de nous présenter la maquette et pas le site fini, sa t'aurais évité du travail surtout si tu refait le graphisme.

Salut Spout,

Tout d'abord merci pour ta critique, mais pourrais-tu être plus clair concernant les quelques idées pour que le travail soit réussi. Tu me parle de choix de typo, ici sa à été un choix murement réfléchi et je suis triste qu'il ne se reflète pas à travers mon travail.

J'avoue qu'il y a 4 font différentes, sa fait peut être un peu trop, mais je pense les avoir utilisés avec parcimonie, notamment helvetica qui ne sert qu'aux chiffres, et chunkfive utilisé pour l'élément décoratif du bas de la colonne de droite (d’ailleurs sur ça j'aurais aimé avoir des avis, sa ne fais pas un peu too much ?). Futura pour les titres et Gill sans pour le texte de labeur.

J'ai également effectué un travail de recherche, sur l'interlignage et l'interlettrage, mais il ne se ressent apparemment pas, que me conseils-tu a ce niveau?

Il me semble pourtant bien avoir hiérarchisé mon texte avec différentes nuances de gris, le plus contrasté pour l'information la plus importante.

Pour le titre collé au site, c'est plutôt une question de gout, pour ma part je n'ai jamais vu un site traité le titre de cette façon je trouve ça plutôt original ^^

Par rapport à l'uniformisation du graphisme encore une fois là j'avoue ne pas te suivre, je pensais avoir été cohérent tout au long du site, si tu sais me donner des exemples plus concret je suis grave preneur ^^

Sinon si les roll-over sont lent c'est de ton côté, car j'utilise uniquement du CSS3 pour ces effets (la classe )

Pour la grille j'en ai utilisé une lors de la création de ma maquette peut être cela ne se ressent pas et j'en suis bien triste d’ailleurs.

Sinon pour le rose encore une fois sa relève du subjectif, pour ma part je trouve que le trio noir, gris, mauve est d'une efficacité redoutante, je trouve que sa donne un côté oldschool tout en restant très classe, mais bon ça n’engage que moi.

Merci énormément de ton avis, je prend toutes tes remarques en considérations et je vais voire ce que je peux faire ^^

PS : ah et j'oubliais le «Cliquez ici pour revenir à l'accueil» à sa raison d'être, car vu que le site est fort basique (deux pages celle de tous les articles et celle d'un article) je me suis payé le luxe de ne pas avoir de navigation, donc le seul moyen de revenir à l'accueil est la bannière qui n'en n'est graphiquement pas une. Je trouvais donc que ce lien manquait d'affordance et de prédictibilité. J'ai donc combler ce manque en le traitant de cette façon, et je trouve que sa donne un certain côté graphique, mais bon je me gourre peut être totalement ^^
Modifié par Gili (09 Aug 2011 - 12:35)

Désolé pour le retard.

Déjà je voulais te dire que mes remarques porte sur des détails qui ne défigure pas ton site. Il reste tout a fait abordable visuellement. J'essaye juste de te donner mon avis pour que tu puisse creuser encore le graphisme si tu le souhaite.

- Pour la typo, je pense que c'est surtout le fait que la Futura est une "graisse" plutôt fine par rapport à la Gill Sans Bold(sur les titres il me semble) qui me dérange un peu. La Futura est très "baton" alors que la police de tes titres joue avec les épaisseurs(c'est bien de la Gill Sans ?). Il me semble qu'il a quelque chose a régler de ce coté là, si tu veux aller plus loin encore une fois.

- L'interlettrage j'y touche rarement. L'interlignage cependant je le cale sur une grille. Pour revenir sur la grille, je ne sais pas comment tu l'utilise mais moi elle me sert verticalement et horizontalement. Je positionne, par rapport a ma grille, les éléments important de ma maquette qui sont d'ailleur plus souvent le texte que le "décors".
Par exemple, l'alignement du titre de ton blog avec le bord gauche de ton site et non le texte de l'article me font penser que tu n'as pas travailler avec ta grille comme je le fait.

- Pour l'uniformisation du graphisme j'ai surtout un exemple qui me viens en tête: dans ta colone de droite tu sépare tes bloc avec une ligne pointillet. Dans le footer tu met une séparation entre le titre et le contenu de ton blog(et non entre tes bloc) en ligne continu cette fois. Pour la partie "se connecter" cette fois tu met un cadre autour de ton bloc.

- Pour les roll-over, il marche très bien chez moi, je trouve juste que 1sec pour un roll-over c'est un peu long. ça donne la fausse impression de pouvoir cliquer sur ton lien qu'au bout d'une seconde, ce qui est plutôt long.

- Pour les couleurs, je ne suis pas fan du rose parce qu'il est proche d'un magenta 100% ce qui donne un côté pas très "personnel" à cette couleur. Le noir/gris/blanc accentue cette effet.


Encore une fois mes réflexions n'engage que moi. Tu as peut être fait volontairement l'inverse de ce que je te dis et en aucun cas tu n'es obligé d’adhérer à ma réflexion. Et ne te rend pas "triste" pour autant

Merci pour tes précisions qui sont tout à fait pertinentes, les titres ne sont pas en bold, mais j'avoue que en taille 36 comparer à Futura sa parait plutôt gras, et maintenant que tu me le soulignes, presque disgracieux, comme quoi ^^

Pour le titre du blog oui c'est fait expret, en fait c'est le titre de l'article qui semble aligné sur une ligne invisible, il devrait être sur la même ligne que le paragraphe d'introduction de l'article, des fois on a tellement le nez dessus qu'on ne voit plus rien ^^.

Pour ton exemple concernant l'uniformisation du graphisme, c'est une remarque très judicieuse je n'y avais pas prêté attention. A vrais dire, je ne sais pas trop quoi en penser, si c'est un bien ou un mal, je me vois pas mettre exclusivement des pointillés ou exclusivement des lignes ou exclusivement un encadré, graphiquement je pense que sa ne serait pas très beau. Mais c'est vrais qu'il serait plus logique d'avoir une démarche cohérente tout un long du site, donc je vais franchement me pencher sur le sujet.

Pour le roll-over je suis d'accord, je me demande comment je me suis pas fait la réflexion plutôt.

Et enfin pour le rose, franchement ça relève du subjectif, mais si tu as une idée je suis preneur, j'avais essayé en orange mais bof ^^

En tout cas je te remercie d'avoir partagé ton avis qui a été très enrichissent pour moi ^^

(si d'autres passent dans les parages n'hésiter pas ^^)

Salut Gili,

Ce que l'on voit pour l'instant de ta "maquette" est très réussie et me plait beaucoup. Trois petits commentaires supplémentaires à ce qui a déjà été dit :
- tu as crée des images pour ton menu droite (ex: vos dernières reactions), j'aurais plutôt vu des textes verticaux en css. Comme ça tu pourras mettre "full css" sur ton blog et c'est de toute façon meilleure pour ton référencement.
Pour info :

-webkit-transform: rotate(90deg);	
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

- je trouve moi aussi ton formulaire, esthétiquement un peu léger, au minimum, j’alignerais la "text area" sur les autres champs avec une même largeur.

- en bas de page, j'écarterais "COMPUTER GRAPHIC DESIGNER" des bords , je trouve la transition avec le contenu de gauche en blanc pas génial. La bordure bottom en face du texte, je trouve que ca fait bizarre...

- Allez encore un dernier : ton scroll (haut de page) ne va pas jusqu'en haut de la page. Du coup, on ne voit pas ton (+) pour se connecter.

Byebye
Zed

Salut Zed,

Tout d'abord merci pour ta critique, pour ce qui est des titres en full css, j'avais essayé en fait mais ça c'était avéré fort laborieux pour pas grand chose en fin de compte, alors j'ai opté pour cette solution, et il me semble qu'utilisé comme ça, sa n'a pas d'impact sur le référencement il faudrait que je vérifie.

Par contre pour le form de commentaire, ouiii, tu viens de me le faire remarquer, car chez moi (sous mac avec FF5) il s'affiche correctement, mais effectivement je viens de l'ouvrir avec chrome et j'ai ce petit bug trop moche qui apparait, merci de me le faire remarquer ^^

Pour l'élément en bas du menu de droite effectivement la transition avec le contenu de gauche est pas top, je vais suivre ton conseil et essayer sans la border-bottom, mais du coup faudra enlever la border-left, enfin je vais voire le résultat ^^

Pour le haut de page je vais corriger ça ^^

Merci énormément d'avoir prix la peine de critiquer mon site ça fais super plaisir et c'est grave enrichissant ^^ merci merci ^^

Si quelqu'un d'autre passe par ici qu'il n'hésite pas

Bonjour,

Ton blog est sympa comme tout.

Juste 2 choses frappantes à mon sens :

Tu devrais utiliser un sprite pour le logo twitter, ça éviterait que l'oiseau disparaisse la première fois qu'on passe la souris dessus.

Le petit bandeau de login en haut, au dela du "kiff" du webdesigner au moment de le coder, est totalement useless. faire s'annimer tout une page aussi lourde juste pour 2 pauvres input et un texte, tu peux largement les mettre dans le bandeau de droite je pense .

Salut Ptitvincent (surment plus grand que moi),

Tout d'abord un gros gros merci d'avoir déterré mon topic, ca fais chaud au cœur ^^. Et félicitation pour ton portfolio catégorie illustration, c'est bien mon style.

Ensuite un deuxieme gros merci car pour l'instant je n'avais de critique que pour le design (et aussi l'orthographe malgré 95% de lorem ipsum mdr).

Pour le logo twitter, tu as totalement raison, d'ailleur voilà c'est fait ! ^^

Ensuite pour mon petit kiff (car oui c'est totalement ça), je n'avais pas vu les choses sous cet angle, j'avoue que ce n'est pas très judicieux, je pourrais peut être mettre le div en position absolute pour ne pas qu'il agisse sur le reste de la page... à voir !

Je vais peut être aussi laisser comme ça, car ce blog est avant tout un gros bac a sable, et ce div caché contiendra bientôt pliens pliens d'options super inutiles (genre changement de design, changement de couleur dans le design, …).

Mais merci pour ta remarque, ca m'évitera de faire la même erreur sur mes prochains site.

Merci beaucoup pour ton retour

Bien à toi

Si une des trois personnes que j'ai racolé par MP passe par là qu'il ne se gêne pas hien ^^

oui j'ai répondu à ton message normalement (sauf que je peux pas vérifier car je ne trouve pas sur ce site comment voir les mp qu'on a envoyé..)

Oui pour ton "bandeau" si tu compte y mettre d'autres éléments d'interface dans ce cas c'est tout à fait correct.

edit :

a écrit :
En
(re)Construction

héhé pas mal
Modifié par ptitvincent (16 Aug 2011 - 17:16)