3239 sujets
Critiques de vos sites: code et design
Bonsoir,
Dans une première approche.
La balise meta keyword ne sert à rien pour le référencement ; par contre, pour la géolocalisation, vous en avez une autre :
Attention aux multiplication des balises h1 : pour le référencement il est préférable de n'en avoir qu'une seule par page. Et notament pour la page d'accueil nous devrions avoir ceci :
L'image sera référencée par les moteurs de recherche dans la mesure où elle est équipée d'un alt, ce qui est votre cas. Vous remarquerez au passage que j'ai supprimé de ce alt la mention "logo" pour ne laisser que "maître Arnaud".
Dans une première approche.
La balise meta keyword ne sert à rien pour le référencement ; par contre, pour la géolocalisation, vous en avez une autre :
<meta name="geo.placename" content="Lyon, Rhône, France">Attention aux multiplication des balises h1 : pour le référencement il est préférable de n'en avoir qu'une seule par page. Et notament pour la page d'accueil nous devrions avoir ceci :
<h1><img src="images/sandrinearnaud.png" alt="maître Arnaud"><h1>L'image sera référencée par les moteurs de recherche dans la mesure où elle est équipée d'un alt, ce qui est votre cas. Vous remarquerez au passage que j'ai supprimé de ce alt la mention "logo" pour ne laisser que "maître Arnaud".
C'est sobre et élégant. Le code semble très propre.
Par contre, deux choses me gênent :
1. Le menu de haut en bas (avec vos différents domaines d'activité) est très peu visible: beige sur gris, police petite et fine.
2. L'organisation est difficilement compréhensible (un menu horizontal et un menu vertical, textes qui s'ouvrent dans différentes parties de l'interface.)
Bravo en tout cas.
Par contre, deux choses me gênent :
1. Le menu de haut en bas (avec vos différents domaines d'activité) est très peu visible: beige sur gris, police petite et fine.
2. L'organisation est difficilement compréhensible (un menu horizontal et un menu vertical, textes qui s'ouvrent dans différentes parties de l'interface.)
Bravo en tout cas.
Merci Olivier pour les conseils de référencement notamment. Il est vrai que j'ai mis le site en ligne il y a déjà plusieurs semaine avant de le finaliser et qu'il est toujours dans les profondeurs du classement. Je vais suivre vos conseils immédiatement. Par contre, pourquoi la balise meta keyword ne sert-elle à rien?
Merci à Muchos pour les compliments. Ca fait toujours très plaisir et c'est surtout encourageant pour la suite. Concernant les remarques à propos de l'ergonomie, qui me semble justifié, le problème est que le design spécifique mis en place ne me laisse pas beaucoup de marge de manœuvre pour les modifications...
Merci à Muchos pour les compliments. Ca fait toujours très plaisir et c'est surtout encourageant pour la suite. Concernant les remarques à propos de l'ergonomie, qui me semble justifié, le problème est que le design spécifique mis en place ne me laisse pas beaucoup de marge de manœuvre pour les modifications...
Bonjour,
- Quelques erreurs dans votre code, le validateur est votre ami
- Pas de "version adaptative" ?
- Je trouve l'ensemble un peu confiné, limite austère, avec vos choix de positionnement et de structuration, même si ce n'est pas désagréable à regarder, le sérieux de la profession sans doute ?
C'est quand même tout "riquiqui" sur mon grand écran
- Votre texte d'accroche sous le logo, ressemble à s'y méprendre à votre menu, sans doute vaudrait-il mieux les différencier davantage que par l'utilisation de grandes capitales, sans réelle valeur ajoutée à mon humble avis.
- Si tous les liens de votre menu doivent avoir la même classe ("lien1"), autant ne pas utiliser de classe et styler directement les balises de liens, non ? Idem pour vos paragraphes "textepaveor"...
(à ce propos, l'utilisation d'un identifiant est unique au sein de la même page)
- Les blocks de déco ("ligneblanche","ligneblanchevert") doivent pouvoir être générés autrement non ?
Pas fan de l'utilisation de l'image en fin de contenu, le changement de police arrive un peu comme un cheveu sur la soupe
- C'est "propre", mais ça manque un peu de "fantaisie" à mon goût, notamment sur l'utilisation des polices de caractère, la "respiration" de l'information, mais ça ne reste que mon avis, et c'est déjà du bon travail
ps : J'aime bien ce petit logo du conseil national des barreaux
- Quelques erreurs dans votre code, le validateur est votre ami
- Pas de "version adaptative" ?
- Je trouve l'ensemble un peu confiné, limite austère, avec vos choix de positionnement et de structuration, même si ce n'est pas désagréable à regarder, le sérieux de la profession sans doute ?
C'est quand même tout "riquiqui" sur mon grand écran
- Votre texte d'accroche sous le logo, ressemble à s'y méprendre à votre menu, sans doute vaudrait-il mieux les différencier davantage que par l'utilisation de grandes capitales, sans réelle valeur ajoutée à mon humble avis.
- Si tous les liens de votre menu doivent avoir la même classe ("lien1"), autant ne pas utiliser de classe et styler directement les balises de liens, non ? Idem pour vos paragraphes "textepaveor"...
(à ce propos, l'utilisation d'un identifiant est unique au sein de la même page)
- Les blocks de déco ("ligneblanche","ligneblanchevert") doivent pouvoir être générés autrement non ?
Pas fan de l'utilisation de l'image en fin de contenu, le changement de police arrive un peu comme un cheveu sur la soupe
- C'est "propre", mais ça manque un peu de "fantaisie" à mon goût, notamment sur l'utilisation des polices de caractère, la "respiration" de l'information, mais ça ne reste que mon avis, et c'est déjà du bon travail
ps : J'aime bien ce petit logo du conseil national des barreaux
Bonjour,
Je partage l'avis de 6l20. C'est du bon travail. Ce site est élégant mais trop austère. Il faut humaniser et dédramatiser l'activité d'avocat. Le vert kaki trop terne et foncé ne ressort pas assez sur le gris (le texte est difficile à lire en vert sur gris et réciproquement. Là si je passe le site en noir et blanc, je constaterai un manque évident de contrastes entre les deux couleurs.).
Il faut apporter des contrastes dans ce gros pavé compact pour le décloisonner et le rendre plus vivant, dynamique et moderne.
Les lignes verticales blanches au second étage m'évoquent plus des barreaux de prison qu'une composition à la Mondrian. Leur régularité sans doute. J'enlèverai les deux lignes blanches verticales de droite au second niveau ? Pour laisser respirer les photos et décloisonner un peu.
La phrase "Avocat au Barreau de Besançon" ne devrait pas être coupée. Elle peut être écrit en plus petit dans une typo classique. Cette typo manuscrite pour signaler une info aussi basique, c'est un peu étrange.
Je pense aussi qu'il y a un souci avec les typos de menu qui se confondent avec celle de la baseline sous le nom (pourquoi pas la même couleur que le nom ?).
Il faut apporter de la fraîcheur et de la vie dans ce site. Plusieurs pistes comme remplacer ce vert kaki par une couleur plus franche, plus vive et plus fraîche (à tester avec une couleur vraiment pêchu !?). Et peut-être remplacer le gris foncé par un gris très clair et neutre, du coup ça trancherait moins avec le fond blanc, c'est à tester en tout cas.
Les photos pourraient rester teintée façon bichromie mais si le vert est remplacé ça devrait les réveiller, ou bien leur laisser les couleurs et les teinter seulement en partie ?
Les photos accentuent la froideur du site. On est dans une ambiance carcérale. Des photos d'avantages axées sur "l'humain" ou les services pourraient trouver leur place parmi ces photos de pierres. On peut faire institutionnel et accessible.
Le bloc du bas pourrait être plus décalé ? Des éléments déplacés sous le bloc de contenu (Mentions légales…) pour contribuer à décloisonner ce site très imbriqué.
M.A.J. :
Une autre idée serait d'adapter la hauteur des mises en page intérieures en fonction du contenu (en variant la hauteur du second niveau). Cela permettrai de vous libérer de cet espace confiné. Certains fonds pourraient rester blanc. Avec du gris clair dans les blocs colorés on pourrait ainsi avoir une mise en page plus ouverte, moins cloisonnée dans ce bloc. C'est une option, à choisir ou pas, mais au moins à tester ?
Aussi il faut décoller les textes des bords et laisser un contour de respiration (blanc tournant).
Voilà pour moi.
En attendant la suite
Modifié par spongebrain (12 Jun 2013 - 14:55)
Je partage l'avis de 6l20. C'est du bon travail. Ce site est élégant mais trop austère. Il faut humaniser et dédramatiser l'activité d'avocat. Le vert kaki trop terne et foncé ne ressort pas assez sur le gris (le texte est difficile à lire en vert sur gris et réciproquement. Là si je passe le site en noir et blanc, je constaterai un manque évident de contrastes entre les deux couleurs.).
Il faut apporter des contrastes dans ce gros pavé compact pour le décloisonner et le rendre plus vivant, dynamique et moderne.
Les lignes verticales blanches au second étage m'évoquent plus des barreaux de prison qu'une composition à la Mondrian. Leur régularité sans doute. J'enlèverai les deux lignes blanches verticales de droite au second niveau ? Pour laisser respirer les photos et décloisonner un peu.
La phrase "Avocat au Barreau de Besançon" ne devrait pas être coupée. Elle peut être écrit en plus petit dans une typo classique. Cette typo manuscrite pour signaler une info aussi basique, c'est un peu étrange.
Je pense aussi qu'il y a un souci avec les typos de menu qui se confondent avec celle de la baseline sous le nom (pourquoi pas la même couleur que le nom ?).
Il faut apporter de la fraîcheur et de la vie dans ce site. Plusieurs pistes comme remplacer ce vert kaki par une couleur plus franche, plus vive et plus fraîche (à tester avec une couleur vraiment pêchu !?). Et peut-être remplacer le gris foncé par un gris très clair et neutre, du coup ça trancherait moins avec le fond blanc, c'est à tester en tout cas.
Les photos pourraient rester teintée façon bichromie mais si le vert est remplacé ça devrait les réveiller, ou bien leur laisser les couleurs et les teinter seulement en partie ?
Les photos accentuent la froideur du site. On est dans une ambiance carcérale. Des photos d'avantages axées sur "l'humain" ou les services pourraient trouver leur place parmi ces photos de pierres. On peut faire institutionnel et accessible.
Le bloc du bas pourrait être plus décalé ? Des éléments déplacés sous le bloc de contenu (Mentions légales…) pour contribuer à décloisonner ce site très imbriqué.
M.A.J. :
Une autre idée serait d'adapter la hauteur des mises en page intérieures en fonction du contenu (en variant la hauteur du second niveau). Cela permettrai de vous libérer de cet espace confiné. Certains fonds pourraient rester blanc. Avec du gris clair dans les blocs colorés on pourrait ainsi avoir une mise en page plus ouverte, moins cloisonnée dans ce bloc. C'est une option, à choisir ou pas, mais au moins à tester ?
Aussi il faut décoller les textes des bords et laisser un contour de respiration (blanc tournant).
Voilà pour moi.
En attendant la suite
Modifié par spongebrain (12 Jun 2013 - 14:55)
OK... j'avais demandé de la critique constructive, je suis servi!!!
Si vous le voulez bien, compte tenu du nombre de remarques, je m’attaquerai dans un premier temps à la structure avant de revoir le design.
- erreur dans le code : j'ai bien une erreur sur la ligne de declaration jquery mais je ne vois pas ce qui ne va pas
- version adaptative : je ne sais pas du tout comment faire. Connaissez vous un tuto?
- ça m’intéresserait vraiment de savoir quelle est la bonne procédure pour générer des blocs déco
- id et class : exact, je m'en occupe. C'était au tout début et c'était presque mon premier site.
Merci!
Si vous le voulez bien, compte tenu du nombre de remarques, je m’attaquerai dans un premier temps à la structure avant de revoir le design.
- erreur dans le code : j'ai bien une erreur sur la ligne de declaration jquery mais je ne vois pas ce qui ne va pas
- version adaptative : je ne sais pas du tout comment faire. Connaissez vous un tuto?
- ça m’intéresserait vraiment de savoir quelle est la bonne procédure pour générer des blocs déco
- id et class : exact, je m'en occupe. C'était au tout début et c'était presque mon premier site.
Merci!
Validez vos pages une à une (je ne sais pas pourquoi ça ne montre pas toutes les erreurs 
) mais il y en a d'autres (rien de très grave non plus )
- Le js avant la balise de fermeture body pas après
- La section Apprendre dispose de quelques bons articles sur le sujet, Stéphanie Walter vient également de faire un très bon état des lieux, et votre moteur de recherches vous fournira également de précieuses ressources concernant la "version adaptative"
- Dans ce cas précis, vous n'avez pas besoin de blocs supplémentaires pour faire une démarcation entre vos blocs, une marge devrait pouvoir suffire (votre fond de page est blanc...).
Sinon, du contenu généré avant/après vos blocs.
Utiliser l'existant sans rajouter de superflus me semble une bonne démarche pour faire "du décoratif" (quand cela reste relativement simple bien évidement).
Bon courage
) mais il y en a d'autres (rien de très grave non plus )- Le js avant la balise de fermeture body pas après
- La section Apprendre dispose de quelques bons articles sur le sujet, Stéphanie Walter vient également de faire un très bon état des lieux, et votre moteur de recherches vous fournira également de précieuses ressources concernant la "version adaptative"
- Dans ce cas précis, vous n'avez pas besoin de blocs supplémentaires pour faire une démarcation entre vos blocs, une marge devrait pouvoir suffire (votre fond de page est blanc...).
Sinon, du contenu généré avant/après vos blocs.
Utiliser l'existant sans rajouter de superflus me semble une bonne démarche pour faire "du décoratif" (quand cela reste relativement simple bien évidement).
Bon courage
robin25 a écrit :
Par contre, pourquoi la balise meta keyword ne sert-elle à rien?
À cause de son utilisation abusive par les webmasters. Google prétend même ne jamais l'avoir utilisé. Aujourd'hui encore beaucoup de "pros" mettent cette balise dans leur sites... Tout cela est une histoire de compétence.
robin25 a écrit :
le problème est que le design spécifique mis en place ne me laisse pas beaucoup de marge de manœuvre pour les modifications...
Et notamment pour le responsive design. Mais bon, pour un premier site c'est un bon début.
OK c'est noté. bonne info.
Je veux juste préciser que je ne ferai pas trop de modifs design, même si j'ai apprécié toutes les remarques, car le client est satisfait (ça compte quand même!!!).
Au final, j'aurai quand même épuré le code (je vais encore faire un passage à la validation et il reste quelques div superflus à traiter), j'ai pris en compte pas mal de réflexions pour le design de mes prochains sites, et j'en ai même profité pour mettre en place quelques includes PHP pour de prochaines modifs plus faciles. j'ai aussi appris des choses intéressantes au niveau du référencement (meta et importance des h1).
merci à vous.
Je veux juste préciser que je ne ferai pas trop de modifs design, même si j'ai apprécié toutes les remarques, car le client est satisfait (ça compte quand même!!!).
Au final, j'aurai quand même épuré le code (je vais encore faire un passage à la validation et il reste quelques div superflus à traiter), j'ai pris en compte pas mal de réflexions pour le design de mes prochains sites, et j'en ai même profité pour mettre en place quelques includes PHP pour de prochaines modifs plus faciles. j'ai aussi appris des choses intéressantes au niveau du référencement (meta et importance des h1).
merci à vous.
Une toute petite remarque : sur ma machine, sous IE 10, "PERSONNES - PATRIMOINE" ne tient pas sur une ligne. "PATRIMOINE" est donc à peine lisible à cheval entre le bloc de menu et celui d'en dessous.
Je sais qu'Internet Explorer n'est pas le navigateur le plus apprécié mais il reste très utilisé.
Même problème sous Windows Phone, où là c'est l'ensemble "PERSONNES - PATRIMOINE" qui se retrouve en dessous du bloc de menu.
Mais pour le coup, il n'y a pas bcp d'utilisateurs ^^
(Aucun souci, avec chrome et Firefox sur PC à ce sujet)
Je sais qu'Internet Explorer n'est pas le navigateur le plus apprécié mais il reste très utilisé.
Même problème sous Windows Phone, où là c'est l'ensemble "PERSONNES - PATRIMOINE" qui se retrouve en dessous du bloc de menu.
Mais pour le coup, il n'y a pas bcp d'utilisateurs ^^
(Aucun souci, avec chrome et Firefox sur PC à ce sujet)
robin25 a écrit :
Je veux juste préciser que je ne ferai pas trop de modifs design, même si j'ai apprécié toutes les remarques, car le client est satisfait (ça compte quand même!!!).
Dommage car il y aurait pas mal de choses à améliorer, à commencer la désolidarisation du la zone utile du fond blanc qui donne un aspect vieillot à l'ensemble.
D'autre part on a un peu l'impression de tomber sur une devanture stylée art déco de vieilles antiquités et les zones identitaires (Maitre... Sandrine) auraient dues être rassemblées en un seul bloc.
Un choix de typo assez peu adapté pour Avocat au barreau de.. si l'effte de signature n'est pas recherché...
Des problème évidents de contraste (menu vertical + mentions légales)
Etc
Olivier C a écrit :Nooon, surtout pas ! légende urbaine qu'est ceci ^^.
Attention aux multiplication des balises h1 : pour le référencement il est préférable de n'en avoir qu'une seule par page. Et notament pour la page d'accueil nous devrions avoir ceci :
HTML5 introduit une nouvelle méthode pour définir l'outliner d'un site. Les élément tel article, section, header et footer réninitialise la hiéarchie des titres. Je te conseil de passer ton site à l'outliner HTML5 tu verras ce que je veux dire. Le référencement ne va pas à l'encontre de cette pratique (et encore bien ^^).
Modifié par Gili (18 Jun 2013 - 12:53)