[pro] hammhetfield.fr/yvonne10/ Tante Yvonne

Bonjour à tous

Je suis en ce moment en train de faire le site vitrine de ma mère qui vend de la broderie. J'ai terminé l'intégration et j'aimerai avoir vos retours. Pour le moment ce ne sont que 3 pages, je vais en faire un thème Wordpress, mais j'aimerai être sûr que tout est correct avant d'avoir des bouts de code éparpillés dans pleins de fichiers !

http://hammhetfield.fr/yvonne10/index.html

http://hammhetfield.fr/yvonne10/index.html

http://hammhetfield.fr/yvonne10/page.html


Avant tout, il y a des petites précisions à faire : les meta seront générées par Wordpress, elles ne sont donc pas présentes pour le moment, c'est normal.

Il y a une div avec des liens vers les différentes parties du design, celle-ci n'est pas complète, je viens de m'en rendre compte.



Sinon, j'ai fait en sorte que tout soit proprement affiché sous IE6 et plus, et j'ai utilisé du CSS3 qui ne passera pas, mais ce n'est pas grave, dans la plupart des cas ça ne fait pas trop moche, et il n'est pas fondamental que ça soit hyper beau sous IE6.

A vous ! (j'ai peur c'est ma première demande de critiques)

Bonjour,

Quelques remarques sur le design :
- sur fond marron (en-tête du site), le texte blanc ressort bien mieux que le texte rose, j'inverserait donc les couleurs pour donner plus d'importance au texte d'intro, voire je passerais tout en blanc
- le texte rose sur fond rose manque réellement de contraste, surtout les liens : sur mon pc je distingue à peine les effets hover/focus du lien au repos
- en fait soyons franc j'aime pas trop ce rose, il faudrait en prendre un plus pétant ou je sais pas... bon. attend l'avis d'un webdesigner ce sera plus sage Perso je trouve l'ensemble terne..

- dans tes pages statiques, tu as beaucoup de place ce qui donne de (trop) longues lignes de texte : pourquoi ne pas avoir laissé la sidebar ? ça permet en plus d'avoir toujours accès aux derniers articles et à la navigation par catégories et ça évite de briser le design du site selon que l'on navigue dans les pages ou dans les catégories

Coté xhtml :
- je ne pense pas qu'il soit justifié de mettre la recherche en titre de niveau 2
- "Tante Yvonne, les cadeaux personnalisés" pourrait être un h1 (et on remonte la hiérarchie de titres du contenu des articles)
- "voir la fiche" pourrait être dans un paragraphe (et une div de moins ! )
- pareil pour le siret

Côté css :
- quand j'ai vu le reset, j'ai eu peur du fameux outline:none mais non tout va bien
- le #acces pourrait ne pas être en display: none (ni en visibility:hidden, d'ailleurs voir du côté de js [ exemple pas trouvé très loin , voir ligne 20 ])

Côté future intégration Wordpress, juste un truc : je ne vois pas pourquoi tu intègre les métas lors de l'inté wp ? Tu utilise un plugin du genre all-in-one-seo-chose ou autre ? Parce que sinon autant les mettre avant pour être sûr de ne rien oublier (notamment la déclaration de la langue du document). Enfin perso ce n'est qu'après que je vais y mettre des marqueurs de modèles conditionnels pour optimiser mes métas. Tiens, mais d'ailleurs je vois que ton title est présent, donc si c'est pas pour du seo alors je vois pas pourquoi tu fais générer tes métas par wp !?
Modifié par audrasjb (31 Jul 2010 - 13:57)

Déjà merci pour ton message assez complet

Alors dans l'ordre :
Pour le texte blanc sur fond marron, je voulais principalement faire ressortir la recherche et pas le texte d'intro qui sera "plus ou moins" décoratif... Donc c'est voulu dans la hiérarchie de visibilité.

Pour le texte sur fond rose, je vais essayer d'augmenter le contraste alors, che zmoi ça passe assez bien, mais entre les différents écrans et réglages bref, je vais modifier ça.

Pour la couleur du rose euh... Maintenant que j'ai tout intégré, je vais laisser comme ça, en plus ça plait à ma mère, ça donne un côté assez doux limite vieux mais propre qui renforce le côté ancien de la broderie, mais à l'avenir je veillerai à choisir des couleurs peut être plus dynamiques.

Ca m'etonne que tu trouves l'ensemble terne, les quelques retours que j'ai eût sur le design étaient positifs et ne parlaient pas de... "ternitude" (hum hum) peut être une question de gout, ou encore une fois d'ecran, je ne sais pas.

Pour la page statique, celle ci ne servira que pour le formulaire de contact, même si je m'en suis servi pour l'intégration pour tester les différents éléments qui seront présents dans le design. Donc la longueur des lignes (128 car./ligne en moyenne, j'ai quand même vérifié et ça fait en gros 50 de trop) n'est pas réellement importante.

Et comme cette page servira surtout pour un formulaire, il est conseillé d'éviter les éléments perturbants supplémentaires (cf Web Form Filling The Blank de Luke Lewbrowsky, la référence en la matière). Et de toute façon il y aura un lien Catalogue (ou produits, à voir) dans la navigation principale pour pouvoir retourner directement au catalogue, donc la navigation secondaire est absente mais la navigation principale, notament vers le catalogue est présente

Le code maintenant :

Pour la recherche en h2 je sais pas, j'ai hésité, et au final je me suis dit "pourquoi pas"...

Pour le h1 sur les titres du corps, je suis d'accord avec toi, mais en même temps j'avais ouvert un sujet à ce propos... Si on respecte l'ordre alors dans l'ordre des titres, c'est correct, même si pour le SEO entre autre un h1 serait peut être mieux, bref pas vraiment de solution unique, j'ai choisi celle là, ça se discute surement...

pour "voir la fiche" euh... J'avais mis un p et j'ai changé, je ne me rapelle même plus pourquoi... Faudra que je regarde ça !

Pour le #acces, ça ne m'intéresse pas spécialement qu'il ne soit pas en display:none... Du moins je n'en vois pour le moment l'utilité, sinon j'aurai cherché une solution mais celle là me paraissait correcte et efficace.

POur les metas, oui je vais utilise all-in-one-seo (ou un équivalent)... Et pour les balises de titres, quand je créé un nouveau document la balise title est crée automatiquement avec Untitled, donc je préfère généralement l'ajouter, entre autre pour m'y repérer aussi dans les différents onglets dans mon navigateur




Sinon, l'avis de webdesigner est biensûr le bienvenue, mais sachez que je ne ferai pas de grosses modifications au design (sauf cas de faute de gout extrème passible de la peine de mort, mais j'aimerai éviter)... Je sais que c'est rageant de critiquer un design qui n'est pas modifié derrière donc ne vous sentez pas obligé. Mais si vous avez le temps, il y a de grandes chances que je puisse tirer de vos remarques des enseignements qui me seront utiles pour les prochaines fois

Ensuite, la question du h1 ou h2 m'intéresse particulièrement, on a là un cas pratique donc pour les experts de la sémantique, exprimez vous ^^

Encore merci de ton commentaire

Au sujet de ton bloc d'accès rapide, le display:none; est justement à éviter ! On tend à penser que les lecteurs d'écran ne l'interprètent pas. Or, la majorité d'entre eux interprètent cette propriété, ce qui revient au même que de ne pas avoir de menu d'accès rapide du tout ! D'ailleurs, le Groupe phpBB avaient eu à modifier la façon de cacher le lien d'évitement suite à un signalement par un non-voyant pour qui le display:none; lui cachait le lien, et celui-ci avait alors suggéré l'utilisation du positionnement absolu pour le cacher visuellement. J'ai fait ce même signalement au développeur de Connectix Boards lorsque celui-ci a présenté la bêta de la 1.0.

Au sujet des liens d'évitement :
http://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html

Au sujet du display:none :
http://www.alsacreations.com/article/lire/567-Remplacement-d-images-halte-au-display-none.html

Merci Ishimaru pour les liens...

Donc visiblement pour les utilisateurs de lecteurs d'écrans, ce n'est pas forcément utile... Dans ce cas je vais utiliser une autre méthode suggérée : les "cacher en CSS" en mettant la couleur du texte comme celle du fond, et ils seront visibles au hover. Comme ça pour la tabulation ça fonctionne bien, visuellement ça ne se voit pas ou presque (je ne l'avais pas prévu visible, là ça change les choses...), bref tout le monde est content !