3246 sujets
Critiques de vos sites: code et design
1. Bonjour aussi...
2. Merci de bien vouloir éditer ton sujet pour afficher le nom de ton site dans le titre du sujet, comme cela est demandé dans le message d'annonce de ce forum : "A lire avant de poster : Ergonomie, Design et demandes de critiques", sinon 99% des sujets de ce salon auraient le même titre évasif
3. Nous fournir un peu plus d'explications quand à l'intérêt de ton sujet, je suppose que c'est pour critiquer le site indiqué dans ton profil ? Le préciser ou mettre un lien dans le sujet serait peut-être un peu plus parlant ne crois-tu pas ?
4. Ton site ne s'ouvre pas !
2. Merci de bien vouloir éditer ton sujet pour afficher le nom de ton site dans le titre du sujet, comme cela est demandé dans le message d'annonce de ce forum : "A lire avant de poster : Ergonomie, Design et demandes de critiques", sinon 99% des sujets de ce salon auraient le même titre évasif
3. Nous fournir un peu plus d'explications quand à l'intérêt de ton sujet, je suppose que c'est pour critiquer le site indiqué dans ton profil ? Le préciser ou mettre un lien dans le sujet serait peut-être un peu plus parlant ne crois-tu pas ?
4. Ton site ne s'ouvre pas !
Bon alors je reformule, j'utilise Firefox, ça ne marche pas. Et j'avoue qu'en tant qu'internaute super chieur, je risque d'être un ex-visiteur de ton site, car il n'est pas question d'ouvrir un autre navigateur pour le bon plaisir d'un site qui refuse de marcher sur le navigateur que j'ai choisi.
Bon et pourtant j'ai été gentil, là maintenant à titre exceptionnel, j'ai ouvert IE8.
Mais l'agression auditive qui s'est substituée à l'agréable musique que j'étais en train d'écouter m'a fait fermer le site sans réfléchir plus avant. En gros c'est noir et y a une image moche qui bouge en haut, pas vu plus. Si tu mets du son sur ton site, veille à ce que le volume ne soit pas excessif, et SURTOUT, qu'il y ait une interface pour stopper ce son !! Idéalement ne pas en mettre, c'est encore mieux, quand ce n'est pas justifié comme ça pourrait l'être sur le site d'un groupe musical par exemple.
Bon et pourtant j'ai été gentil, là maintenant à titre exceptionnel, j'ai ouvert IE8.
Mais l'agression auditive qui s'est substituée à l'agréable musique que j'étais en train d'écouter m'a fait fermer le site sans réfléchir plus avant. En gros c'est noir et y a une image moche qui bouge en haut, pas vu plus. Si tu mets du son sur ton site, veille à ce que le volume ne soit pas excessif, et SURTOUT, qu'il y ait une interface pour stopper ce son !! Idéalement ne pas en mettre, c'est encore mieux, quand ce n'est pas justifié comme ça pourrait l'être sur le site d'un groupe musical par exemple.
Salut
Beaucoup de fichiers séparer : tant .css que .js.
AC_RunActiveContent.js n'est certe pas obligatoire. Tu développe sous Adobe ?.
Une simple balise « object » avec la propriété « data » suffit et passe très bien au validateur et en plus s'affiche dans tous les navigateurs connus. Ce qui devrais optimisé le code.
Tu pourrais optimiser davantage et moins te soucier à savoir si tes visiteurs ont la dernière version du Lecteur.
Quoiqu'il en soit sous IE8 c'est ok - mais pas avec FF4B ni avec Opéra 10.62.
Je ne tiens pas à en dire davantage car pour un (pro) : moi je trouve moche.
Un site dans son ensemble c'est d'abord et avant tout un utilitaire.
Cependant je ne vois pas l'intérêt de ton site - l'utilitaire est fortement négliger.
++
Modifié par zardoz (22 Oct 2010 - 05:19)
Beaucoup de fichiers séparer : tant .css que .js.
AC_RunActiveContent.js n'est certe pas obligatoire. Tu développe sous Adobe ?.
Une simple balise « object » avec la propriété « data » suffit et passe très bien au validateur et en plus s'affiche dans tous les navigateurs connus. Ce qui devrais optimisé le code.
<object type="application/x-shockwave-flash" data="cibleVideo.swf" width="448" height="320">
<param name="movie" value="cibleVideo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
Tu pourrais optimiser davantage et moins te soucier à savoir si tes visiteurs ont la dernière version du Lecteur.
Quoiqu'il en soit sous IE8 c'est ok - mais pas avec FF4B ni avec Opéra 10.62.
Je ne tiens pas à en dire davantage car pour un (pro) : moi je trouve moche.
Un site dans son ensemble c'est d'abord et avant tout un utilitaire.
Cependant je ne vois pas l'intérêt de ton site - l'utilitaire est fortement négliger.
++
Modifié par zardoz (22 Oct 2010 - 05:19)
Bonjour,
Je suis parvenue à ouvrir ton site au bout de 3 essais (epiphany ne l'ouvre pas non plus, seul Arora y parvient).
La première impression est plutôt défavorable : la musique et les bruitages horribles, le logo qui bouge, le fond noir sans délimitation des zones de contenu.
Le système de navigation est également à revoir : avec ma configuration (1024x768) si je clique sur un des liens du menu (ex : compétences) rien ne change sur la page. Il faut scroller pour voir le contenu dans la partie basse de la page. On a l'impression qu'il n'y a rien à voir, que rien ne change.
La partie nos activités ne devrait pas se trouver sur toutes les pages à mon avis. Sur la page d'accueil, OK mais pas sur les autres pages (plutôt avoir un lien dans le menu)
Le texte est faiblement lisible (gris sur noir) et il manque tous les accents.
Je ne sais pas si c'est la mise en page qui cafouille sur arora mais ça donne une impression de fouillis.
Pour moi, c'est vraiment à améliorer.
Modifié par thelma (22 Oct 2010 - 17:38)
Je suis parvenue à ouvrir ton site au bout de 3 essais (epiphany ne l'ouvre pas non plus, seul Arora y parvient).
La première impression est plutôt défavorable : la musique et les bruitages horribles, le logo qui bouge, le fond noir sans délimitation des zones de contenu.
Le système de navigation est également à revoir : avec ma configuration (1024x768) si je clique sur un des liens du menu (ex : compétences) rien ne change sur la page. Il faut scroller pour voir le contenu dans la partie basse de la page. On a l'impression qu'il n'y a rien à voir, que rien ne change.
La partie nos activités ne devrait pas se trouver sur toutes les pages à mon avis. Sur la page d'accueil, OK mais pas sur les autres pages (plutôt avoir un lien dans le menu)
Le texte est faiblement lisible (gris sur noir) et il manque tous les accents.
Je ne sais pas si c'est la mise en page qui cafouille sur arora mais ça donne une impression de fouillis.
Pour moi, c'est vraiment à améliorer.
Modifié par thelma (22 Oct 2010 - 17:38)
ccom2a a écrit :À partir du moment où tu propose la réalisation de sites web, tu es un "professionnel" du web. Être pro, c'est vivre de quelque chose, pas plus.
Quand j'annonce professionnel c'est pour sa fonction ...
Je ferais un retour plus complet plus tard (je dois aller donner un cours @_@), mais j'aimerais quand même donner quelques précisions sur ce qui a été dis :
* Le logo donne mal au coeur.
* Mon IE8 m'annonce que ton site essaye d'utiliser Windows Media Player (WTF! Même Youtube oserait pas).
* La note pour arrêter la musique c'est tellement pas logique qu'elle ne sert à rien.
Visuellement, je pense que l'essentiel a été dit : il y a un gros problème.
Pour le code, il y a aussi pas mal de problèmes :
* Les "terms of use" du template utilisé sont une belle bêtise... Si tu supprimes les deux portions de texte entre les commentaires, tu n'auras pas de problèmes et tu gagneras en crédibilité (accessoirement, je ne pense pas que le "thème graphique" soit vraiment "original").
* Le title de la page est trop long, il ne devrait pas contenir de mots clés, juste le nom du site et sa description générale (attention, le title doit être unique pour chaque page).
* Tu as une floppée de meta inutiles : keywords (plus utilisée par les moteurs sérieux), robots (valeurs par défaut), classification (ne sert à rien), content-script-type (ne sert à rien), description (mal renseignée), revisit-after (c'est un mythe que le robot repassera), email (attrape spam, ne sert à rien d'autre), author (ne sert à rien, l'information devrait être dans la page), publisher (ne sert à rien), copyright (ne sert à rien, n'a aucune valeur en dehors des USA). Ces meta, sauf description, peuvent être supprimées, tu gagneras de la place.
* Concernant la meta description : le seul et unique intérêt de cette meta est que, si jugée pertinente, elle peut être affichée sous le titre de la page dans les résultats des moteurs de recherche. Le contenu de la meta doit donc, non pas être plein de mots clés pour "optimiser son référencement" (ceci est un mythe) mais, être sexy pour l'utilisateur, l'humain qui peut potentiellement cliquer sur le lien. Elle doit, comme title, être unique pour chaque page.
* Trois feuilles de styles CSS, en développement, ça peut être bien ; en production c’est une erreur. Il est préférable de regrouper les fichiers CSS en un seul (sauf éventuelles feuilles de styles correctives destinées à IE).
* Idem pour les scripts JS, ils doivent être regroupés en un seul fichier et placé en fin de document (avant la fermeture du body).
* Ta hiérarchie des titres est fausse : elle passe de h1 à h3. Il doit y avoir un h2 entre les deux (en gros, tes h3 sont des h2 et tes h4 des h3).
* Sans JavaScript, tes liens sont totalement inutilisables...
* En quoi, ceci :
* Les changements de langues ne sont pas balisés.
* Le tagcloud est une soupe de liens imbuvables (aussi bien dans le code que visuellement).
* Il y a quelques balises inutiles qui se promènent dans le code.
Pour le code, il y a aussi pas mal de problèmes :
* Les "terms of use" du template utilisé sont une belle bêtise... Si tu supprimes les deux portions de texte entre les commentaires, tu n'auras pas de problèmes et tu gagneras en crédibilité (accessoirement, je ne pense pas que le "thème graphique" soit vraiment "original").
* Le title de la page est trop long, il ne devrait pas contenir de mots clés, juste le nom du site et sa description générale (attention, le title doit être unique pour chaque page).
* Tu as une floppée de meta inutiles : keywords (plus utilisée par les moteurs sérieux), robots (valeurs par défaut), classification (ne sert à rien), content-script-type (ne sert à rien), description (mal renseignée), revisit-after (c'est un mythe que le robot repassera), email (attrape spam, ne sert à rien d'autre), author (ne sert à rien, l'information devrait être dans la page), publisher (ne sert à rien), copyright (ne sert à rien, n'a aucune valeur en dehors des USA). Ces meta, sauf description, peuvent être supprimées, tu gagneras de la place.
* Concernant la meta description : le seul et unique intérêt de cette meta est que, si jugée pertinente, elle peut être affichée sous le titre de la page dans les résultats des moteurs de recherche. Le contenu de la meta doit donc, non pas être plein de mots clés pour "optimiser son référencement" (ceci est un mythe) mais, être sexy pour l'utilisateur, l'humain qui peut potentiellement cliquer sur le lien. Elle doit, comme title, être unique pour chaque page.
* Trois feuilles de styles CSS, en développement, ça peut être bien ; en production c’est une erreur. Il est préférable de regrouper les fichiers CSS en un seul (sauf éventuelles feuilles de styles correctives destinées à IE).
* Idem pour les scripts JS, ils doivent être regroupés en un seul fichier et placé en fin de document (avant la fermeture du body).
* Ta hiérarchie des titres est fausse : elle passe de h1 à h3. Il doit y avoir un h2 entre les deux (en gros, tes h3 sont des h2 et tes h4 des h3).
* Sans JavaScript, tes liens sont totalement inutilisables...
* En quoi, ceci :
<h4>................................................................</h4>* Les changements de langues ne sont pas balisés.
* Le tagcloud est une soupe de liens imbuvables (aussi bien dans le code que visuellement).
* Il y a quelques balises inutiles qui se promènent dans le code.
Enfin, je peux le visiter sans être obligée de switcher vers Windows XP pour le visualiser (je suis sur Linux).
Étrange... Même si je n'ai pas autorisé tout de suite les scripts de la page dans les paramètres de Noscript, j'arrivais quand même à utiliser les liens du menu. Et si je regarde directement le code-source :
Et même Firebug me le confirme !
Mais il reste qu'utiliser du javascript pour ouvrir un lien, c'est une très mauvaise pratique, d'autant plus que je ne vois aucun effet spécial sur tes liens, même en activant JS (Était-ce une tentative de pop-up ?) !
Donc au lieu de
Utilise plutôt
Si c'était dans le but d'ouvrir un pop-up, je te signale que cette façon de faire est plus désagréable qu'autre chose pour la navigationh, d'autant plus qu'on ne sort pas du site ! J'en viens donc au point qui va suivre après.
Javascript doit TOUJOURS être une surcouche au HTML, JAMAIS un remplacement !
Je t'invite donc à lire ce tuto sur les bonnes pratiques en Javascript : http://www.alsacreations.com/article/lire/562-bonnes-pratiques-javascript.html
- Je constate malheureusement que le menu n'est présent que sur la page d'accueil ! Non seulement il n'y a aucune homogénéité entre les pages (par l'absence du menu), mais en plus, l'absence du menu dans les pages autres que l'accueil est loin d'être ergonomique ! On est obligé de retourner vers l'accueil pour aller dans une autre section, alors que si le menu était présent partout, on aurait pu passer directement d'une page secondaire à une autre !
Vu que vous êtes hébergés sur 1&1, qui supporte PHP, je vous conseille d'utiliser la fonction include() de PHP pour pouvoir afficher le menu sur toutes les pages tout en n'ayant qu'un fichier à éditer. Pour en apprendre plus : http://www.siteduzero.com/tutoriel-3-207759-inclure-des-portions-de-page.html
Ça te mettra donc à devoir enregistrer tes pages avec l'extension .php au lieu de .html, et à utiliser Wamp pour les tests. Mais c'est un moindre mal pour un site bien plus ergonomique !
Pour le logo, enlève cet effet de vagues, elle n'apporte rien en plus de distraction pour le visiteur !
Dans ta tagcloud, tes liens deviennent illisibles au survol (ils deviennent noir sur noir), et certains de tes liens restent quasiment illislbles même en mode normal (bleu marine ou gris foncé sur noir) ! Mais en regardant, j'en vieux au mêmes conclusions que Laurie-Anne : Dans ce contexte, ta tagcloud est inutile ! Elle n'est pertinente que si elle permet de chercher des fils de discussion (forum) ou des billets (blogue) associés à un mot-clé.
- Et juste en passant, mon Firefox a planté quelques minutes après l'autorisation des scripts du site une première fois. Mais sinon, à partir du moment où j'autorise les javascripts, je n'arrive plus à faire de clic-droit, même pour choisir d'ouvrir un lien dans un nouvel onglet ou non ou pour copier l'adresse du lien pour le transmettre, ou encore pour consulter le code-source ! Si vous cherchiez à protéger vos images contre le vol, ça ne vaut pas la peine de désactiver le clic-droit, c'est très facilement contournable ! La preuve puisque j'ai pu visionner le code-source depuis un clic-droit avant d'autoriser les scripts !
En plus, je viens d'avoir ces *BIIIIP* de *BIIIIIP* de *BIIIIIP* d'alertes "You have removed or modified the link to our website. In accordance with our terms of use you must keep intact and visible any notice accompanying this product !" trois fois de file dès que j'ai autorisé JS une deuxième fois, et j'ai cru que j'allais devoir fermer Firefox en catastrophe avec la commande kill de Linux, ce qui m'aurait fait du coup perdre le message que je suis en train d'écrire ! Je suis ensuite tombée sur une page blanche !
Là je vais arrêter car là je n'ai plus accès tant que l'autorisation temporaire n'est pas retirée ! Le reste a déjà été dit ! Le javascript utilisé est vraiment TROP intrusif et agressant !
Si tu veux un exemple des erreurs à ne pas faire, va voir sur cette page qui est volontairement moche justement pour montrer ce qu'il ne faut PAS FAIRE : http://www.angelfire.com/super/badwebs/
Pour finir, je conseille vivement un VRAI webdesign pour aider à avoir un contenu plus soigné et aussi justement pour montrer le niveau en graphisme. Si vous n'avez pas Photoshop, Gimp fait l'affaire, je l'utilise depuis 4 ans et demi pour mes sites et mes styles pour forums, et dans ce cas, n'hésitez pas à passer sur Gimp-Attitude pour demander de l'aide.
Étrange... Même si je n'ai pas autorisé tout de suite les scripts de la page dans les paramètres de Noscript, j'arrivais quand même à utiliser les liens du menu. Et si je regarde directement le code-source :
<li><a href="javascript:showPage('_home.htm', '');" id="lien_presentation"><span>Presentation</span></a></li>
<li><a href="javascript:showPage('_take-a-tour.htm', '');" id="lien_tour"><span>Competences</span></a></li>
<li><a href="javascript:showPage('_contact.htm', '');" id="lien_contact"><span>Contact</span></a></li>
Et même Firebug me le confirme !
Mais il reste qu'utiliser du javascript pour ouvrir un lien, c'est une très mauvaise pratique, d'autant plus que je ne vois aucun effet spécial sur tes liens, même en activant JS (Était-ce une tentative de pop-up ?) !
Donc au lieu de
<li><a href="javascript:showPage('_mapage.htm', '');" id="lien_presentation"><span>Ma page</span></a></li>Utilise plutôt
<li><a href="home.htm" id="lien_presentation"><span>Presentation</span></a></li>Si c'était dans le but d'ouvrir un pop-up, je te signale que cette façon de faire est plus désagréable qu'autre chose pour la navigationh, d'autant plus qu'on ne sort pas du site ! J'en viens donc au point qui va suivre après.
Javascript doit TOUJOURS être une surcouche au HTML, JAMAIS un remplacement !
Je t'invite donc à lire ce tuto sur les bonnes pratiques en Javascript : http://www.alsacreations.com/article/lire/562-bonnes-pratiques-javascript.html
- Je constate malheureusement que le menu n'est présent que sur la page d'accueil ! Non seulement il n'y a aucune homogénéité entre les pages (par l'absence du menu), mais en plus, l'absence du menu dans les pages autres que l'accueil est loin d'être ergonomique ! On est obligé de retourner vers l'accueil pour aller dans une autre section, alors que si le menu était présent partout, on aurait pu passer directement d'une page secondaire à une autre !
Vu que vous êtes hébergés sur 1&1, qui supporte PHP, je vous conseille d'utiliser la fonction include() de PHP pour pouvoir afficher le menu sur toutes les pages tout en n'ayant qu'un fichier à éditer. Pour en apprendre plus : http://www.siteduzero.com/tutoriel-3-207759-inclure-des-portions-de-page.html
Ça te mettra donc à devoir enregistrer tes pages avec l'extension .php au lieu de .html, et à utiliser Wamp pour les tests. Mais c'est un moindre mal pour un site bien plus ergonomique !
Pour le logo, enlève cet effet de vagues, elle n'apporte rien en plus de distraction pour le visiteur !
Dans ta tagcloud, tes liens deviennent illisibles au survol (ils deviennent noir sur noir), et certains de tes liens restent quasiment illislbles même en mode normal (bleu marine ou gris foncé sur noir) ! Mais en regardant, j'en vieux au mêmes conclusions que Laurie-Anne : Dans ce contexte, ta tagcloud est inutile ! Elle n'est pertinente que si elle permet de chercher des fils de discussion (forum) ou des billets (blogue) associés à un mot-clé.
- Et juste en passant, mon Firefox a planté quelques minutes après l'autorisation des scripts du site une première fois. Mais sinon, à partir du moment où j'autorise les javascripts, je n'arrive plus à faire de clic-droit, même pour choisir d'ouvrir un lien dans un nouvel onglet ou non ou pour copier l'adresse du lien pour le transmettre, ou encore pour consulter le code-source ! Si vous cherchiez à protéger vos images contre le vol, ça ne vaut pas la peine de désactiver le clic-droit, c'est très facilement contournable ! La preuve puisque j'ai pu visionner le code-source depuis un clic-droit avant d'autoriser les scripts !
En plus, je viens d'avoir ces *BIIIIP* de *BIIIIIP* de *BIIIIIP* d'alertes "You have removed or modified the link to our website. In accordance with our terms of use you must keep intact and visible any notice accompanying this product !" trois fois de file dès que j'ai autorisé JS une deuxième fois, et j'ai cru que j'allais devoir fermer Firefox en catastrophe avec la commande kill de Linux, ce qui m'aurait fait du coup perdre le message que je suis en train d'écrire ! Je suis ensuite tombée sur une page blanche !
Là je vais arrêter car là je n'ai plus accès tant que l'autorisation temporaire n'est pas retirée ! Le reste a déjà été dit ! Le javascript utilisé est vraiment TROP intrusif et agressant !
Si tu veux un exemple des erreurs à ne pas faire, va voir sur cette page qui est volontairement moche justement pour montrer ce qu'il ne faut PAS FAIRE : http://www.angelfire.com/super/badwebs/
Pour finir, je conseille vivement un VRAI webdesign pour aider à avoir un contenu plus soigné et aussi justement pour montrer le niveau en graphisme. Si vous n'avez pas Photoshop, Gimp fait l'affaire, je l'utilise depuis 4 ans et demi pour mes sites et mes styles pour forums, et dans ce cas, n'hésitez pas à passer sur Gimp-Attitude pour demander de l'aide.