Critique du site de ma boite : nately.fr

Bonjour tout le monde. Je viens de réaliser le site de ma boite (sous un moteur wordpress), voici donc le thème que j'ai réalisé à la main (design + code).
J'attends vos retours

Merci !!


http://www.nately.fr

PS : Sous IE6, je sais que c'est une catastrophe, c'est un parti pris. (et pas une solution de facilité).
Modifié par JohnNada (23 Nov 2010 - 11:23)

Salut,

Merci de bien vouloir afficher le nom de ton site dans le titre du sujet, comme cela est demandé dans le message d'annonce de ce forum : "A lire avant de poster : Ergonomie, Design et demandes de critiques", sinon 99% des sujets de ce salon auraient le même titre évasif

Bonjour,

première bonne impression mais je n'ai rien compris après avoir affiché la page de contact.
- première idée : c'est une One Page Layout, faut que j'appelle mon collègue fan du genre
- je vais pour remonter en scrollant, ah ben non le formulaire ne bouge pas mais le menu se cache et je ne vois que la moitié de la première page. HEIN ?
- ah ce n'est pas une page au vu de l'URL
- oh c'est un div superposé mais on a accès à tout le reste du contenu si on arrive à scroller (et on y arrive malheureusement). Est-ce que ça viendrait de ma résolution en 1920x... ? Nan c'est pas ça, y a vraiment un souci à ce niveau-là.
Je passe sur les problèmes d'accessibilité que ça pose, j'ai déjà pas réussi à comprendre en moins de 10 sec pourquoi le menu disparaissait (ou a contrario pourquoi le formulaire restait planté là sans bouger ...) j'ose pas imaginer un visiteur lambda se perdant dans ce mécanisme.

Si tu superposes un div, fais-le AMHA à la manière Lightbox où un voile recouvre entièrement la page d'origine, pas avec un fond noir sur un autre fond noir (et en empêchant de pouvoir tabuler dans cette page d'origine tant qu'on a pas masqué le formulaire mais ça c'est une toute autre histoire - d'accessibilité pas simple à implémenter)
Modifié par Felipe (22 Nov 2010 - 20:55)

Fx 3.6 : il y a un bug de pas plus d'1px au niveau du menu sur le lien actif et au survol des liens.
La couleur rose laisse apparaître (très très peu) le blanc. J'imagine que c'est dû au letter-spaicng: -1px (?) et il n'y a peut-être que Fx qui bogue ainsi ...

Dans la page portfolio, un lien contient chaque image ET un div. En HTML, un lien est de type inline et un div de type block, ce n'est donc pas autorisé. Un span dans un a : aucun problème mais pas un div (et tu peux styler le span en CSS display: block; si tu le souhaites ; là je parle des éléments HTML pas de leur rendu en CSS)

Hello,

a écrit :
Fx 3.6 : il y a un bug de pas plus d'1px au niveau du menu sur le lien actif et au survol des liens.
La couleur rose laisse apparaître (très très peu) le blanc. J'imagine que c'est dû au letter-spaicng: -1px (?) et il n'y a peut-être que Fx qui bogue ainsi ...

Nan, sur Safari aussi j'ai ce bug (pareil que sur FF/mac). C'est sûrement dû au letter-spacing negatif.
Quant au formulaire, un lightbox ferait mieux l'affaire.
Pour le reste du site, l'apparence graphique fonctionne bien visuellement (hormis le bug des liens du menu).

(entre parenthèses : le coup « IE6 […] est un parti pris » gagnerait à être explicité : un parti pris assumé ne me dérange presque jamais, mais ici les bugs visuels sont pourtant pas insolubles : pourquoi se passer de X% de visiteurs et clients potentiels ?)
Modifié par audrasjb (23 Nov 2010 - 00:21)

Bonjour,

Je ne vais pas répéter que le formulaire de contact pose problème, Felipe et audrasjb l'ont déjà très bien fait.

Ce qui me dérange également c'est qu'avec un viewport de 1026px de large j'ai un ascenseur horizontal (qui ne sert à rien).

Plus dérangeant encore, j'ai beaucoup de mal à lire les textes (très fins, interlignage insuffisant pour certains (philosophie) et contraste trop fort) ; OK j'ai la crève, donc de la fièvre et les yeux qui fatiguent, mais quand même.

Pour le code (page Agence) :
* 10 erreurs de code

* La langue principale de traitement du document n'est pas indiquée (lang sur html).

* Il serait bien d'ajouter une meta Content-Langage (si le serveur ne le fait pas déjà, flemme de checker)

* J'ai un peu peur à la vue des dizaines de "link" dans le head... (OK, c'est du wordpress...)

* 11 Scripts dans le head, c'est énorme (et ça explique la lenteur de chargement que j'ai pu constater) ! Il serait préférable de limiter le nombre de fichiers externes et de les placer en fin de document (pour laisser le contenu se charger avant son comportement).

* Tu dois avoir un problème de redondance dans ton code PHP (une partie de ton head se répète (ligne 21 à 45 et 60 à 83).

* Un lien vide est un lien inexistant... Ce n'est pas parce que tu lui donne une dimension et une image de fond en CSS que cela le rend tangible... Les images porteuse de contenu (et à fortiori les images support de lien) DOIVENT TOUJOURS se trouver dans le code HTML avec un attribut alt correctement rempli. Ce n’est pas parce qu’en dehors du lien tu as placé un texte HTML (sorti de l’écran) que ta solution est accessible : elle ne l’est pas (du tout). En cas de problème serveur ou de connexion, si l’image ne se charge pas, mais que les CSS restent actifs (le genre de cas qui arrive tous les jours à des milliers d’abonnés BOO (marque modifiée ^^; ) en Belgique) tu n’a plus ni nom de site, ni lien. Ps. : une image avec un alt dans un lien dans un h1 se référence tout aussi bien qu’un h1 sorti de l’écran (voir même mieux, tu ne risque aucune sanction de Google).

* La construction de ton menu est totalement illogique (et anti-sémantique). Pourquoi avoir des plusieurs <li> pour un seul et même élément ? Simplifie ton menu avec un liste non imbriquée (surtout qu’elle est mal imbriquée), se sera plus logique.

* Une liste <ul> avec un seul et unique élément <li>, c’est un paragraphe et non une liste:/ Dans ton cas il s’agit même d’un bloc de citation...

En bref : un réel souci de sémantique...

Merci a tous pour vos critiques constructives, je ne pense pas que je vais modifier le site car il plait a mon boss, mais je les prends en compte pour l avenir, c'est certain.

Je vais par contre reparer les erreurs non visibles, comme les divs dans les liens et aussi les erreurs dans le code, balise meta, sémantique etc...
C'est vrai que j'ai appris le html /css un peu à la sauvage avec le bouquin sur mes genoux dans le metro (+ un contrat pro inutile, d'ailleurs si un jour à Paris quelqu'un veut tester le centre de formation IEF2I, je le déconseille vivement) j'essaie de m'améliorer et de ne pas me contenter au "si ca marche c'est bon".
Pour le JS c est un peu difficile de le placer chez Wordpress, j essaie d'utiliser un minimum de plugins mais dès lors que j'en utilise un il me balance son code ou il veut (meme si a ce niveau la il y a des améliorations chez certains qui proposent l option de cocher une case pour l inclure en pied de page).

Pour la redondance de code dans le head... Merci Google Analytics plugin pour WP.... J'ai peur que d'en changer subitement puisse altérer mon ref.

Et pour finir, le point épineux, la page contact. La c est un parti pris ultime, mais visiblement c'est pas l ideal. Il faudrait que je l optimise afin de le rendre plus accessible, tout en gardant cette configuration. J'ai une page contact qui existe bien, pour IE, mais j'aime assez ce système, qui je pense mérite une petite amélioration. Je voulais donner un rendu proche de flash, sans flash.

A voir.