Bonsoir à tous,

Actuellement, je travaille sur le site internet d'un fabricant de robes de mariées : www.anniecouture.fr .

Voici les choses que je vais faire afin de l'améliorer :
- Accueil : Slideshow (de ce type) afin de faire défiler les photos des meilleures robes (s'il y en a plus que 4)
- Collection : Mettre en place une pagination afin de faciliter le visionnage des photos et de ne pas paralyser les personnes ayant une vitesse de connexion faible
- Fiche détails de la robe : Insérer une popin qui ouvre la photo en plein écran avec possibilité de zoomer.

Je n'ai pas travailler les points suivants :
- la version mobile car la cliente n'en a pas demandé
- le référencement naturel (en cours)
- le visionnage du site sous ie6

Merci de m'avoir lu et j'attends avec plaisir toutes vos critiques Smiley smile
Modifié par fanny95 (10 Mar 2011 - 14:37)
Bonjour,

Le splash screen est totalement inutile et donne une image très ringard du site avant même de le voir ("y a encore des gens qui font des splash ?").

Les robes sont très belles, le site sobre les met plutôt bien en valeur, par contre (même si je ne pense pas que ce soit ta responsabilité, ça fait quand même partie du tout) les photos pas : elles sont trop "ternes", les quelques couleurs ne "flashent" pas, un peu de post-prod ne ferait pas de mal.

Dans les pages de contenu court, c'est un peu dérangeant d'avoir une sidebar aussi longue et pas de fond continu pour la zone de contenu, des colonnes factices rendrait mieux.

Il y a un bug d'affichage sur les fiches des robes, s'il y a plusieurs photos elles sortent de leur cadre (ajouter un overflow sur le cadre ?), idem pour la page "qui sommes nous", les images sortent du cadre (parfois, il faudrait, je pense rajouter les dimensions des images).

Le title est identique sur toutes les pages, c'est une très mauvaise pratique : 1. pour Google qui aime bien les titre et description de page différents et uniques ; 2. pour le visiteur qui voudrait bookmarquer plusieurs pages et qui ne saura plus les différencier.

Les mots clés en bas de page, c'est bien joli, mais ça n'apporte rien au visiteur et ça peut être considérer comme une technique de tentative de positionnement abusive Smiley ohwell

Pour le code, je me base sur la page « qui sommes nous » (il manque d’ailleurs un « ? ») :
* Il y a deux erreurs de code assez grave : alt non présents sur deux images porteuses de contenu très important.

* Tu ne précise pas la langue du document, il faut ajouter lang sur html et une meta Content-Language (sauf si le serveur envoie déjà cette information).

* Quel est l’intérêt de demander à IE8 et supérieurs de se comporter comme IE7 ? C’est totalement idiot de dire à un navigateur qui interprète presque correctement les CSS2 de ne pas le faire ! Si tu as des problèmes pour gérer les deux versions d’IE, il est préférable d’utiliser des commentaires conditionnels. Pour rappel : la meta X-UA-Compatible a été ajoutée pour faciliter la migration des vieux sites codés pour IE5.5 pas pour des sites tout neufs !

* Les scripts doivent, de préférence, être placés en fin de document.

* Il est dommage d’utiliser des styles en lignes alors que tu fais appel à une feuille de styles externe.

* Ta hiérarchie" rel="noopener" >http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html]hiérarchie des titres n’est pas correcte : elle commence à h2 alors qu’elle devrait commencer à h1 et ne pas comporter de sauts.

* J’étais dans le juste pour les dimensions d’images manquantes.

* Le alt d’une image doit reprendre le même contenu que celui porté par l’image. Sur l’image points-de-vente.jpg qui porte le texte « Recherche de magasin », le alt « Points de vente Annie Couture, en France et à l'étranger » n’est pas vraiment identique...

* Pou l’image robe-du-mois.jpg qui a pour texte alternatif : « Annie Couture, robe du moment – Alia », un alt vide serait préférable, en effet, toute l’information (sauf le « Annie Couture », qui ressemble fortement à une tentative de référencement/positionnement hasardeuse et abusive) se trouve dans le texte encadrant l’image. Le contenu du alt devient redondant.

* Les h3 du footer ne sont pas des h3, dans la hiérarchie actuelle de la page, ils sont des h2.

* Attention au mailto, c’est le meilleur moyen de récupérer du spam Smiley ohwell

Ce qui me dérange le plus dans ce code c’est le replacement de class par style sur les éléments (principalement flottants)...
Bonjour et merci pour tes critiques Smiley smile

La préhome, en effet, est inutile je te l'accorde. Elle n'apporte aucune information. A la base, la cliente voulait agrandir son logo sur le site, et le mettre encore plus gros. Je lui ai répondu que le logo devait respecter certaines dimensions. J'ai donc pensé à cette préhome. As-tu peux-être une idée pour éviter cela ?

Concernant les photos des robes, oui je ne peux rien y faire. Apparemment, elles auraient déjà été retouchées en post-prod avant que la cliente me les envoie. Peut-être un contour de couleur au lieu du gris clair arrangerait "un peu" le problème. Peut-être les mettre en plus grande également ?

Concernant les pages de contenu court, tu as tout à fait raison, je n'y avais plus pensé ! Les colonnes factices. Je vais voir ça au plus vite.

Pour la page fiche robe, je travaille encore dessus. Mais chez moi, je ne vois aucun bug d'affichage, pour cette page et pour la page qui sommes nous. Est-il possible que tu me fasses un imprim écran s'il te plait ?

Pour le title et les balises alt, meta, je le ferais en dernier. D'abord je préfère résoudre tous les problèmes d'affichage, de programmation. Ensuite je m'attaquerai au reste. Mais merci pour tes remarques pertinentes Smiley smile

Concernant les mots clés dans le footer, oui ça n'apporte rien à l'internaute. Mais je ne vois pas ce que je pourrais mettre à la place vu le peu de contenu du site Smiley decu

Concernant la balise meta suivante :
<meta content="IE=7" http-equiv="X-UA-Compatible" />

Je l'ai mise car cela réglait mon problème de bords arrondis sur ie8, sur les input. Mais j'avais d'autres idées, soit utiliser Jquery Corner, ou encore utiliser une balise <button> pour mes boutons submit "Rechercher".

a écrit :
* Il est dommage d’utiliser des styles en lignes alors que tu fais appel à une feuille de styles externe.

Je n'ai pas compris ta remarque. Concernant les styles que l'on retrouve dans les pages html, je compte passer le site au peigne fin afin de rendre le code css propre, et ainsi ne plus avoir de css dans le html, si c'est cela dont tu parles ?

Concernant la hiérarchie, je comptais mettre le <h1> derrière le logo. Ainsi, on aurait h1 pour le logo, h2 pour le titre de la page ainsi que ceux de la sidebar, puis en h3 ceux du footer.

a écrit :
* J’étais dans le juste pour les dimensions d’images manquantes.

Je n'ai pas compris ?

Merci pour l'info du mailto Smiley cligne

a écrit :
Ce qui me dérange le plus dans ce code c’est le replacement de class par style sur les éléments (principalement flottants)...

Je n'ai pas compris non plus.
Bonjour, j'ai navigué sur le site dans la peau d'une future cliente. Ce qui m'a beaucoup déçue c'est que les photos des modèles de robe ne puissent pas s'agrandir. J'aurais aimé les voir en plus grand.

fanny95 a écrit :
Concernant les mots clés dans le footer, oui ça n'apporte rien à l'internaute. Mais je ne vois pas ce que je pourrais mettre à la place vu le peu de contenu du site


La majorité de ces mots clés se retrouvent déjà dans le contenu de tes pages.
fanny95 a écrit :
La préhome, en effet, est inutile je te l'accorde. Elle n'apporte aucune information. A la base, la cliente voulait agrandir son logo sur le site, et le mettre encore plus gros. Je lui ai répondu que le logo devait respecter certaines dimensions. J'ai donc pensé à cette préhome. As-tu peux-être une idée pour éviter cela ?
Simplement supprimer le splash, explique à ta cliente que cette page est le meilleurs moyen pour que les visiteurs ne voient pas ses robes parce qu'ils quitteront le site avant.

fanny95 a écrit :
Pour la page fiche robe, je travaille encore dessus. Mais chez moi, je ne vois aucun bug d'affichage, pour cette page et pour la page qui sommes nous. Est-il possible que tu me fasses un imprim écran s'il te plait ?
Comme confirmé plus bas dans ma critique, il manque les dimensions des images, donc l'espace n'est pas réservé si les images se charge un peu tard, d'où un défaut d'affichage (et non je ne suis pas en mesure de faire de screen).

fanny95 a écrit :
Pour le title et les balises alt, meta, je le ferais en dernier. D'abord je préfère résoudre tous les problèmes d'affichage, de programmation. Ensuite je m'attaquerai au reste. Mais merci pour tes remarques pertinentes Smiley smile
Malheureusement, ce sont deux problèmes importants qui devraient être une priorité. Pour les titles, les pages sont accessibles aux robots, qui vont les indexer avec des titles identiques, cela risque de compliqué/retarder ton travail de référencement. Pour les alt, c'est surtout un problème d'accessibilité et de perte de contenu (pour le référencement, entre autre).

fanny95 a écrit :
Je n'ai pas compris ta remarque. Concernant les styles que l'on retrouve dans les pages html, je compte passer le site au peigne fin afin de rendre le code css propre, et ainsi ne plus avoir de css dans le html, si c'est cela dont tu parles ?
C'est de cela que je parlais.

fanny95 a écrit :
Concernant la hiérarchie, je comptais mettre le &lt;h1&gt; derrière le logo. Ainsi, on aurait h1 pour le logo, h2 pour le titre de la page ainsi que ceux de la sidebar, puis en h3 ceux du footer.
Pour le H1, pourquoi pas ; même si cela n'est pas tellement correct : il est préférable que le h1 se rapport au contenu de la page et pas juste au site. Par contre, comme déjà annoncé, les titres de ton footer sont des h2 et pas des h3
Mabelle a écrit :
Bonjour, j'ai navigué sur le site dans la peau d'une future cliente. Ce qui m'a beaucoup déçue c'est que les photos des modèles de robe ne puissent pas s'agrandir. J'aurais aimé les voir en plus grand.

Oui je travaille encore sur cette page. Elle n'est pas finit. Je comptais ajouter 2 choses :
- L'agrandissement de la photo dans une popin
- L'effet zoom comme ici afin de voir plus en détails
J'ai modifié certains points du site :
- Préhome supprimée
- Alt et title des images
- La structure des h1, h2...
- Les title différents à chaque page
- La pagination en jquery sur la page Collection
- L'effet zoom sur la page des robes (l'emplacement des images reste à revoir)
- Les mots clés du footer ont été remplacés par des informations de Contact : Adresse, mail et numéro de téléphone

Les changements futurs :
- Colonnes factices pour les pages ayant peu de contenu
- Page Points de vente : Rendre le formulaire plus agréable en utilisant l'ajax
- Page Fiche robe : Insérer une image semi transparante avec lien pour ouvrir l'image dans une nouvelle fenêtre

Sinon, concernant le design, est-ce qu'il y a d'autres critiques ?
Bonjour, je suis retournée voir tes modifications.

Concernant le design, est-ce normal que le pied de page de l'accueil ne se place pas au bas comme pour les autres pages ?

J'ai aussi testé l'effet zoom sur les photos. C'est vrai que cela nous permet de voir des détails mais je reste sur ma faim en ne voyant pas la photo au complet en plus gros.... De plus, le fonctionnement du script pour le zoom est long à charger et je me demande s'il n'y a pas lieu d'améliorer ça.
Bonjour
Niveau design je trouve que c'est un joli travail.
si je cherche la petite bête je dirais :

1 - ajoute pour tes liens ce genre de code a:active, a:focus { outline: none } ç évitera d'avoir un cadre en pointillé quand on clique.

2 - toujours pour les liens, je pense que ceux du footer ne se distinguent pas du texte classique et ceux de la sidebar n'ont pas d'effet :hover.

3 - J'aurais mis plus de padding dans les 2 blocks principaux.

4 - je pense que le footer serais plus joli si dans la partie "nous contactez" les testes étaient centrés par rapport aux icônes.

Mais je chipote ^
joska a écrit :
1 - ajoute pour tes liens ce genre de code a:active, a:focus { outline: none } ç évitera d'avoir un cadre en pointillé quand on clique.

Je garde ça question d'accessibilité, comme l'ont dit Lauraie-Anne et IshimaruChiaki, on aurait tort de ne pas le laisser pour ceux navigant au clavier.

joska a écrit :
2 - toujours pour les liens, je pense que ceux du footer ne se distinguent pas du texte classique et ceux de la sidebar n'ont pas d'effet :hover.

Je vais voir pour un effet :hover

joska a écrit :
4 - je pense que le footer serais plus joli si dans la partie &quot;nous contactez&quot; les testes étaient centrés par rapport aux icônes.

Oui je vais les centrer verticalement, je trouve que ça fera mieux !

a écrit :
C'est vrai que cela nous permet de voir des détails mais je reste sur ma faim en ne voyant pas la photo au complet en plus gros

J'ai trouvé un nouvel affichage qui permettrait de voir l'image principale, ses miniatures, et l'afficher en popin avec un fond semi opaque. Je vais le faire tout de suite. Espérons que cela convienne mieux aux espérances des internautes.
fanny95 a écrit :
Espérons que cela convienne mieux aux espérances des internautes.


Ce n'est pas pour les espérances des internautes mais pour les clients potentiels de ta cliente ! Le but c'est de rendre le site le plus convivial possible pour donner envie aux clients d'acheter le produit. Smiley cligne
Ho non pas la fouet !
Attention je dis juste que outline c'est très moche. il suffit de rajouter un autre effet à la place.
Voilà ce que dit l'article sur alsa
a écrit :

Mon client ne trouve pas cela esthétique

Deux solutions existent pour conserver ce mécanisme intact tout en l'intégrant à une charte graphique :

1. habiller l'outline sur les états :active et :focus des liens
2. habiller les états :active et :focus des liens d'une manière plus générale avec d'autres propriétés de style

L'intérêt d'utiliser la deuxième solution est la marge de manœuvre plus importante pour le rendu graphique car il est alors possible d'agir sur plusieurs caractéristiques du lien :

* le soulignement
* les bordures
* la couleur
* la couleur de fond
* la graisse

Voilà ce que dit le w3c

a écrit :

7.3. Focus Navigation
An implementing host language MUST provide support for the author to make all interactive elements focusable, that is, any renderable or event-receiving elements.


outline est la propriété par défaut. Rien n'empêche de la modifier.
Je ne comprend pas votre réaction. Je n'ai vu nul part qu'il fallait obligatoirement garder outline
Modifié par joska (19 Jan 2011 - 14:11)
Oui, si le focus et le hover sont remplacer il est possible de supprimer l'outline (qui est hyper discret, faut arrêter avec le côté moche) MAIS, tu as juste conseillé de supprimer l'outline ce qui mérite le fouet.
Mea culpa.
C'est vrai, ça me semblait tellement évident que je ai indiqué uniquement la propriété à annuler.
C'est pas que ça soit super moche mais c'est plus joli dans la cas d'un lien dans un h1 avec un text-indent négatif, un menu un peu stylisé, un logo ou autre.
Mais c'est surtout d'un point de vu professionnel que ça peut poser problème. Exactement l'exemple dans l'article Alsa.
Le client est roi et si il trouve que c'est moche et bin alors c'est moche.
a écrit :
Ce n'est pas pour les espérances des internautes mais pour les clients potentiels de ta cliente ! Le but c'est de rendre le site le plus convivial possible pour donner envie aux clients d'acheter le produit.


J'ai mis à jour la page Collection en y insérant une pagination en Jquery, ce qui permet de ne pas avoir 60 robes d'un coup, mais seulement un affichage de 8 robes maximum.

J'ai également mis à jour la fiche des robes. On peut y voir les miniatures, ainsi que la photo en agrandit lors du clique sur celle-ci.

Personnellement je trouve ça beaucoup mieux ! Qu'en penses-tu ?
Modifié par fanny95 (06 Mar 2011 - 22:35)
C'est nettement mieux mais j'ai désactivé le javascript pour visualiser la photo dans la grandeur maximum... Smiley cligne Je suis maintenant satisfaite. Smiley ravi
Tu n'avais pas besoin de désactiver le javascript pour afficher la photo en taille réelle. Une fois que la photo s'agrandit (avec le fond semi opaque noir), tu as une icône + pour l'afficher en taille réelle, l'option est nommée en haut comme "plein écran".
Ah oui, je n'avais pas vu.

Ça prouve qu'il manque des informations pour bien naviguer. Ce ne sont pas tous les internautes qui comprendront comment fonctionne le script.