[PRO] pluspresdevous.fr

Bonjour,

Je suis sur le point de finir le site d'une coiffeuse à domicile (mon premier client )
Je souhaite le soumettre à vos critiques concernant :
- l'ergonomie.
- l'apparence (même si je colle aux demandes de la cliente et que cela reste grandement subjectif).
- la qualité du code.
- la sémantique.

L'ensemble est valide

Celui-ci n'est pas encore référencé.

Pour ie6/7, je rédige actuellement une feuille css pour les transparences des png.
La mise en page à l'air correcte d'après mes tests sur une vm XP/ie6, mais sans la transparence des png c'est juste horrible.

/!\ Le site n'est pas encore terminé, merci de votre indulgence quant à la mise en page de certaines rubriques /!\

pour la visite c'est par ici

Merci de m'avoir lu.

* EDIT *

Travaux à faire (dans le désordre) :
- Optimisation du border-radius sur Opéra
- Affiner l'overflow:hidden sur firefox
- Finir la mise en place des pages "présentation", "mentions légales" et "Crédits"
- Retouche de la mise en page sous IE6/7 et prise en charge png
- Gérer le text-shadow via .htc pour ie9
- Mieux gérer les erreurs php du formulaire de contact
- Se renseigner sur les transitions FF & IE9
- Optimiser la feuille de style

--- intégration ---
- Ajout d'un blog simple
- intégration du script php Gallery pour création du "Book"
- Ajout d'un "Livre d'or"
Modifié par fufu (04 Apr 2011 - 01:49)

Bonjour,

Visuellement, c'est très sympa, mais un peu sombre.

Pour le code :
* Il manque une meta Content-Language.

* Une meta Decription bien remplie pourrait être utile, étant donné qu'il y a peu de contenu sur la page (d'accueil, du moins).

* <span> ne devrait pas être utilisé hors d'un conteur porteur de sens (typiquement <p>), certes, ça n'invalide pas le code, mais ce n'est pas des plus "sémantique".

* Le div #navigation ne sert à rien, l'ID pourrait être appliqué à l'ul.

* Les étoiles ne nécéssitent pas leur div propre, elles aurait pu être placées en font de #header, #logo ou même du <h1>.

* "Extraits de la carte" est une façon bien trop étrange de dire "Mes prestations". Personnellement, ça me dérange car il m'a fallu du temps pour comprendre (avec le reste du code) que non ce n'était pas un "restaurant de coiffure".

* La hiérarchie des titres est incorrecte : tu pas de h2 à h4, sans h3 entre.

* le <q> n'est pas vraiment approprié pour les définitions de prestations.

* Dans le footer, les h5, ne devraient pas être des éléments de liste, il introduisent plutôt la liste.

Bonjour,

Merci beaucoup pour ce retour Laurie-Anne.
Je m’attelle à la tâche sur l'ensemble de tes remarques dès ce soir.

Bonsoir,

quelques remarques sur les extraits de prestation.

Les liens ne semblent pas cibler ce qu'il faut: titre mariage qui mène à "détente" et titre détente qui mène à "prestations" alors que les citations mènent aux rubriques attendues.


Pour la citation qui sert de lien, pourquoi ne pas mettre un affichage block. Sinon lorsque le curseur est entre deux lignes on perd le lien.

Sinon, dans le footer, j'avoue que le lien vers la page facebook d'une écurie est déroutante... et en plus la page n'est pas ouverte donc on se demande ce que ça fait ici.


H.

Bonjour HAML,

Merci pour ces remarques.

- Tu as raison sur les liens des extraits, je vais les passer en display: block pendant que je corrigerais les "maladresses" mises en avant par Laurie-Anne.
- Je corrige de ce pas les ancres des prestations.
- Pour le lien de l'écurie, il est certain que c'est hors contexte, mais c'est une connaissance de la cliente qui souhaite lui faire bénéficier d'un affichage supplémentaire de "pub". Maintenant, je ne suis pas certain que sa clientèle "coiffure" soit réellement intéressée par les prestations d'une écurie qui plus est, n'ouvre pas son profil FB. J'ai déjà abordé le sujet avec l'intéressée, il faut que je remette ça sur le tapis .

Merci de m'avoir consacré un peu de ton temps.

Yvan.

Quelques mises à jours rapide :

Laurie-Anne a écrit :

* Il manque une meta Content-Language.

Fait.

Laurie-Anne a écrit :

* Une meta Decription bien remplie pourrait être utile, étant donné qu'il y a peu de contenu sur la page (d'accueil, du moins).

Fait.

Laurie-Anne a écrit :

* Le div #navigation ne sert à rien, l'ID pourrait être appliqué à l'ul.

Corrigé

Laurie-Anne a écrit :

* "Extraits de la carte" est une façon bien trop étrange de dire "Mes prestations". Personnellement, ça me dérange car il m'a fallu du temps pour comprendre (avec le reste du code) que non ce n'était pas un "restaurant de coiffure".

Corrigé en "Extraits des prestations".

Laurie-Anne a écrit :

* le <q> n'est pas vraiment approprié pour les définitions de prestations.

Corrigé par un lien lien dans un paragraphe. Les "quote" sont ajoutés via un span dans le p.
J'aurais pu les ajouter via les pseudo classe p:after et p:before mais il me semble qu'elles ne sont pas reconnue par ie6/7.

HAML a écrit :

Les liens ne semblent pas cibler ce qu'il faut: titre mariage qui mène à "détente" et titre détente qui mène à "prestations" alors que les citations mènent aux rubriques attendues.

Corrigé.

HAML a écrit :

Pour la citation qui sert de lien, pourquoi ne pas mettre un affichage block. Sinon lorsque le curseur est entre deux lignes on perd le lien.

Corrigé.

L'ensemble colle bien, mais j'aime pas le logo et les boutons du haut.

ça manque d'illustration ou d'identité... quelque chose du monde de la coiffure...
J'ai cherché dans mes favs mais je ne trouve pas un truc dans l'esprit. Une mine d'or pour celui qui sait cherché :
-http://ffffound.com/

++
Modifié par Laurie-Anne (07 Apr 2011 - 14:47)

Le texte en haut à gauche semble pixelisé et les couleurs ne sont peut-être pas adaptées pour les écrans des ordinateurs.

Bonsoir,

Le texte en haut à gauche n'est pas une image, donc le rendu peut être différent suivant les navigateurs.

C'est un titre de niveau 1 classique avec une @fontface puis plusieurs niveaux de text-shadow.

Peut-être la @fontface qui fait l'effet.

C'est super sympa le design!! Beau travail. Ce n'est pas du tout sombre!!
Modifié par touchenuage (08 Apr 2011 - 20:38)

Salut Fufu,
Belle réalisation en effet. Peut être un poil trop d'effets CSS3 (un peu comme quand on découvre photoshop et les lueurs externe, on a tendance à en mettre partout. ). Ça passe tout juste sur la navigation et on est dans l'excès sur la page de contact (l'ombre portée est trop grossière).

Moi aussi je trouve ça sombre. Tu pourrais peut être jouer sur la couleur avec les titres pour les mettre plus en avant. Soit le fond, soit la typo.

Même chose pour les catégories dans les prestations (brushing, mèches ect). Les utilisateurs trouveront instantanément l'info qu'ils sont venus chercher (le prix d'un brushing par exemple).

Sinon, commercialement, je chercherais à mettre en avant les forfaits. Au moins, je chercherais à mettre en avant leur existence (surtout le forfait mariage ).

Voilà pour moi.

Bonjour,

Merci pour ce retour David-Dante .
Effectivement, je t'accorde la surcharge d'effet présente sur le formulaire de contact.

Je vais retoucher les input, avec du recul c'est vrai que ça fait moche.

Pour le coté sombre, j'avoue que j'ai du mal à comprendre, ça vient peu être de mes configs d'écran.

Beaucoup de retouches en perspective en tout cas. Mais ça attendra la semaine prochaine je suis en mode "Garde de bébé" toute la semaine, ce qui ne me laisse pas beaucoup de temps mise à part les siestes !

Merci et bon week-end.

Laurie-Anne a écrit :

* Dans le footer, les h5, ne devraient pas être des éléments de liste, il introduisent plutôt la liste.

Bonjour Laurie-Anne,

concernant ce point, je suis en train de lire "Transcendez CSS" d'Andy Clarke et dans un de ses exemples (je peux fournir la page si besoin) il insère un Hn dans une liste. J'avoues qu'entre ta remarque et ce que je lis de ce monsieur j'ai du mal à faire la part des choses.
(Pour le contexte, c'est similaire à ce que j'ai fait).

Sans le contexte réel ni le code du livre, impossible de te répondre.

J'imagine, et pour des raisons évidente de droits d'auteur je ne me vois pas scanner les quelques pages nécessaire pour te planter le décors.

tampis.

Pour info : p.276
Modifié par fufu (11 Apr 2011 - 20:16)