[amateur] stephane-cormier.fr

Bonjour,

Voici mon premier site réalisé en 'bénévole' mais passionné du web développement.
C'est un site de présentation (4 pages) pour l'un des rare 'Tireur Photo Argentique' vivant encore de son travail.

Le site est en théorie compatible avec l'ensemble des navigateurs (>IE6, >firefox 3.5, chrome, etC.) bien je n'ai pas encore l'ensemble des machines virtuels pour tout tester convenablement.

Merci d'avance pour vos remarques objectives.

http://www.stephane-cormier.fr

'a noter' : la page en est en cours et redirige pour le moment vers 404
Modifié par PetarouxRay (25 Jul 2011 - 09:04)

Bonjour,

pourrais-tu stp faire figurer le nom de domaine ou le nom du site dans le titre de ton sujet comme demandé ? Parce qu'[ amateur] est un peu court et pas très explicite ...

Oui merci, autant pour moi

Bonjour,

chez moi sur ie7 et ff5 cela marche.

Le seul gros soucis que je trouve à ce site c’est qu’il n’est pas utilisable si on a un petit écran ou si l’on a réduit la hauteur de la fenêtre.

Le site est illisible si on désactive javascript. D’ailleurs l’effet de retarder l’apparition des photos au chargement de la page est je trouve une très mauvaise idée.
Les 2 dernières balises <label> de ton formulaire ont la même propriété for que la première au lieu de correspondre à l’id de l’input auxquelles elles sont associées.
Certains id ne sont pas uniques.
J’aurais mis les 4 photos et le titre Stéphane Cornier tirage argentique noir&blanc dans une balise <img> et non en fond d’écran car cette image contient de l’information et n’est pas que décorative.
Tu utilises les accents sur les majuscules c’est très bien mais il faut le faire partout DÉVELOPPEMENT, À présent.
Ce champ sans s.
Si on veut chercher la petite bête, les derniers commentaires html <!-- Ancre de bio --> proviennent d’un mauvais copier-coller.
On ne devrait voir aucune mise en forme css dans le fichier html (séparation contenu présentation).
Ton encodage est en utf-8 et tu utilises les caractères spéciaux HTML &eacute;

Pour un premier site c’est très encourageant.
Modifié par adrien881 (19 Jul 2011 - 11:14)

Bonjour,
Personnellement, je ne vois qu'une page!
Je suis pas fan des pages sur une page...

Sinon une grille tarifaire sans tarif n'est pas une grille tarifaire, plutôt une liste des prestations...

Bon sinon niveau design, j'ai bien compris que le sujet c'était noir et blanc, mais l'a je trouve que c'est trop noir... C'est déprimant je trouve!

Merci adrien 881, j'ai essayé de corriger quelque remarques :
- pas utilisable si on a un petit écran : à part pour les 800*600, il devrait fonctionner au >= a 1024*768, je suis étonné
- Le site est illisible si on désactive javascript : vu avec le client, je l'ai supprimé, merci
- Lesbalises <label> : corrigé
- Certains id ne sont pas uniques : corrigé
- les 4 photos en fond d’écran : je réfléchi a ca.
- accents sur les majuscules : OK (sauf A présent)
- Ce champ sans s : corrigé
- commentaires html : corrigé

- aucune mise en forme css dans le fichier html : Ca je le sais bien et je ne vois pas ou tu l'as trouvé. A part le formulaire, c'est ca ?
- Ton encodage est en utf-8 et tu utilises les caractères spéciaux HTML &eacute : Ce n'est pas ce qu'il faut faire pourtant ?


En tous cas merci, vraiment sympathique d'avoir pris le temps.

-Pour la dimension de l’écran je suis d’accord le 1024×768 passe très bien, mais si la fenêtre n’est pas maximisée le menu sera situé trop bas pour apparaître. Tu pourrais si tu as le temps tester la hauteur de la fenêtre en javascript et si elle est trop petite mettre une position fixed et un bottom à 0 pour la classe .menu. Attention la ligne
$(this).css('border-bottom','4px solid #6b3427');
posera alors des soucis.

-Pour les 4 photos en fond d’écran le même problème se pose pour ton bloc contact left. Il vaudrait mieux mettre une balise img avec un alt reprenant le contenu textuel de l’image pour que les aveugles et les moteurs de recherche ne passent pas à côté de l’information.

-Pour les accents même sur le À c’est l’académie qui le dit. Altgr+7 puis maj+A sous Windows, CapsLocks+à sous linux.

-La séparation css/html concerne certains <td> où des width apparaissent mais c’est du chipotage.

-L’avantage de l’utf-8 est de pouvoir se passer des caractères spéciaux html. Dans l’absolu le code est plus lisible et on gagne quelques octets (bien que l’on ne soit pas à 3 octets près).
Modifié par adrien881 (19 Jul 2011 - 17:50)

Ca lu,

J'ai regardé vite fait ton site.

1. valide ta page
2 faux teu d'or taux graf
3. si j'enlève le JS :
3.1 le rollover sur le menu n'est plus (bordure)
3.2 le formulaire ne bénéficie plus de messages d'erreurs lorsque l'utilisateur saisie mal ce dernier. (le plus important)
3.3 Le javascript n'est qu'une surcouche. Baser son application dessus est une grossière erreur qui malheureusement se répand trop....
4 problème de cohérence visuel suivant les deux table tarifaires.

Niveau esthétique : j'aime assez. Etant donné que tes "planches" sont limitées par la hauteur de la fenêtre et que slide ces dernières par un système d'ancre, j'aurais fait ce systéme à l'horizontale. C'est selon moi et cela n'engage que moi.
Modifié par niuxe (19 Jul 2011 - 23:53)

OK merci a tous les deux !

Alors, je vais prendre le temps de modifié l'ensemble avant de le soumettre à nouveau.
Je vais donc modifié la photo accueil, l'accent,l’utf-8 (bien que pas clair encore), les fautes, le problème js lié aux ancres nommées, étude formulaire.

Une question toutefois, concernant l'utf-8 je suis perdu
je pensais justement qu'avec l'utf-8 il fallait utiliser les caractère spéciaux. d'ailleurs si je les enlève, le texte ne s'affiche pas correctement.

bien le site est mis à jour :

- photo accueil : changé
- l'accent sur le A de la bio : corrigé
- les fautes : en théorie ok
- le problème js lié aux ancres nommées : corrigé et/ou contourné avec la balise noscript
- étude formulaire : séparation css/html corrigé

concernant l'utf-8, j'ai rien changé je comprend pas le soucis

Bonsoir,
Pour l'utf-8 c'est simple :

- il faut donc mettre le charset en UTF-8
- ne plus coder les accents mais les tapper directement, "é" et non pas "&eacute"
- il faut bien sur que ta page soit sauvegardée en UTF-8 avec ton éditeur de texte. ex avec Notepad++ -> Encodage -> sauvegarder en UTF-8 (sans BOM).

Merci fufu pour la précision,

J'ai tout compris au moins c'est clair.
Je vais tester ca sur ma machine dev

Et encore merci à tous si toute les remarques ont étés formulées.

Slt.
Critiques (+ pour positif, - pour négatif):


+ sobre
+ on comprend tout
+ homogène
+ informations bien ordonnées (pas besoin tourner 20 ans pour trouver)



- trop sombre
- menu pas très attractif, donne pas envie de cliquer
- pas conçu pour le web mobile.
- le menu revient plrs fois, suffirait d'un haut de page
- manque de graphismes mais c aussi un choix je pense.
- pas assez percutant pour appâter le client.