3246 sujets

Critiques de vos sites: code et design

[Jock'R] Nouveau site, Nouveau concept...

Tout d'abord bonjour à tous et à toutes! Smiley biggrin

Je me présente, je m'appelle Nicolas et je suis nouveau sur le forum d'Alsacréation, malgré ça je connais depuis un moment ce site qui m'a déjà épaulé plusieurs fois .

C'est donc avec non sans appréhension que je me lance dans l'arène pour vous présenter mon premier vrai site internet qui supporte un concept que j'ai imaginé.

Mais quel est ce concept? Existe t'il déjà ? Je vous laisse répondre et juger ma performance technique, artistique et l'intérêt du site par vous même...

C'est par ici que sa se passe:

Jock'R (Troisième version! Evolution du design)


Merci d'avance... Smiley langue
Modifié par jockr (11 Apr 2009 - 02:59)
Bonjour

* Ton site a 23 erreurs (assez grave à mon goût) d'HTML, il faut les corriger (principalement l'utilisation multiple d'ID uniques)

* Tu définis les tailles de caractères en px, ce qui peux gêner les utilisateurs d'IE 6et 7 qui souhaiterais agrandir ces caractères. Préfère leur les em ou %.

* D'ailleurs ton design ne supporte aucun agrandissement des caractères (uniquement) et se retrouve déformé dans ce cas.

* Il te manque de nombreuses information dans ton <head> comme l'encodage des caractères, la langue de la page, une description de celle-ci... Pour ton référencement en particulier et pour les utilisateurs qui pourraient en avoir besoin en général, ajoute les vite !

* Ton accroche :
a écrit :
Contenu gRatuit de cRéation pour webmasteR

Est assez difficile à décoder, à cause de l'espacement autour des "R", du changement de couleur et du look "SMS".

* Les éléments cliquables ne sont pas assez bien différenciés des éléments non cliquable (et inversement), j'ai eu beaucoup de mal à savoir sur quoi je pouvais cliquer ou non (surtout le ou non en fait).

* J'ai également eu du mal à comprendre quel était le concept de ton site, "contenu gratuit de création" n'est pas des masses parlant. Dire que tu propose des templates ou gabarits de site et/ou menu serait plus efficace.

* les templates que tu propose ne sont pas non plus valide W3C, c'est domage, ça te discrédite un peu.

* Les liens de bas de page qui mène vers la page en cours ne sont pas non plus une bonne chose.

* Le drapeau français suivit de "Français" laisse présager une sélection de langue, mais avoir le choix entre le français et... le français... c'est peu.

* Attention à tes textes alternatifs : 
<img src="img/fr.gif" alt="fr"> <b>Français</b>

Ici l'image est clairement décorative, le alt devrait donc être vide. De plus "fr" prononcer par une synthèse vocale ça doit pas être "fun".
<img src="img/presentation.png" alt="123">

Cette image, par contre, n'est pas décorative, elle porte du contenu : Télécharger, Assembler, Personnaliser ; le alt devrait refléter ce contenu.

*Pour finir et non des moindre, utiliser des tableau de présentation dans des div, c'est... euh... WTH?
Tout d'abord je te remercie Laurie-Anne.

Concernant les erreurs trouvées par W3C j'étais au courant seulement je n'ai pas encore eu le temps de toutes les corriger... oui je suis faché avec les ID, j'ai toujours tendance à leur donner un même nom Smiley confused

Je vais suivre tes précieux conseilles pour avoir un code propre et conforme à tout point de vue.

Pour finir je vais repenser ma communication sur le site pour que les visiteurs puissent cibler plus facilement mon domaine d'activité et qu'il se sentent moins livré a eu même Smiley cligne
Laurie-Anne a écrit :

*Pour finir et non des moindre, utiliser des tableau de présentation dans des div, c'est... euh... WTH?


Une question, je ne suis pas sur de bien comprendre ta remarque ? Smiley sweatdrop

Merci...
Bonjour jockr,

Il me semble qu'elle fasse référence aux tableaux <table> présents dans les div servant à la disposition. (Ce qui n'est pas conseillé).

Sinon le design est assez beau et agréable.. Dommage qu'il ressemble beaucoup à Deezer.
Merci Garreck...

Je vais lire attentivement ce que tu m'as donné.

Concernant le design c'était ma volonté qu'il ressemble à celui de Deezer que je trouve très aux gouts du jour (moderne). Je vais cultiver ma différence, promis Smiley langue
Bonsoir à tous!

Je suis heureux de vous apprendre qu'une nouvelle version de mon site est en ligne!

J'ai écouté les conseils de Laurie-Anne et ceux que l'on à pu me donner ici et là...

Il est validé conforme aux normes HTML et CSS par le W3C! J'ai ainsi corrigé toutes mes erreurs, épuré le code encore un peu plus et puis j'ai modifié quelques détails d'accessibilité...

Je vous laisse constater Smiley lol Smiley biggrin
Salut jock, je vais détailler un peu plus que sur le sdz:

> Tu reprends pas mal de truc à Deezer, ça ne me dérange pas du tout mais tu auras remarqué que malgré un noir/gris dominant sur les deux sites, celui de Deezer est bien plus gai, il y a plus de couleur et de contraste, ça donne tout simplement plus envie. Essaie de trouver pourquoi et comment faire pour rendre ton design plus attrayant. Poses des questions si tu as des doutes.

> Le fond rouge autour du menu quand on le survole, c'est vraiment pas nécessaire. Ca n'apporte rien, et on se demande un peu qu'est ce que ça vient faire là.

> Ton accroche manque de visibilité(tout à droite!) et d'originalité, et ne ressort pas assez.

> C'est très bien de reprendre des éléments de Deezer, mais ta première ligne est complètement inutile:
"Site entièrement en Français" : on s'en fout et puis on l'avait remarqué Smiley cligne
"Accueil" : Lien inutile, à condition que tu fasse en sort que ton logo renvoie sur ta page d'accueil.
"Nous contacter" :à la limite pq pas mais met le plutot autre part.

> Tes titres (balise <title>) ne sont pas bons. Il faut qu'ils donnent des infos sur la page et il en faut des différents pour chaque page (indispensable pour le référencement par ailleurs)

> Le menu n'est pas du tout attirant. Regarde la différence principale entre ton menu et celui de Deezer, il y a un élément(qui est très important du point de vue ergonomie également) qui fait que le tiens est bien moins attirant que le leur.

> Un peu plus technique mais ta page n'est pas optimisé pour un affichage 1024*768 (trop d'espace à gauche et à droite); c'est de la place perdue pour rien Smiley cligne

> Pas sur que ce soit une bonne idée les reflets rouges du backgroud. Essaie plutot de le laisser gris et de mettre des couleurs dans le corps de la page. Par ailleurs ton rouge est trop terne.


Voilà je te souhaite bon courage Smiley cligne
Modifié par ThePatatoes (09 Apr 2009 - 21:05)
Bonsoir ThePatatoes,

Merci beaucoup pour toutes ces remarques très intéressant, je souhaite vraiment m'appliquer dans ce que je fais donc je vais essayer de traiter chaque points avec attention.

J'espère bientôt apporter une nouvelle version de mon site comportant toutes ces modifications Smiley smile
Bonjour à tous! Smiley biggrin

Il est 02h50 et me revoici avec la troisième version de mon site, fruit de plusieurs heures de travail à me creuser la tête pour trouver un bon équilibre graphique car mon design était vraiment terne et ne donnait pas trop envie comme la si bien souligné ThePatatoes.

Comme promis j'ai suivi ces conseils et je vous propose de découvrir le nouveau design dont je suis particulièrement content du résultat... j'espère qu'il vous plaira aussi Smiley langue

Note à ThePatatoes: Je dois retravailler le code donc je retravaillerai par la même occasion les "title" comme tu me l'a conseillé.
Salut,

eh bien esthétiquement je trouve ça plutôt réussi... mais comme ce n'est pas mon domaine je vais plutôt parler du reste. Smiley cligne

Tout d'abord il faudrait vraiment prendre le temps de relire les commentaires de Laurie-Anne car ils sont encore presque tous d'actualité !

J'ajouterais à cela que tes pages ne sont absolument pas structurées : lire à ce sujet http://openweb.eu.org/articles/respecter_semantique (il semble tout bonnement que tu n'utilises les balises qu'en fonction de leur rendu visuel et sans penser à ce qu'elles signifient).

Il y a également d'autres problèmes qui sont tout de suite visibles dès que l'on désactive les images et/ou les css... ou si l'on souhaite naviguer au clavier. En prenant ta page d'accueil pour exemple et en vrac :
* elle ne contient qu'un élément de titre (un H3 sur "Votre site internet en trois étapes") alors que j'aurais bien vu un H1 sur l'image du header (qui contient grâce au alt JockR) et des H2 sur Introduction, Concept, etc...
* lorsque l'on désactive les images certaines parties sont illisibles (penser à mettre une couleur de background) et surtout, comme le code css n'est pas des plus robustes ( Smiley langue ), les liens "télécharger" ne sont plus cliquables.
* en essayant de naviguer au clavier on ne voit pas du tout où on est (lire cette astuce) et on passe par des éléments (LI) vides ! En l'occurrence il aurait suffit de mettre une image en background de l'élément UL).
* ...

Au passage tes 2 nouveautés ne passent pas à la validation... et pour ce qui est des icônes de conformité ils sont esthétiques mais comme d'une part ils ne concernent que la page d'accueil et que d'autre part un code valide n'assure en rien qu'un site est accessible (cf. mes remarques précédentes) je ne suis pas sûr qu'ils soient utiles. Smiley lol

Ah oui ! 2 remarques pour finir :
* bgcolor est obsolète depuis bien longtemps (avantageusement remplacé par les css).
* toujours au niveau de la sémantique tu parles de proposer du "contenu" alors qu'il s'agit de gabarits.

Bonne continuation. Smiley smile
Bonjour Heyoan,

Merci pour toutes ces informations, j'ai déjà réglé deux points:

- Le menu a été modifié pour ne pas faire apparaitre de futur catégorie actuellement vide. J'ai aussi retravaillé un peu l'esthétique.

- Pour les icônes W3C de conformités je suis entièrement d'accord avec toi, j'avais juste rajouté cette petite information car le site est en cours de construction. J'ai donc précisé dans cette même information que le site est en cours de construction, une fois terminé tout cela disparaitra Smiley smile

Concernant tes autres remarques très intéressantes je vais les traiter avec attention, cependant dire que toutes les remarques de Laurie-Anne sont encore d'actualités je ne suis pas totalement d'accord, j'ai réglé toutes les erreurs de W3C, amélioré l'accessibilité, réduit le nombre de tableau, sa demande beaucoup de travail mais tout est en cours de finalisation.

Dernière chose, les bases et menus ne sont pas encore conforme W3C, c'est tout à fait normal je n'ai pas encore eu le temps de corriger Smiley smile

En tout cas merci pour tout et je reviens vite donner de mes nouvelles Smiley ravi
Sujet clos
Aller à