3246 sujets
Critiques de vos sites: code et design
bonsoir
oui pas de probleme:
http://www.labandamarans.com
Modifié par mbourotte (25 Jan 2011 - 17:55)
oui pas de probleme:
http://www.labandamarans.com
Modifié par mbourotte (25 Jan 2011 - 17:55)
Ouille, j'ai l'impression de retourner dans les années 90 ! Si je n'avais pas regardé le code HTML, je ne me serais jamais douté qu'il serait fait maison en XHTML et j'aurais cru à un site fait avec Frontpage tellement ça me rappelle ces genres de sites !
Le Comic Sans MS, c'est bin d'valeur (en bon québécois), mais c'est tellement surutilisé en création de sites web (tout comme ne l'est la rime Fire+Desire dans une chanson en anglais - si un groupe métal ose le faire, il fait rire de lui !). Comic Sans a été conçu pour les sites s'adressant aux enfants et aux sites en rapport avec la BD. Autrement, ça fait trop noob et ça nuit à la crédibilité du site : http://forum.alsacreations.com/topic.php?fid=9&tid=46484&s=comic
Aucune charte graphique ! en gros, tout ce qu'on a, c'est un fond de page texturé (trop vieillot)
Le texte sur le menu est franchement illisible, et le texte Presse l'est encore plus (trop flou) ! Teste en utilisant l'extension Daltonize sous Chrome, et tu constateras que tu te coupe les 10% de la population masculline qui souffre de problèmes de perception des couleurs ! De plus, le menu ne se démarque pas assez !
Avec l'absence de charte graphique, la bannière ne s'intègre pas du tout au reste !
Même si je n'ai pas d'ascenseur horizontal sur mon écran de 1280*768, je te souligne qu'encore une bonne partie des internautes utilise une résolution de 1024 de large et donc, le site est trop large pour leur résolution et ce n'est vraiment pas du tout agréable d'avoir à scroller horizontalement pour voir ce qu'il y a à droite !
Sur le livre d'or, les champs dépassent du cadre chez moi (Ubuntu 10.04 - Firefox 3.6) (Voir la capture)
Je remarque aussi une grosse faille XSS dans ton livre d'or. Je viens de tester (sous le pseudo Testeuse) en insérant un code HTML, ainsi qu'un événement Javascript entraînant une alerte et ils fonctionnent ! Je te recommande très fortement d'utiliser htmlentities() ou htmlspecialchars() pour prévenir les problèmes (ex: vol de cookies) dûes à la mauvaise utilisation de Javascript !
A lire : http://www.siteduzero.com/tutoriel-3-14543-transmettre-des-donnees-avec-les-formulaires.html#ss_part_3
Dans tes formulaires, tes étiquettes ne sont pas attachés à leurs champs !
À lire : http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html
Ta hiérarchie des titres est incorrecte ! Je vois bien des <h2>, mais aucun <h1> (qui lui, je le verrais entourant la bannière)
À lire : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
Tu utilises très mal tes alt et title ! Pour les images, c'est alt="" et non title="" qui doit être utilisé pour afficher l'équivalent du texte contenu dans l'image ! A la fois pour les images et les liens, title="" n'est à utiliser QUE pour apporter une information supplémentaire et essentielle à la bonne compréhension !
A lire : http://forum.alsacreations.com/topic-6-51844-1-Alt-title-images-et-liens.html
Je remarque trois scripts dans le <head> alors que pour éviter de ralentir l'affichage du contenu, il est recommandé de les regrouper et de les mettre en fin de document, juste avant </body>.
Donc, mes recommandation :
- Refaire le design au complet, en faisant appel à un webdesigner si nécessaire, afin d'avoir une vraie charte graphique !
- Utiliser une largeur minimale légèrement inférieure à 1000px (980 est l'idéal) pour l'ensemble de la page
- Rendre le menu plus lisible et le mettre en valeur.
- Virer ce Comic sans MS et utilier une police plus classique (Verdana, etc.), ou encore Trebuchet MS si tu veux une police avec plus de caractère tout en restant pro.
- Revoir le code pour remplacer les <br /> d'espacement par les marges en CSS, et utiliser davantage les balises sémantiques (liste à puces pour le menu, titres de section, paragraphes)
Il y a donc BEAUCOUP de boulot à faire !
Le Comic Sans MS, c'est bin d'valeur (en bon québécois), mais c'est tellement surutilisé en création de sites web (tout comme ne l'est la rime Fire+Desire dans une chanson en anglais - si un groupe métal ose le faire, il fait rire de lui !). Comic Sans a été conçu pour les sites s'adressant aux enfants et aux sites en rapport avec la BD. Autrement, ça fait trop noob et ça nuit à la crédibilité du site : http://forum.alsacreations.com/topic.php?fid=9&tid=46484&s=comic
Aucune charte graphique ! en gros, tout ce qu'on a, c'est un fond de page texturé (trop vieillot)
Le texte sur le menu est franchement illisible, et le texte Presse l'est encore plus (trop flou) ! Teste en utilisant l'extension Daltonize sous Chrome, et tu constateras que tu te coupe les 10% de la population masculline qui souffre de problèmes de perception des couleurs ! De plus, le menu ne se démarque pas assez !
Avec l'absence de charte graphique, la bannière ne s'intègre pas du tout au reste !
Même si je n'ai pas d'ascenseur horizontal sur mon écran de 1280*768, je te souligne qu'encore une bonne partie des internautes utilise une résolution de 1024 de large et donc, le site est trop large pour leur résolution et ce n'est vraiment pas du tout agréable d'avoir à scroller horizontalement pour voir ce qu'il y a à droite !
Sur le livre d'or, les champs dépassent du cadre chez moi (Ubuntu 10.04 - Firefox 3.6) (Voir la capture)
Je remarque aussi une grosse faille XSS dans ton livre d'or. Je viens de tester (sous le pseudo Testeuse) en insérant un code HTML, ainsi qu'un événement Javascript entraînant une alerte et ils fonctionnent ! Je te recommande très fortement d'utiliser htmlentities() ou htmlspecialchars() pour prévenir les problèmes (ex: vol de cookies) dûes à la mauvaise utilisation de Javascript !
A lire : http://www.siteduzero.com/tutoriel-3-14543-transmettre-des-donnees-avec-les-formulaires.html#ss_part_3
Dans tes formulaires, tes étiquettes ne sont pas attachés à leurs champs !
À lire : http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html
Ta hiérarchie des titres est incorrecte ! Je vois bien des <h2>, mais aucun <h1> (qui lui, je le verrais entourant la bannière)
À lire : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
Tu utilises très mal tes alt et title ! Pour les images, c'est alt="" et non title="" qui doit être utilisé pour afficher l'équivalent du texte contenu dans l'image ! A la fois pour les images et les liens, title="" n'est à utiliser QUE pour apporter une information supplémentaire et essentielle à la bonne compréhension !
A lire : http://forum.alsacreations.com/topic-6-51844-1-Alt-title-images-et-liens.html
Je remarque trois scripts dans le <head> alors que pour éviter de ralentir l'affichage du contenu, il est recommandé de les regrouper et de les mettre en fin de document, juste avant </body>.
Donc, mes recommandation :
- Refaire le design au complet, en faisant appel à un webdesigner si nécessaire, afin d'avoir une vraie charte graphique !
- Utiliser une largeur minimale légèrement inférieure à 1000px (980 est l'idéal) pour l'ensemble de la page
- Rendre le menu plus lisible et le mettre en valeur.
- Virer ce Comic sans MS et utilier une police plus classique (Verdana, etc.), ou encore Trebuchet MS si tu veux une police avec plus de caractère tout en restant pro.
- Revoir le code pour remplacer les <br /> d'espacement par les marges en CSS, et utiliser davantage les balises sémantiques (liste à puces pour le menu, titres de section, paragraphes)
Il y a donc BEAUCOUP de boulot à faire !
Je viens de me rendre compte que j'ai oublié de poster la capture des champs qui dépassent, la voici : http://img.photobucket.com/albums/v381/ladykatt/bandamarans01.png
