3246 sujets
Critiques de vos sites: code et design
Bonjour,
pourquoi poster dans le salon accessibilité? > je déplace ton topic dans le salon adéquate
Dans l'ensemble c'est un design assez générique, c-a-d un peu trop impersonnel et commun même s'il est d'assez bonne facture.
> Première chose à éviter absolument : le lancement automatique et intrusif de la video du bas.
> Tes titres gris et tes mise en exergue vertes manquent de contrastes avec le fond.
> Il manque un peu d'espace blanc au dessus du logo
> L'interlignage des colonnes de texte est excessif > ne pas dépasser 1.6em
> le texte gris de testimonial manque de contraste avec le fond.
> Il faudrait travailler la présentation des liens bleu du footer
> Le dégradé gris en haut du footer n'apporte rien
> Augmenter l'espace présent sous les libellés verts
> Revoir la disposition des éléments du bandeau identitaire (logo + menu + icones de follow), notamment les alignement verticaux.
Modifié par Hermann (09 Jul 2010 - 00:33)
pourquoi poster dans le salon accessibilité? > je déplace ton topic dans le salon adéquate
Dans l'ensemble c'est un design assez générique, c-a-d un peu trop impersonnel et commun même s'il est d'assez bonne facture.
> Première chose à éviter absolument : le lancement automatique et intrusif de la video du bas.
> Tes titres gris et tes mise en exergue vertes manquent de contrastes avec le fond.
> Il manque un peu d'espace blanc au dessus du logo
> L'interlignage des colonnes de texte est excessif > ne pas dépasser 1.6em
> le texte gris de testimonial manque de contraste avec le fond.
> Il faudrait travailler la présentation des liens bleu du footer
> Le dégradé gris en haut du footer n'apporte rien
> Augmenter l'espace présent sous les libellés verts
> Revoir la disposition des éléments du bandeau identitaire (logo + menu + icones de follow), notamment les alignement verticaux.
Modifié par Hermann (09 Jul 2010 - 00:33)
En passant ton site au validateur W3C, il détecte 37 erreurs, et pour la plupart, il s'agit d'erreurs très bêtes :
- Il y a des attributs en majuscules, et dans le cas des images, le nombre d'erreurs est doublée ! -> en XHTML, tout doit être en minuscules !
- <param> est une balise autofermante et non une balise par paires ! On doit donc écrire <param />
- Tes caractères & ne sont pas encodés en entités HTML. Il faut écrire &
- Utiliser <embed> est dépassé, et même en XHTML Transitional (plus permissif que XHTML Strict), cette balise n'est pas valide et te génère donc à elle seule 7 erreurs. Je te conseille donc de le laisser tomber et de lire ce tuto sur la manière valide d'insérer du Flash : http://www.siteduzero.com/tutoriel-3-33680-faire-un-site-valide-xhtml-strict-1-0-pour-mozilla-et-ie-avec-du-flash.html
Cela va du coup te corriger plusieurs erreurs, et t'assurer une compatibilité partout (sauf le Ipad bien sûr)
- Dans ta ligne de copyright (tous droits réservés), tu as un </a> qui traîne sans avoir été ouvert
À part de ça, voici les autres remarques :
- Tu as plusieurs fichiers Javascript liés, et un Javascript interne. Je te recommande de mettre ce javascript interne sur un fichier externe, de réunir tes javascripts externes pour avoir le moins de fichiers possibles pour réduire le nombre de requêtes HTTP, et de mettre ces scripts en fin de document juste avant </body>, afin de laisser la page se charger avant son comportement, ce qui est non-négligeable en termes de rapidité pour les petites connexions.
- Pour tes feuilles de style, comme pour les scripts, réunis-les si possible en un seul fichier, pour la même raison.
- Ton document n'a aucune langue définie dans la balise <html>. Prend exemple sur mon site en regardant son code-source pour savoir comment faire. Ceci permet au lecteur d'écran des non-voyants de savoir dans quelle langue il doit lire le document
- La méta keywords est inutile. Plus d'infos : http://www.alsacreations.com/article/lire/628-balises-meta.html
- Je constate une absence de hiérarchie des titres. Débranche ton CSS (sous Firefox : Affichage > Style de la page > Aucun style) et dis-moi si tu arrives à trouver les titres. Je te conseille de lire ceci : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
- Les target="_blank" sont à éviter, il faut laisser le choix au visiteur d'ouvrir dans une nouvelle fenêtre ou non. Si on ne lui donne pas ce choix et qu'on ne donne aucune indication d'ouverture dans une nouvelle fenêtre, ça peut déstabiliser le visiteur, et c'est encore pire pour un non-voyant qui bien souvent, ne verra pas tout de suite qu'une nouvelle fenêtre s'est ouverte, en plus que ça coupe la possibilité de faire "Précédent".
- Il vaut mieux séparer autant que possible la présentation du contenu. Pour les rollovers en javascript, rien à redire puisque la navigation reste fonctionnelle même quand Javascript est désactivé. Mais par contre, en dehors de ça, veut mieux éviter les attributs de mise en forme et les styles en-ligne. Il vaut mieux autant que possible utiliser leurs équivalents CSS dans une feuille externe, pour une question de meilleure maintenance. Quant à tes images, elles sont déjà dans leur vraie grandeur, ce qui rend inutile l'utilisation de height et width.
- Tu as des attributs title="" inutiles dans tes liens. Enlève-les puisqu'ils n'apportent aucune information supplémentaire.
Sinon, les points positifs :
- Tes images porteuses de contenus utilisent <ìmg /> et ont en général un alt="" bien rempli
- Le site reste fonctionnel, que Javascript soit activé ou non
- Ton formulaire en bas des pages est accessible avec ses label correctement liés aux champs.
Là, je n'ai pas tout soulevé, mais si Laurie-Anne passe par ici, elle pourra compléter.
- Il y a des attributs en majuscules, et dans le cas des images, le nombre d'erreurs est doublée ! -> en XHTML, tout doit être en minuscules !
- <param> est une balise autofermante et non une balise par paires ! On doit donc écrire <param />
- Tes caractères & ne sont pas encodés en entités HTML. Il faut écrire &
- Utiliser <embed> est dépassé, et même en XHTML Transitional (plus permissif que XHTML Strict), cette balise n'est pas valide et te génère donc à elle seule 7 erreurs. Je te conseille donc de le laisser tomber et de lire ce tuto sur la manière valide d'insérer du Flash : http://www.siteduzero.com/tutoriel-3-33680-faire-un-site-valide-xhtml-strict-1-0-pour-mozilla-et-ie-avec-du-flash.html
Cela va du coup te corriger plusieurs erreurs, et t'assurer une compatibilité partout (sauf le Ipad bien sûr)
- Dans ta ligne de copyright (tous droits réservés), tu as un </a> qui traîne sans avoir été ouvert
À part de ça, voici les autres remarques :
- Tu as plusieurs fichiers Javascript liés, et un Javascript interne. Je te recommande de mettre ce javascript interne sur un fichier externe, de réunir tes javascripts externes pour avoir le moins de fichiers possibles pour réduire le nombre de requêtes HTTP, et de mettre ces scripts en fin de document juste avant </body>, afin de laisser la page se charger avant son comportement, ce qui est non-négligeable en termes de rapidité pour les petites connexions.
- Pour tes feuilles de style, comme pour les scripts, réunis-les si possible en un seul fichier, pour la même raison.
- Ton document n'a aucune langue définie dans la balise <html>. Prend exemple sur mon site en regardant son code-source pour savoir comment faire. Ceci permet au lecteur d'écran des non-voyants de savoir dans quelle langue il doit lire le document
- La méta keywords est inutile. Plus d'infos : http://www.alsacreations.com/article/lire/628-balises-meta.html
- Je constate une absence de hiérarchie des titres. Débranche ton CSS (sous Firefox : Affichage > Style de la page > Aucun style) et dis-moi si tu arrives à trouver les titres. Je te conseille de lire ceci : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html
- Les target="_blank" sont à éviter, il faut laisser le choix au visiteur d'ouvrir dans une nouvelle fenêtre ou non. Si on ne lui donne pas ce choix et qu'on ne donne aucune indication d'ouverture dans une nouvelle fenêtre, ça peut déstabiliser le visiteur, et c'est encore pire pour un non-voyant qui bien souvent, ne verra pas tout de suite qu'une nouvelle fenêtre s'est ouverte, en plus que ça coupe la possibilité de faire "Précédent".
- Il vaut mieux séparer autant que possible la présentation du contenu. Pour les rollovers en javascript, rien à redire puisque la navigation reste fonctionnelle même quand Javascript est désactivé. Mais par contre, en dehors de ça, veut mieux éviter les attributs de mise en forme et les styles en-ligne. Il vaut mieux autant que possible utiliser leurs équivalents CSS dans une feuille externe, pour une question de meilleure maintenance. Quant à tes images, elles sont déjà dans leur vraie grandeur, ce qui rend inutile l'utilisation de height et width.
- Tu as des attributs title="" inutiles dans tes liens. Enlève-les puisqu'ils n'apportent aucune information supplémentaire.
Sinon, les points positifs :
- Tes images porteuses de contenus utilisent <ìmg /> et ont en général un alt="" bien rempli
- Le site reste fonctionnel, que Javascript soit activé ou non
- Ton formulaire en bas des pages est accessible avec ses label correctement liés aux champs.
Là, je n'ai pas tout soulevé, mais si Laurie-Anne passe par ici, elle pourra compléter.
Bonjour,
Comme l'a dit Hermann, dans l'ensemble c'est plutôt bien fait.
Par contre, ça manque un peu d'originalité, d'éléments un peu plus personnel qui vous démarqueraient.
Il me semble que l'interlignage des textes est un peu trop grand par rapport à la taille du texte.
Et je trouve bizarre d'employer des termes anglais pour certains éléments alors que tout le reste est en français.
Par ailleurs, il est étonnant de mélanger dans la partie "Testimonials" les témoignages clients et les témoignages de l'équipe.
Voilà voilà.
Bonne continuation.
Comme l'a dit Hermann, dans l'ensemble c'est plutôt bien fait.
Par contre, ça manque un peu d'originalité, d'éléments un peu plus personnel qui vous démarqueraient.
Il me semble que l'interlignage des textes est un peu trop grand par rapport à la taille du texte.
Et je trouve bizarre d'employer des termes anglais pour certains éléments alors que tout le reste est en français.
Par ailleurs, il est étonnant de mélanger dans la partie "Testimonials" les témoignages clients et les témoignages de l'équipe.
Voilà voilà.
Bonne continuation.
Côté perfs plus de 10 fichiers externes qu'il serait bon de regrouper, gzip à activer.
Côté sémantique, les pages pourraient être mieux structurées (avec des hn, notamment)
Il n'y a visiblement pas eu de redirection par rapport à tes anciennes urls, tu risques de perdre le bénéfice de l'ancien site.
Côté sémantique, les pages pourraient être mieux structurées (avec des hn, notamment)
Il n'y a visiblement pas eu de redirection par rapport à tes anciennes urls, tu risques de perdre le bénéfice de l'ancien site.
J'apprécis personnellement ce genre de rendu. Celui-ci, en effet répond à tes besoins.
Offre de service » évidemment tu as su prévilégier l'essentiel sans tombé dans le superflu.
J'apprécis donc le format visuel » Mince comme une feuille et sans prétention, avec une navigation simple d'utilisation. Bref en un mot, un éventuel client ce plaira à visiter ton site. Si donc nous cherchons une information précise, nous la trouvons rapidement.
Beaucoup de chose auront été dit ici, du côté technique. Cependant un point, qui à mon avis est essentiel.
La partie du bas est trop sombre et défait l'ensemble visuel. Nous pouvons concevoir l'entête du document comme une balise ouvrante et le bas de page comme une une balise fermante, au travers lesquelles, le contenu. Ce en quoi le contraste est trop prononcé. En effet nous passons de la lumière à l'obcurité. Il y a d'autres façons de rendre cet espace attrayant, sans pour autant utiliser la couleur comme étant le seul moyen de séparer l'espace.
Félicitation pour ton travail »
++ zardoz.
Modifié par zardoz (09 Jul 2010 - 20:39)
Offre de service » évidemment tu as su prévilégier l'essentiel sans tombé dans le superflu.
J'apprécis donc le format visuel » Mince comme une feuille et sans prétention, avec une navigation simple d'utilisation. Bref en un mot, un éventuel client ce plaira à visiter ton site. Si donc nous cherchons une information précise, nous la trouvons rapidement.
Beaucoup de chose auront été dit ici, du côté technique. Cependant un point, qui à mon avis est essentiel.
La partie du bas est trop sombre et défait l'ensemble visuel. Nous pouvons concevoir l'entête du document comme une balise ouvrante et le bas de page comme une une balise fermante, au travers lesquelles, le contenu. Ce en quoi le contraste est trop prononcé. En effet nous passons de la lumière à l'obcurité. Il y a d'autres façons de rendre cet espace attrayant, sans pour autant utiliser la couleur comme étant le seul moyen de séparer l'espace.
Félicitation pour ton travail »
++ zardoz.
Modifié par zardoz (09 Jul 2010 - 20:39)
Merci a tous pour vos commentaires ! Le but était principalement de construire un site ergonomique, light et épuré. Suivant vos avis j'ai donc fais des modifications ( notamment celles de herman qui a soulever les problèmes graphiques !)
@zardoz : Concernant le pied de page, vu de ton point, ce n'est pas fux du tout ! aurait eu un conseil ? une idee ?
Modifié par GeeDesign (09 Jul 2010 - 21:42)
@zardoz : Concernant le pied de page, vu de ton point, ce n'est pas fux du tout ! aurait eu un conseil ? une idee ?
Modifié par GeeDesign (09 Jul 2010 - 21:42)
Au niveau couleur » te rapprocher un peu plus des couleurs du haut de page
serait à mon avis une meilleur idée. Par le fait même une couleur gris claire ou blanc ou même vert.
C'est ce que je voulais dire par : Nous pouvons concevoir l'entête comme une balise ouvrante et le bas de page comme une balise fermante. etc. Nous n'oserions jamais écrire : <h3> . . . </p>
Il y a d'autres façons de traduire l'essentiel de ce secteur. La seule vocation de ce secteur joue un rôle de délimitateur, ce en quoi tu peux choisir un background plus lumineux, sans pour autant choisir la même couleur que celui de l'entête. C'est qu'en fait nous ne sentons pas la fin de page. Il ne doit pas être le bas de page directement. C'est juste une suggestion ici.
Ce secteur est diviser en trois parties distincte l'une de l'autre. Ce qui évidemment te donne l'occasion de repenser la totalité du secteur afin d'augmenter visuellement ces trois sujets et de le fondre dans la totalité du document. Il s'agit des sujets : infos, formulaire et copyright. Une zone, trois sujets. Moi, personnellement, je repenserais (CSS) ce secteur afin d'augmenter sa visibilité et sa lisibilité.
Ce qu'il faut retenir de mes propositions : Il s'agit de suggestions uniquement.
1 ) Ne pas considérer que ce secteur soit le bas de page. J'ajouterais un bas de page sous ce secteur. Je tiens à le redire, nous ne sentons pas la fin de page. Comme si la balise de fin était manquante, en quelque sorte. Une voie sans issus.
2 ) Fondre ce secteur en visibilité avec le reste du document. Tout en restant séparer du contenu.
3 ) De grâce, diminuer son contraste avec le reste du document, augmenter sa lisibilité.
++ zardoz.
Modifié par zardoz (10 Jul 2010 - 04:35)
serait à mon avis une meilleur idée. Par le fait même une couleur gris claire ou blanc ou même vert.
C'est ce que je voulais dire par : Nous pouvons concevoir l'entête comme une balise ouvrante et le bas de page comme une balise fermante. etc. Nous n'oserions jamais écrire : <h3> . . . </p>
Il y a d'autres façons de traduire l'essentiel de ce secteur. La seule vocation de ce secteur joue un rôle de délimitateur, ce en quoi tu peux choisir un background plus lumineux, sans pour autant choisir la même couleur que celui de l'entête. C'est qu'en fait nous ne sentons pas la fin de page. Il ne doit pas être le bas de page directement. C'est juste une suggestion ici.
Ce secteur est diviser en trois parties distincte l'une de l'autre. Ce qui évidemment te donne l'occasion de repenser la totalité du secteur afin d'augmenter visuellement ces trois sujets et de le fondre dans la totalité du document. Il s'agit des sujets : infos, formulaire et copyright. Une zone, trois sujets. Moi, personnellement, je repenserais (CSS) ce secteur afin d'augmenter sa visibilité et sa lisibilité.
Ce qu'il faut retenir de mes propositions : Il s'agit de suggestions uniquement.
1 ) Ne pas considérer que ce secteur soit le bas de page. J'ajouterais un bas de page sous ce secteur. Je tiens à le redire, nous ne sentons pas la fin de page. Comme si la balise de fin était manquante, en quelque sorte. Une voie sans issus.
2 ) Fondre ce secteur en visibilité avec le reste du document. Tout en restant séparer du contenu.
3 ) De grâce, diminuer son contraste avec le reste du document, augmenter sa lisibilité.
++ zardoz.
Modifié par zardoz (10 Jul 2010 - 04:35)
C'est l'excellence.
Meilleur encore que celui de Max Design.
Un style similaire » Max Design
félicitation »
ÉDIT : Si tu me permet deux suggestions »
1 ) Ralentir ton application, en top-page : celui qui défile en horizontale de façon automatique. Beaucoup trop rapide. Et ce, même si au pointeur nous passons en mode manuel.
2 ) Augmenter le temps de pause dans la partie témoignages. Selon mon teste nous n'avons pas vraiment le temps de tout lire. Peut-être que tu pourrais le stopper lorsque le pointeur est dans la zone, et redémarrer lorsque le pointeur est en dehors de la zone. Ou bien offrir les deux modes, automatique et manuel. Comme bon te semble.
Par contre c'est le temps de lecture qui est le plus important ici.
++ zardoz.
Modifié par zardoz (12 Jul 2010 - 06:34)
Meilleur encore que celui de Max Design.
Un style similaire » Max Design
félicitation »
ÉDIT : Si tu me permet deux suggestions »
1 ) Ralentir ton application, en top-page : celui qui défile en horizontale de façon automatique. Beaucoup trop rapide. Et ce, même si au pointeur nous passons en mode manuel.
2 ) Augmenter le temps de pause dans la partie témoignages. Selon mon teste nous n'avons pas vraiment le temps de tout lire. Peut-être que tu pourrais le stopper lorsque le pointeur est dans la zone, et redémarrer lorsque le pointeur est en dehors de la zone. Ou bien offrir les deux modes, automatique et manuel. Comme bon te semble.
Par contre c'est le temps de lecture qui est le plus important ici.
++ zardoz.
Modifié par zardoz (12 Jul 2010 - 06:34)
Bonjour,
c'est mieux mais il y a encore quelques améliorations à apporter :
> Attention à ne pas mêler 2 couleurs très proches avec différent niveau de saturation, ça ne passe pas toujours très bien... (nom du libellé du menu et barre horizontale dessous)
> Le blanc cassé du footer passe mieux mais la séparation horizontale grise n'est pas très heureuse et trop épaisse (1px ou alors pas de filet séparateur).
Le fond des champs de saisi gagneraient à être en blanc.
Il faudrait séparer d'un filet horizontale le menu (mentions...) du reste du footer et descendre d'avantage celui-ci.
Attention aux contrastes texte/fond, tu n'as rien changé, or beaucoup de tes texte en manquent...
> Écarter ou supprimer le filet verts sous les titres, il sont actuellement trop collés
> Le choix d'un typo Serif tel que la Century Gothic pour les titre ne correspond pas du tout à l'esprit général du site, mieux vaut rester sur une typo de titrage (plus travaillée) sans-serif (voir du côté de Typekit pour intégrer ta propre police...)
> Le choix du JPEG pour ton logo n'est pas bon, on voit les dégradations sur l'emblème.
L'enregistrer en PNG paletted (par exemple en 5 bits > 32 couleurs).
> Il manque encore de l'espace au dessus du logo.
Modifié par Hermann (12 Jul 2010 - 17:18)
c'est mieux mais il y a encore quelques améliorations à apporter :
> Attention à ne pas mêler 2 couleurs très proches avec différent niveau de saturation, ça ne passe pas toujours très bien... (nom du libellé du menu et barre horizontale dessous)
> Le blanc cassé du footer passe mieux mais la séparation horizontale grise n'est pas très heureuse et trop épaisse (1px ou alors pas de filet séparateur).
Le fond des champs de saisi gagneraient à être en blanc.
Il faudrait séparer d'un filet horizontale le menu (mentions...) du reste du footer et descendre d'avantage celui-ci.
Attention aux contrastes texte/fond, tu n'as rien changé, or beaucoup de tes texte en manquent...
> Écarter ou supprimer le filet verts sous les titres, il sont actuellement trop collés
> Le choix d'un typo Serif tel que la Century Gothic pour les titre ne correspond pas du tout à l'esprit général du site, mieux vaut rester sur une typo de titrage (plus travaillée) sans-serif (voir du côté de Typekit pour intégrer ta propre police...)
> Le choix du JPEG pour ton logo n'est pas bon, on voit les dégradations sur l'emblème.
L'enregistrer en PNG paletted (par exemple en 5 bits > 32 couleurs).
> Il manque encore de l'espace au dessus du logo.
Modifié par Hermann (12 Jul 2010 - 17:18)
Bonjour,
Au niveau du formulaire de contact il y'a plusieurs problèmes je viens de le valider à vide sans aucun message d'erreur.
De plus dans le code je vois que des "label" existe mais à aucun moment ils ne sont visible.
En plus un label vide ça sert pas à grand chose.
Je ne suis pas très calé en javascript mais je suppose que le double label est là pour spécifier une erreur sur les champs obligatoires si ceux-ci ne sont pas rempli.
Pourquoi ne pas dès le départ afficher les "label" et spécifier visuellement l'astérisque et sa signification en début de formulaire ?
Des fois faire simple cela a du bon pour l'accessibilité et l'ergonomie.
Au niveau du formulaire de contact il y'a plusieurs problèmes je viens de le valider à vide sans aucun message d'erreur.
De plus dans le code je vois que des "label" existe mais à aucun moment ils ne sont visible.
En plus un label vide ça sert pas à grand chose.
Je ne suis pas très calé en javascript mais je suppose que le double label est là pour spécifier une erreur sur les champs obligatoires si ceux-ci ne sont pas rempli.
Pourquoi ne pas dès le départ afficher les "label" et spécifier visuellement l'astérisque et sa signification en début de formulaire ?
Des fois faire simple cela a du bon pour l'accessibilité et l'ergonomie.