3240 sujets
Critiques de vos sites: code et design
Salut,
Rapidement :
* 18 erreurs rencontrées par le validateur du W3C sur la page d'accueil (même si c'est du HTML 5, c'est beaucoup) ;
* évite de rafraîchir la page (qui plus est, toutes les 30 secondes) : c'en devient vite pénible en pleine lecture (et encore plus quand on doit utiliser un lecteur d'écran parce qu'on est dyslexique ou malvoyant) ;
* deux métas charset de suite, avec un codage déclaré différent ;
* la méta robots est inutile, puisqu'elle utilise les valeurs par défaut ;
* les métas keywords et revisit-after ne sont plus prises en compte par les moteurs de recherche et sont donc inutiles ;
* la méta author est tout aussi inutile ;
* le message d'avertissement à l'attention des utilisateurs d'IE 6 et 7 comporte une erreur : les utilisateurs d'IE 7 apprendront que ce dernier date de 2001, alors qu'il est sorti en 2006 (5 ans après IE 6) ;
* évite d'employer des paragraphes contenant des espaces insécables (<p> </p>) : utilise les CSS pour augmenter les marges ;
* la hiérarchie des titres de section est à revoir : je ne vois que des h3 ;
* le premier commentaire conditionnel ciblant IE (if IE) pour charger le script permettant la prise en compte du HTML 5 fait doublon avec le second (if lt IE 9) et est d'autant plus inutile qu'IE 9 prend nativement en charge les nouveaux éléments HTML 5 ;
* tu fais appel à deux scripts différents pour faire passer la pilule du HTML 5 à IE 8 et versions inférieures (html5shiv, avec une URL tronquée, et un script html5.js évoquant lui aussi html5shiv) : il faut choisir ;
* il est préférable de regrouper les feuilles de styles en un seul fichier CSS (sauf pour les feuilles de style conditionnelles apportant les correctifs pour telle(s) version(s) d'IE) ;
* il est préférable de placer les scripts plusone.js et Google Analytics à la fin, juste avant la balise de fermeture </body>, pour améliorer les performances (d'ailleurs, la page d'accueil met un peu de temps à se charger) ;
* j'aperçois un <link rel="stylesheet" href="http://www.goetter.fr/styles-ie6.css" /> : as-tu demandé à Raphaël l'autorisation d'utiliser sa feuille de styles pour IE 6 ?
Bref, il y a encore du pain sur la planche.
Rapidement :
* 18 erreurs rencontrées par le validateur du W3C sur la page d'accueil (même si c'est du HTML 5, c'est beaucoup) ;
* évite de rafraîchir la page (qui plus est, toutes les 30 secondes) : c'en devient vite pénible en pleine lecture (et encore plus quand on doit utiliser un lecteur d'écran parce qu'on est dyslexique ou malvoyant) ;
* deux métas charset de suite, avec un codage déclaré différent ;
* la méta robots est inutile, puisqu'elle utilise les valeurs par défaut ;
* les métas keywords et revisit-after ne sont plus prises en compte par les moteurs de recherche et sont donc inutiles ;
* la méta author est tout aussi inutile ;
* le message d'avertissement à l'attention des utilisateurs d'IE 6 et 7 comporte une erreur : les utilisateurs d'IE 7 apprendront que ce dernier date de 2001, alors qu'il est sorti en 2006 (5 ans après IE 6) ;
* évite d'employer des paragraphes contenant des espaces insécables (<p> </p>) : utilise les CSS pour augmenter les marges ;
* la hiérarchie des titres de section est à revoir : je ne vois que des h3 ;
* le premier commentaire conditionnel ciblant IE (if IE) pour charger le script permettant la prise en compte du HTML 5 fait doublon avec le second (if lt IE 9) et est d'autant plus inutile qu'IE 9 prend nativement en charge les nouveaux éléments HTML 5 ;
* tu fais appel à deux scripts différents pour faire passer la pilule du HTML 5 à IE 8 et versions inférieures (html5shiv, avec une URL tronquée, et un script html5.js évoquant lui aussi html5shiv) : il faut choisir ;
* il est préférable de regrouper les feuilles de styles en un seul fichier CSS (sauf pour les feuilles de style conditionnelles apportant les correctifs pour telle(s) version(s) d'IE) ;
* il est préférable de placer les scripts plusone.js et Google Analytics à la fin, juste avant la balise de fermeture </body>, pour améliorer les performances (d'ailleurs, la page d'accueil met un peu de temps à se charger) ;
* j'aperçois un <link rel="stylesheet" href="http://www.goetter.fr/styles-ie6.css" /> : as-tu demandé à Raphaël l'autorisation d'utiliser sa feuille de styles pour IE 6 ?
Bref, il y a encore du pain sur la planche.
Bonjour,
Code non valide.
Truc qui bouge, trop vite pour une lecture confortable, et impossible à arrêter.
Meta refresh totalement inutile (vous comptez faire des mise à jour ultra importantes toutes les 30 secondes ?).
Mauvaise déclaration d'encodage des caractères.
Très mauvaise gestion de la justification.
Positionnement à coup de .
Code redondant (sur les commentaires conditionnels, par exemple).
Hiérarchie des titres incorrecte.
...
Il y a, effectivement, encore du boulot.
Code non valide.
Truc qui bouge, trop vite pour une lecture confortable, et impossible à arrêter.
Meta refresh totalement inutile (vous comptez faire des mise à jour ultra importantes toutes les 30 secondes ?).
Mauvaise déclaration d'encodage des caractères.
Très mauvaise gestion de la justification.
Positionnement à coup de .
Code redondant (sur les commentaires conditionnels, par exemple).
Hiérarchie des titres incorrecte.
...
Il y a, effectivement, encore du boulot.
Salut,
Tu as eu des remarques complètes sur le code pas besoin de revenir dessus.
Voici quelques compléments:
- le slider est bien trop rapide, à mon avis tu as intégré un script tout fait, rends-toi dans les js pour changer la vitesse. Faudrait le stopper ou mettre une pause à un moment.
- Ça scrolle horizontalement sur mon notebook ! C'est mal venu parce que tu te positionnes sur le créneau Android donc il va falloir faire du responsive design impérativement.
- vérifie quand même si tu as le droit d'utiliser les images des blackberry et HTC.
- tu parles à juste titre de charte graphique, en as-tu une pour ton site?
Bon courage.
Modifié par jmlapam (18 Oct 2011 - 14:40)
Tu as eu des remarques complètes sur le code pas besoin de revenir dessus.
Voici quelques compléments:
- le slider est bien trop rapide, à mon avis tu as intégré un script tout fait, rends-toi dans les js pour changer la vitesse. Faudrait le stopper ou mettre une pause à un moment.
- Ça scrolle horizontalement sur mon notebook ! C'est mal venu parce que tu te positionnes sur le créneau Android donc il va falloir faire du responsive design impérativement.
- vérifie quand même si tu as le droit d'utiliser les images des blackberry et HTC.
- tu parles à juste titre de charte graphique, en as-tu une pour ton site?
Bon courage.
Modifié par jmlapam (18 Oct 2011 - 14:40)
jb_gfx a écrit :
Il faut prévenir Raphaël qu'il a fait une erreur.
Je n'ai pas remarqué qu'il a aussi pompé ce message d'avertissement sur le site perso de Raphaël. Bien joué !
Bref, j'ose espérer que les réalisations de l'agence dont il est question ne sentent ni la contrefaçon ni le copié-collé...
jmlapam a écrit :
C'est mal venu parce que tu te positionnes sur le créneau Android donc il va falloir faire du responsive design impérativement.
Si je consulte le site sur mon smartphone (sous Opera Mobile), je constate, en effet, qu'aucun effort d'adaptation de la mise en page n'a été fait. Bref, je ne vais pas m'amuser sans cesse avec le zoom pour lire le contenu, d'autant moins que je connais des agences Web qui font un tel effort et le font bien (bref, de quoi aller voir ces concurrents).
Modifié par Victor BRITO (18 Oct 2011 - 15:25)
Victor BRITO a écrit :
il a aussi pompé ce message d'avertissement sur le site perso de Raphaël.
Déjà ça part vraiment mal,
Victor BRITO a écrit :
je connais des agences Web qui font un tel effort et le font bien (bref, de quoi aller voir ces concurrents).
Elles s'y mettent toutes parce qu'elles ont compris qu'il y a un marché: l' "Android marché"! Je crois pas qu'il puisse les concurrencer pour l'instant.
Modifié par jmlapam (18 Oct 2011 - 15:50)
Victor BRITO a écrit :
* le message d'avertissement à l'attention des utilisateurs d'IE 6 et 7 comporte une erreur : les utilisateurs d'IE 7 apprendront que ce dernier date de 2001, alors qu'il est sorti en 2006 (5 ans après IE 6) ;
#######################
Effectivement, j'ai récupérer le code de chez Raphaël en ce qui concerne, la compatibilité des navigateurs, je crois qu'il l'autorise, sur une des pages de son site web ou dans les tutos réalisés sur alsacréations, il la mentionné. Je compter reprendre le site avec un CMS (Joomla ou wordpress) je suis actuelement les vidéos de Lynda.Com Essential Training pour ces deux CMS.
Il est vrai qu'il y a du boulot.
Merci encore pour toutes vos suggestions et n'hésitez pas à faire d'autres propositions.
Bien amicalement,
kiar86
Modifié par kiar86 (18 Oct 2011 - 16:14)
* le message d'avertissement à l'attention des utilisateurs d'IE 6 et 7 comporte une erreur : les utilisateurs d'IE 7 apprendront que ce dernier date de 2001, alors qu'il est sorti en 2006 (5 ans après IE 6) ;
#######################
Effectivement, j'ai récupérer le code de chez Raphaël en ce qui concerne, la compatibilité des navigateurs, je crois qu'il l'autorise, sur une des pages de son site web ou dans les tutos réalisés sur alsacréations, il la mentionné. Je compter reprendre le site avec un CMS (Joomla ou wordpress) je suis actuelement les vidéos de Lynda.Com Essential Training pour ces deux CMS.
Il est vrai qu'il y a du boulot.
Merci encore pour toutes vos suggestions et n'hésitez pas à faire d'autres propositions.
Bien amicalement,
kiar86
Modifié par kiar86 (18 Oct 2011 - 16:14)
jmlapam a écrit :
Salut,
Tu as eu des remarques complètes sur le code pas besoin de revenir dessus.
Voici quelques compléments:
- le slider est bien trop rapide, à mon avis tu as intégré un script tout fait, rends-toi dans les js pour changer la vitesse. Faudrait le stopper ou mettre une pause à un moment.
- Ça scrolle horizontalement sur mon notebook ! C'est mal venu parce que tu te positionnes sur le créneau Android donc il va falloir faire du responsive design impérativement.
- vérifie quand même si tu as le droit d'utiliser les images des blackberry et HTC.
- tu parles à juste titre de charte graphique, en as-tu une pour ton site?
Bon courage.
Pour la charte graphique, si j'en est réalisé une dernièrement, et pour les autorisations d'utilisation des images BlackBerry et HTC, d'après ce que je sais il faut utiliser des images net, non déformées qui représente bien la marque.
kiar86 a écrit :
Effectivement, j'ai récupérer le code de chez Raphaël en ce qui concerne, la compatibilité des navigateurs, je crois qu'il l'autorise, sur une des pages de son site web ou dans les tutos réalisés sur alsacréations, il la mentionné.
Si tu me donnes le lien vers la page mentionnant une telle autorisation, je suis prêt à aller vérifier.
kiar86 a écrit :
et pour les autorisations d'utilisation des images BlackBerry et HTC, d'après ce que je sais il faut utiliser des images net, non déformées qui représente bien la marque.
Une telle méconnaissance du droit d'auteur me laisse perplexe...
Victor BRITO a écrit :
Si tu me donnes le lien vers la page mentionnant une telle autorisation, je suis prêt à aller vérifier.
Une telle méconnaissance du droit d'auteur me laisse perplexe...
, Je suis respectueux des droits d'auteurs et je ne rentrerais pas dans ce débat stérile, ce n'est pas le but de ce sujet. Vous pouvez allez voir sur les différents tutoriels qui traite du HTML5 et du CSS3 qu'il a rédigé sur Alsacréations. Mais merci, de me rappeler ces détails très important dans l'univers du web. Je lui enverrais un mail pour confirmation tout de même.Merci encore.
Modifié par kiar86 (18 Oct 2011 - 20:21)
Bonjour,
Concernant le message d'avertissement pour IE6, voici l'article en question où Raphael invite les gens à s'inspirer de son message de son site personnel : Osez HTML5 et CSS3!
Je cite :
Concernant le message d'avertissement pour IE6, voici l'article en question où Raphael invite les gens à s'inspirer de son message de son site personnel : Osez HTML5 et CSS3!
Je cite :
a écrit :
N'hésitez pas à consulter le code source HTML de Goetter.fr pour vous inspirer du message d'avertissement proposé.
kiar86 a écrit :
et pour les autorisations d'utilisation des images BlackBerry et HTC, d'après ce que je sais il faut utiliser des images net, non déformées qui représente bien la marque.
Hein?
Méfie-toi, j'ai creusé un petit peu la question, je ne suis jamais tombé sur ce genre d'autorisation, a fortiori pour une utilisation commerciale.EDIT: c'est de cela dont parlait Victor d'ailleurs.
Modifié par jmlapam (18 Oct 2011 - 20:33)
Tony Monast a écrit :
Bonjour,
Concernant le message d'avertissement pour IE6, voici l'article en question où Raphael invite les gens à s'inspirer de son message de son site personnel : Osez HTML5 et CSS3!
Je cite :
N'hésitez pas à consulter le code source HTML de Goetter.fr pour vous inspirer du message d'avertissement proposé.
D'inspirer à copier il n'y a que quelques touches, malheureusement le raccourci CTRL/POMME + I ne fonctionne pas sur mon clavier.
Blague à part, avec ce message de Raphaël, kiar86 mérite largement le bénéfice du doute.
Tout à fait, merci. Raphaël Goetter a réalisé une astuce qui me plait bien parce que les soucis de compatibilité des navigateurs web sont contraignantes. Et ce système de vérification et de notification, aux utilisateurs de navigateurs obsolètes, va surtout pousser les divers visiteurs à utiliser des navigateurs web récents. Il y va de leur sécurité sur la toile. 
Modifié par kiar86 (18 Oct 2011 - 20:59)
Modifié par kiar86 (18 Oct 2011 - 20:59)
jmlapam a écrit :
Hein?
EDIT: c'est de cela dont parlait Victor d'ailleurs.
D'accord, je vais creuser le sujet des diverses autorisations concernant les droits d'utilisation des divers logos et illustrations de mobiles de marques.
Merci pour ces remarques jmlapam, très importante aussi.
Modifié par kiar86 (18 Oct 2011 - 21:07)
Juste pour ma part, je trouve ça bizarre pour une agence Web de venir demander des conseils sur ce forum.
De plus, on ne voit aucune mention légale ? Agence Web, ah vous êtes combien ? Numéro de SIRET ? A moins que je les ai ratées, mais ça n'inspire pas confiance, en plus d'un design très austère et simpliste.
Ensuite, les URL type "services.php", il serait bien de montrer que tu connais l'URL rewriting et ce genre de choses.
De plus, on ne voit aucune mention légale ? Agence Web, ah vous êtes combien ? Numéro de SIRET ? A moins que je les ai ratées, mais ça n'inspire pas confiance, en plus d'un design très austère et simpliste.
Ensuite, les URL type "services.php", il serait bien de montrer que tu connais l'URL rewriting et ce genre de choses.
vincentD83 a écrit :
Juste pour ma part, je trouve ça bizarre pour une agence Web de venir demander des conseils sur ce forum.
De plus, on ne voit aucune mention légale ? Agence Web, ah vous êtes combien ? Numéro de SIRET ? A moins que je les ai ratées, mais ça n'inspire pas confiance, en plus d'un design très austère et simpliste.
Ensuite, les URL type "services.php", il serait bien de montrer que tu connais l'URL rewriting et ce genre de choses.
J'en prend note, c'est juste une ébauche du site, Je vais le reprendre. Mais à humble avis je crois que cela facile l'indexation des pages.
Modifié par kiar86 (18 Oct 2011 - 22:30)
kiar86 a écrit :
Tout à fait, merci. Raphaël Goetter a réalisé une astuce qui me plait bien parce que les soucis de compatibilité des navigateurs web sont contraignantes. Et ce système de vérification et de notification, aux utilisateurs de navigateurs obsolètes, va surtout pousser les divers visiteurs à utiliser des navigateurs web récents. Il y va de leur sécurité sur la toile.
Le principal souci est que les utilisateurs d'IE 6 sont principalement ceux qui utilisent un parc informatique d'une grosse société administré par des administrateurs réseau qui ne permettent pas d'installer un autre navigateur ou des DSI ayant déployé des programmes développés il y a quelques années et uniquement compatibles avec IE 6. Et dans ce genre d'infrastructure, la moindre mise à jour s'avère un parcours du combattant. Laurie-Anne peut en témoigner.
vincentD83 a écrit :
Juste pour ma part, je trouve ça bizarre pour une agence Web de venir demander des conseils sur ce forum.
De plus, on ne voit aucune mention légale ? Agence Web, ah vous êtes combien ? Numéro de SIRET ? A moins que je les ai ratées, mais ça n'inspire pas confiance, en plus d'un design très austère et simpliste.
L'agence Web en question se présente comme basée à Cotonou, qui, sauf erreur de ma part, est la capitale du Bénin. Il est donc peu probable qu'on y sache ce qu'est un numéro SIRET. Cela dit, il est toujours recommandé pour une entreprise d'afficher son numéro d'enregistrement, ainsi que des mentions légales indiquant qui est responsable de quoi. Enfin, si la loi du pays l'y oblige...
Modifié par Victor BRITO (19 Oct 2011 - 00:17)