3239 sujets
Critiques de vos sites: code et design
Bonjour à tous,
Avant une refonte prévue du contenu du site (ajout de nouvelles section notamment).
J'aimerai fixer définitivement (enfin pour quelques mois du moins) le design.
J'ai donc refait une version du design, plus clair, plus sobre, que je trouve plus pro, mais j'aimerai avoir votre avis!
Merci d'avance!
Avant une refonte prévue du contenu du site (ajout de nouvelles section notamment).
J'aimerai fixer définitivement (enfin pour quelques mois du moins) le design.
J'ai donc refait une version du design, plus clair, plus sobre, que je trouve plus pro, mais j'aimerai avoir votre avis!
Merci d'avance!
zardoz a écrit :
Le header/référencement ?
C'est dû au fait que le nom de l'entreprise fait partie du jpg|png. Par le fait même le « bot » ne prendra pas en considération le nom de l'entreprise : C'est une image tout simplement.
Seules les citations seront pris en considération, mais sans avantage réel pour le référencement. Disons que le nom de l'entreprise devrait avoir priorité sur les citations.
Il est peut-être déclarer en entête de document <meta />, mais il ne sera pas placer en h1 dans le corps du document. Comprend aussi que je ne suis pas tout à fait qualifier quand on parle de référencement. Mais moi perso je titre en h1 le nom des sujets ne fait plus partie de l'image (jamais), même si le référencement ne m'intéresse pas.
Il peut très bien garder l'image, mais à condition qu'il corrige son alt="" qui est pour le moment très mal rempli. Si l'image ne peut pas s'afficher ou être vu, on n'a que "header" qui s'affiche, ce qui ne donne AUCUNE idée sur le site où l'on est !
D'où l'importance à remplir alt="" avecun texte IDENTIQUE au contenu de l'image ! Cela signifie donc que le texte approprié à mettre est "Conseil thermique" !
Pour aller plus loin, je vais proposer une structure plus appropriée pour l'en-tête, sémantiquement et ergonomiquement parlant.
Voici l'en-tête tel qu'il est :
<div id="entete">
<a href="http://conseil-thermique.servhome.org/contenu/page_accueil.php"><img src="http://conseil-thermique.servhome.org/contenu/images/header.jpg" alt="header"/></a>
</div> Voici la modification que je propose :
<h1 id="entete">
<a href="http://conseil-thermique.servhome.org/contenu/page_accueil.php"><img src="http://conseil-thermique.servhome.org/contenu/images/header.jpg" alt="Conseil Thermique"/></a>
</h1> Donc nul besoin d'utiliser un div pour l'en-tête si la charte graphique n'exige pas de conteneurs supplémentaires (webdesign élaboré, header avec bloc de connexion, etc.).
Le bloc de citation aurait eu mieux sa place dans un élément <blockquote>, qui est justement fait pour indiquer une citation. Et comme les autres l'ont dit, fais attention aux citations qui font deux lignes, car chez moi (Win XP SP3 - Chrome - 1024*768), quand ça fait deux lignes, le bas de la deuxième ligne dépasse de la bannière, ce qui tombe dans le blanc, donc problème de lisibilité.
Euh...
<div id="ligne">
<p><br /></p>
</div> Très mauvaise pratique... un <hr /> aurait suffi. Si c'est le stylage qui pose problème, il me semble qu'il y a un tutoriel là-dessus quelque part.
Les titres de menus latéraux auraient dû être structurés avec des balises <h2>
C'est aussi dommage de ne pas utiliser les listes aussi pour les menus latéraux...
Avec mes propositions, je te recommande d'enlever "Accueil" dans le corps (pas vraiment utile, je l'aurais vu dans un fil d'ariane, qui dans ce cas se structure mieux dans un <p>) et d'utiliser <h3> plutôt que <h2> pour "Bienvenue sur Conseils thermique", pour rester cohérent.
Pourquoi je te dis tout ça ? Teste...
- en débranchant le style (sous Firefox : Affichage > Style > Aucun style).
- avec HTML5 Outliner pour ta hiérarchie de titres : http://gsnedders.html5.org/outliner/
- Et finalement, en mode texte avec Lynx (il existe un portage Windows de ce navigateur texte brut), pour voir comment un bot Google voit ton site.
Bonjour/Bonsoir IshimaruChiaki,
Tout d'abord merci beaucoup!
Alors alors...
J'ai changé l'en-tête comme tu l'avais suggéré
Je ne connaissais pas la balise hr, c'est chose faite.
Je n'ai pas mis les menu latéraux avec des h2, je vois pas trop l'intérêt, à la limite les mettre en h3 pourquoi pas, mais pour moi sur la page, ce qu'il y a de plus important c'est le contenu et pas les menu annexes.
J'ai mis des listes pour le menu de gauche
Peux tu faire un screen de ton problème des citations? (que j'ai mis en blockquote en passant) parce que j'ai la même taille d'écran et avec chrome j'ai pas le problème...
Tout d'abord merci beaucoup!
Alors alors...
J'ai changé l'en-tête comme tu l'avais suggéré
Je ne connaissais pas la balise hr, c'est chose faite.
Je n'ai pas mis les menu latéraux avec des h2, je vois pas trop l'intérêt, à la limite les mettre en h3 pourquoi pas, mais pour moi sur la page, ce qu'il y a de plus important c'est le contenu et pas les menu annexes.
J'ai mis des listes pour le menu de gauche
Peux tu faire un screen de ton problème des citations? (que j'ai mis en blockquote en passant) parce que j'ai la même taille d'écran et avec chrome j'ai pas le problème...
Salut à toi, voici qq points négatifs à mon sens:
-alignement de certains paragraphes à revoir
-trop compact, on étouffe un peu
-sautillement des pages à la navigation
-tes sous-menus, on ne les distingue pas assez, tu pourrais mettre une couleur pour que l'on sache sur quoi on se rend.
-faut revoir la couleur dans le header et le footer, sur le fond vert cela ne rend pas très bien, pas très lisible.
-scroll horizontal sur mon notebook
-les images pourraient bénéficier d'ombres CSS3 pour les faire ressortir
-une toute petite erreur sur la page d'accueil (un </p> qui traîne)
-la meta keywords est blindée de mots-clé mais c'est plus ce qui booste le référencement, les moteurs en tiennent beaucoup moins compte parce que ce sont devenus des réservoirs à SPAM.
-ta hiérarchie de titres : on passe de H1 à H3.
Mais aussi qq points positifs:
-le sitemap est sympa.
-logo sympa
-contenus riches et intéressants
-alignement de certains paragraphes à revoir
-trop compact, on étouffe un peu
-sautillement des pages à la navigation
-tes sous-menus, on ne les distingue pas assez, tu pourrais mettre une couleur pour que l'on sache sur quoi on se rend.
-faut revoir la couleur dans le header et le footer, sur le fond vert cela ne rend pas très bien, pas très lisible.
-scroll horizontal sur mon notebook
-les images pourraient bénéficier d'ombres CSS3 pour les faire ressortir
-une toute petite erreur sur la page d'accueil (un </p> qui traîne)
-la meta keywords est blindée de mots-clé mais c'est plus ce qui booste le référencement, les moteurs en tiennent beaucoup moins compte parce que ce sont devenus des réservoirs à SPAM.
-ta hiérarchie de titres : on passe de H1 à H3.
Mais aussi qq points positifs:
-le sitemap est sympa.
-logo sympa
-contenus riches et intéressants
Merci jmlapam en réponse à tout les points abordés :
-alignement de certains paragraphes à revoir
--> Je vais essayer un ligne height un peu plus important
-trop compact, on étouffe un peu
-->Idem
-sautillement des pages à la navigation
-->je vois pas ce que tu veux dire, ni comment le résoudre
-tes sous-menus, on ne les distingue pas assez, tu pourrais mettre une couleur pour que l'on sache sur quoi on se rend.
-->C'est-à-dire? Changer la couleur du hover?
-faut revoir la couleur dans le header et le footer, sur le fond vert cela ne rend pas très bien, pas très lisible.
-->Je vais changer la couleur du texte, c'est vrai que ça ressort pas assez
-scroll horizontal sur mon notebook
-->J'ai du mal à comprendre pourquoi mais je vais voir ça
-les images pourraient bénéficier d'ombres CSS3 pour les faire ressortir
-->Je vais tester
-une toute petite erreur sur la page d'accueil (un </p> qui traîne)
-->Réglé
-la meta keywords est blindée de mots-clé mais c'est plus ce qui booste le référencement, les moteurs en tiennent beaucoup moins compte parce que ce sont devenus des réservoirs à SPAM.
-->C'est vrai que je pourrais l'enlever
-ta hiérarchie de titres : on passe de H1 à H3.
-->Uniquement pour l'accueil
Merci beaucoup
Modifié par Sylverdragon (13 Sep 2011 - 23:57)
-alignement de certains paragraphes à revoir
--> Je vais essayer un ligne height un peu plus important
-trop compact, on étouffe un peu
-->Idem
-sautillement des pages à la navigation
-->je vois pas ce que tu veux dire, ni comment le résoudre
-tes sous-menus, on ne les distingue pas assez, tu pourrais mettre une couleur pour que l'on sache sur quoi on se rend.
-->C'est-à-dire? Changer la couleur du hover?
-faut revoir la couleur dans le header et le footer, sur le fond vert cela ne rend pas très bien, pas très lisible.
-->Je vais changer la couleur du texte, c'est vrai que ça ressort pas assez
-scroll horizontal sur mon notebook
-->J'ai du mal à comprendre pourquoi mais je vais voir ça
-les images pourraient bénéficier d'ombres CSS3 pour les faire ressortir
-->Je vais tester
-une toute petite erreur sur la page d'accueil (un </p> qui traîne)
-->Réglé
-la meta keywords est blindée de mots-clé mais c'est plus ce qui booste le référencement, les moteurs en tiennent beaucoup moins compte parce que ce sont devenus des réservoirs à SPAM.
-->C'est vrai que je pourrais l'enlever
-ta hiérarchie de titres : on passe de H1 à H3.
-->Uniquement pour l'accueil
Merci beaucoup
Modifié par Sylverdragon (13 Sep 2011 - 23:57)
Sylverdragon a écrit :
-sautillement des pages à la navigation
-->je vois pas ce que tu veux dire, ni comment le résoudre
-tes sous-menus, on ne les distingue pas assez, tu pourrais mettre une couleur pour que l'on sache sur quoi on se rend.
-->C'est-à-dire? Changer la couleur du hover?
-scroll horizontal sur mon notebook
-->J'ai du mal à comprendre pourquoi mais je vais voir ça
Pour les sous-menus, quand ils apparaissent, il n'y a rien pour les distinguer à la navigation, c'est pour cela que je te suggère une couleur de background par exemple.
Pour le sautillement, cela est peut-être du à ma largeur d'écran, toujours est-il que cela est présent. Pour le scroll horizontal, cela est du même acabit. Je pense que la solution passe par les media queries.
Modifié par jmlapam (13 Sep 2011 - 19:51)
Plus de scroll horizontal, c'est good !
En revanche le orange dans le header, non, essaie avec du blanc.
Les sous-menus sont plus gros que les menus
Toujours cet aspect un peu trop compact et des différences d'alignement.
Sinon pour ton footer, il se redécale vers le haut donc 2 solutions:
- soit tu mets ton parent en position relative et le footer en absolu avec un bottom 0
- soit tu mets un margin-top sur le footer et un padding-top sur le parent pour pousser le footer en bas jusqu'à ce que cela colle.
Modifié par jmlapam (14 Sep 2011 - 00:50)
En revanche le orange dans le header, non, essaie avec du blanc.
Les sous-menus sont plus gros que les menus
Toujours cet aspect un peu trop compact et des différences d'alignement.
Sinon pour ton footer, il se redécale vers le haut donc 2 solutions:
- soit tu mets ton parent en position relative et le footer en absolu avec un bottom 0
#conteneur {
position:relative;
}
#footer{
position: absolute;
bottom:0;
}
- soit tu mets un margin-top sur le footer et un padding-top sur le parent pour pousser le footer en bas jusqu'à ce que cela colle.
Modifié par jmlapam (14 Sep 2011 - 00:50)
Je fais juste passé » Sylverdragon.
Permet moi de te féliciter de tous les progrès que tu connais. Depuis le bing bang initial de ton site.
surpris ! - C'était fou à l'époque : : faut admettre non 
?
Moi j'aime visiter et apprendre
Merci pour tes propos : judicieux conseils. IshimaruChiaki.
De QC à ce que je vois. Les terres du Nord Est ?
..
Modifié par zardoz (14 Sep 2011 - 05:17)
Permet moi de te féliciter de tous les progrès que tu connais. Depuis le bing bang initial de ton site.
surpris ! - C'était fou à l'époque : : faut admettre non ?Moi j'aime visiter et apprendre
Merci pour tes propos : judicieux conseils. IshimaruChiaki.
De QC à ce que je vois. Les terres du Nord Est ?
..
Modifié par zardoz (14 Sep 2011 - 05:17)
Bonjour à tous,
@jmlapam :
J'ai changé la couleur du menu et ajusté la taille des sous-menus
Le footer c'était juste que j'avais mis un padding:10px; sur le dernier lien.
Où vois-tu des problèmes d'alignements par exemple?
Pour la compacité, peut-être fais-tu référence au topic "gestes simples" qui est un des premiers que j'ai fait et qui va bientôt être remplacé
@zardoz :
Content que ça te plaise aussi bien niveau design que contenu apparemment
Non j'admets pas J'aurai du faire des screens pour voir la différence, ça aurait été drôle!
@jmlapam :
J'ai changé la couleur du menu et ajusté la taille des sous-menus
Le footer c'était juste que j'avais mis un padding:10px; sur le dernier lien.
Où vois-tu des problèmes d'alignements par exemple?
Pour la compacité, peut-être fais-tu référence au topic "gestes simples" qui est un des premiers que j'ai fait et qui va bientôt être remplacé
@zardoz :
Content que ça te plaise aussi bien niveau design que contenu apparemment
Non j'admets pas
J'aurai du faire des screens pour voir la différence, ça aurait été drôle! Salutation Sylverdragon »
J'aimerais savoir si JQuery t'intéresse. Tu pourras faire des choses nouvelles. À la hauteur du header disons. Logo, différents textes et barre navigationnelle. Comme en un bloc. Réactif.
Non je dis ces choses parce que tu semble avoir quelques difficultés avec la présentation du header, vérifier sous différents navigateurs. JQuery peut être une technologie de pointe. Ici évidemment je fais mention de la barre navigationnelle. En particulier.
Que la barre navigationnelle sois au niveau du header est une bonne idée. Maintenant encore faut-il rendre la barre très accèssible. Présentation et utilisation dans le sens ergonomique du terme.
Ce qu'il faut comprendre d'une barre navigationnelle c'est son utilisation. Dans ton cas spécifique, la barre navigationnelle nous donnent une profondeur (menus et sous menus). Et cette profondeur est importante ici. L'utilisation de ta barre de navigation laisse un goût amer. Je n'aime pas que l'ouverture d'un sous-menu cache un menu.
C'est surtout sous IE8 que je doute le plus.
..
J'aimerais savoir si JQuery t'intéresse. Tu pourras faire des choses nouvelles. À la hauteur du header disons. Logo, différents textes et barre navigationnelle. Comme en un bloc. Réactif.
Non je dis ces choses parce que tu semble avoir quelques difficultés avec la présentation du header, vérifier sous différents navigateurs. JQuery peut être une technologie de pointe. Ici évidemment je fais mention de la barre navigationnelle. En particulier.
Que la barre navigationnelle sois au niveau du header est une bonne idée. Maintenant encore faut-il rendre la barre très accèssible. Présentation et utilisation dans le sens ergonomique du terme.
Ce qu'il faut comprendre d'une barre navigationnelle c'est son utilisation. Dans ton cas spécifique, la barre navigationnelle nous donnent une profondeur (menus et sous menus). Et cette profondeur est importante ici. L'utilisation de ta barre de navigation laisse un goût amer. Je n'aime pas que l'ouverture d'un sous-menu cache un menu.
C'est surtout sous IE8 que je doute le plus.
..
Oui Jquery m'intéresse mais j'ai pas le temps de m'y consacrer vraiment
Tu dois avoir un écran peu large pour que le menu soit obligé de se mettre sur 2 lignes et qu'effectivement, certains sous-menus cachent des menus pour un écran standard (15") il n'y a pas de problèmes à ce niveau là.
Je me trompe?
Dans tout les cas, quel effet Jquery me conseillerais-tu? Cela ne ralentit-il pas trop le chargement de la page? Est-ce compatible avec tous les navigateurs? (pas de if IE, etc...)
Tu dois avoir un écran peu large pour que le menu soit obligé de se mettre sur 2 lignes et qu'effectivement, certains sous-menus cachent des menus pour un écran standard (15") il n'y a pas de problèmes à ce niveau là.
Je me trompe?
Dans tout les cas, quel effet Jquery me conseillerais-tu? Cela ne ralentit-il pas trop le chargement de la page? Est-ce compatible avec tous les navigateurs? (pas de if IE, etc...)
Bon d'accord que la résolution joue un rôle.
Cependant j'ai aussi vérifier avec FF. De toute façon je vérifie encore, et je te tiens au courant. Il se peut qu'il y aura quelques ajustements dans mes propos.
Je te suggère JQuery. Comme pensée au début, mais qui pourra sûrement être utile. Ciblé au niveau du header par exercice. Question de voir si JQuery peut être utile dans ton cas.
Moi je pense sincèrement que ça devrait être utile. Ouvrir ou fermer la zone navigationnelle. La rendre accessible tant au niveau esthétique qu'ergonomique. Surtout ergonomique. Dans ton cas, je crois que tu as beaucoup de chose à dire. Donc repenser la barre des navigations.
J'espère aussi que pour toi, « ergonomie » veut dire, « science du confort ». Le confort dans l'utilisation. Un des gestes les plus fréquenter, de la part de l'utilisateur. Sois au clavier, sois à la souris.
..
Modifié par zardoz (14 Sep 2011 - 18:51)
Cependant j'ai aussi vérifier avec FF. De toute façon je vérifie encore, et je te tiens au courant. Il se peut qu'il y aura quelques ajustements dans mes propos.
Je te suggère JQuery. Comme pensée au début, mais qui pourra sûrement être utile. Ciblé au niveau du header par exercice. Question de voir si JQuery peut être utile dans ton cas.
Moi je pense sincèrement que ça devrait être utile. Ouvrir ou fermer la zone navigationnelle. La rendre accessible tant au niveau esthétique qu'ergonomique. Surtout ergonomique. Dans ton cas, je crois que tu as beaucoup de chose à dire. Donc repenser la barre des navigations.
J'espère aussi que pour toi, « ergonomie » veut dire, « science du confort ». Le confort dans l'utilisation. Un des gestes les plus fréquenter, de la part de l'utilisateur. Sois au clavier, sois à la souris.
..
Modifié par zardoz (14 Sep 2011 - 18:51)
Je vois que tu comprends en fin de compte.
Oui en effet l'ergonomie ainsi que l'architecture devront trouvez preneurs.
En fait tu peux dès maintenant comprendre l'utilisation de la barre des navigations de la part des utilisateurs. Cette barre des navigations est extrêmement !importante. C'est cette barre qui permet une navigation en profondeur et ce, (vers les rubriques). Mais c'est tellement !important.
Le Header est vraiment un « fragment ». Tu devras donc le considérer comme tel. Avec j'imagine toutes les technologies accèssibles. Dont JQuery. Fiable, directe et efficace. Surtout lorsque bien écrit.
J'ai vu que tu placais un CC (creative common).
Peux-tu développer davantage sur le sujet s.v.p
?
..
Modifié par zardoz (14 Sep 2011 - 18:53)
Oui en effet l'ergonomie ainsi que l'architecture devront trouvez preneurs.
En fait tu peux dès maintenant comprendre l'utilisation de la barre des navigations de la part des utilisateurs. Cette barre des navigations est extrêmement !importante. C'est cette barre qui permet une navigation en profondeur et ce, (vers les rubriques). Mais c'est tellement !important.
Le Header est vraiment un « fragment ». Tu devras donc le considérer comme tel. Avec j'imagine toutes les technologies accèssibles. Dont JQuery. Fiable, directe et efficace. Surtout lorsque bien écrit.
J'ai vu que tu placais un CC (creative common).
Peux-tu développer davantage sur le sujet s.v.p
?..
Modifié par zardoz (14 Sep 2011 - 18:53)
Sylverdragon a écrit :
Où vois-tu des problèmes d'alignements par exemple?
Pour la compacité, peut-être fais-tu référence au topic "gestes simples" qui est un des premiers que j'ai fait et qui va bientôt être remplacé
Page d'accueil: le bloc des annonces google est décalé vers la gauche.
Dans tes colonnes de gauche et de droite, les écritures touchent les lignes de séparation.
Les sous-menus sont mieux
Alors alors...
Pour les problèmes d'alignement :
C'est vrai que je me suis pas trop penché sur le bloc adsense parce qu'il était pas sensé rester mais je vais faire en sorte qu'il soit mieux intégrer
Pour les menus verticaux....ça se complique...déjà le problème apparaît que pour les petits écrans.
Si je mets un min-width ça risque de faire un scroll barre sauf si je combine ça avec un @media dans ce cas là c'est peut-être jouable.(je me suis déjà servit pour cacher le bloc adsense justement quand le screen est trop petit (vu qu'on peut pas toucher la largueur des pubs... vive l'intégration chez google))
Pour le CC (creative Commun) c'est basé sur le droit de reproduction. N'importe quoi fait par quelqu'un a un droit de reproduction (sans même avoir de copyright).
C'est pour éviter que certains sites commerciaux du secteur de l'énergie, copie-colle mes articles comme c'est assez courant de le voir.
Après l'aspect juridique pur et dur m'intéresse pas nécessairement, c'est surtout pour décourager.
Pour le header, c'est juste du temps pour faire un joli et pratique menu, mais ça va pas tarder à ce que je m'y mettes
En tout cas merci à tous les deux
Modifié par Sylverdragon (14 Sep 2011 - 20:00)
Pour les problèmes d'alignement :
C'est vrai que je me suis pas trop penché sur le bloc adsense parce qu'il était pas sensé rester mais je vais faire en sorte qu'il soit mieux intégrer
Pour les menus verticaux....ça se complique...déjà le problème apparaît que pour les petits écrans.
Si je mets un min-width ça risque de faire un scroll barre sauf si je combine ça avec un @media dans ce cas là c'est peut-être jouable.(je me suis déjà servit pour cacher le bloc adsense justement quand le screen est trop petit (vu qu'on peut pas toucher la largueur des pubs... vive l'intégration chez google))
Pour le CC (creative Commun) c'est basé sur le droit de reproduction. N'importe quoi fait par quelqu'un a un droit de reproduction (sans même avoir de copyright).
C'est pour éviter que certains sites commerciaux du secteur de l'énergie, copie-colle mes articles comme c'est assez courant de le voir.
Après l'aspect juridique pur et dur m'intéresse pas nécessairement, c'est surtout pour décourager.
Pour le header, c'est juste du temps pour faire un joli et pratique menu, mais ça va pas tarder à ce que je m'y mettes
En tout cas merci à tous les deux
Modifié par Sylverdragon (14 Sep 2011 - 20:00)