À vos critiques! www.spypoint.com Version 2010

Bonjour!
Et ben voilà! le projet sur lequel je travail depuis un bon bout de temps déjà sera bientôt officiellement mis en ligne. Je tiens à spécifier que mon métier à la base c'est design. La programmation n'est pas du tout ma branche de compétence. Cela dit j'ai dû tout réapprendre du html et css car mes cours de base remontaient à trop loin. Je me suis également un peu plongé dans le php (malheureusement ces pages ne sont pas disponible pour l'instant).

Projet: Refonte du site de GG Télécom pour l'année 2010
Objectifs: Design plus attractif et interactif. Fonctionnalité et présentation des produit à revoir. Créations d'une zone "client" pour nos distributeurs. Et surtout (étant donné que c'est moi qui joue les web mestre), facilité d'entretiens du site.

Le site est disponible en 2 langues. Les partis de l'album photo "Photos et Vidéos" (dommage pour cette section, j'aurais bien voulu vos avis dessus), commande en ligne, mise à jour et accès au client, ne sont pas disponible pour l'instant étant donner que mon serveur ne gère pas les pages php. Le changement sera bientôt fait.

Voilà le site en question:
www.spypoint.com/2010/index.html

Un gros merci à la communauté d'Alsacréations, qui m'a aidée mettre de l'ordre dans mes idées ainsi que dans le code pour la conception de ce site.
J'ai encore quelques bug à régler, votre aide serait bien apprécier à ce niveau, j'ai beau chercher, je ne trouve pas de solution.

J'ai fait le mieux que je pouvais pour rendre le site relativement compatible avec ie6. Pour le reste ça passe.

Alors vos avis sur l'ergonomie, le code (qui n'est pas parfait) et biensûr le design, seront très apprécié!
Modifié par juliesunset (25 Feb 2010 - 16:27)

maosalia a écrit :
Le fond du menu-déroulant "Support-Technique" est décalé sur la droite (sur Firefox)

Oups! petit problème de cache, je vais corriger ça...

maosalia a écrit :
De plus pourquoi mettre des .png transparent pour les titres de menu ?
Je les trouve peu lisible.

Parce que je tenais à mon contour blanc autour des lettres, impossible à faire autrement. Peut-être en SVG, mais je sais pas comment.

maosalia a écrit :
Les textes alternatives de tes images sont en français... sur les pages anglaises ^^

EH! merci de le signaler! dans fois ça fait tellement longtemps qu'ona le nez dans le projet qu'on voit plus rien!

maosalia a écrit :
Je préfère l'affichage de la page des caméras avec le javascript désactivé, je trouve que l'effet de rotation rend mal. (les goûts et les couleurs)

J'ajouterai peut-être un petit texte explicatif signalant que l'on peut accéder à la fiche technique en cliquant sur la caméra ainsi qu'un autre pour signaler les détails quand on survol les images des compléments.

Oui j'y avait pensé, ça fais parti de ma liste de corrections à faire.

maosalia a écrit :
Quand on est sur une fiche produit, le menu passe en dessous de l'image de la caméra, pas très pratique ^^

Bug dant je parlais plus haut... sais pas comment corriger ça. Si quelqu'un peu m'aider sur ce coup...

Merci pour tes comm!

Bonjour,

12 erreurs sur le splash 25 sur la page d'accueil... Avec un doctype transitionnel c'est innacceptable.

D'un point de vue design, les expert le confirmeront, mais je n'en vois pas réellement... Le look du site fait vieux ; et la palette de couleurs pas très assortie (il aurait mieux vallu utiliser du brun clair à la place de l'orange pour rapeller la bordure. Le fond noir donne une impression d'emfermement de la page.

Tu utilises 4 typos différents (logo, menu, titres, contenus) (sans compter les présentations de travaux), c'est beaucoup trop et ça perturbe.

Le liseret blanc autours des textes des menus, sous IE6, rend particulièrement mal, il serait préférable que es gif de substitution n'intègre pas ce liseret mais directement le fond de l'image (puisque l'image à une taille fixe) ou soient des textes (au lieu d'images).

Pour le code :
* Est-ce qu'il est vraiment nécessaire d'inclure 3 fichiers CSS différents par page (la CSS corrective pour IE6 n'est pas comptée) ? Ces fichiers ne pourraient-ils pas être combiné pour éviter les requetes vers le serveur ?

* Les scripts JS sont toujours mieux en bas de page ; ainsi ils ne ralentissent pas le chargement des autres éléments de la page, comme le contenu, qui sont bien plus important qu'eux.

* Tu ne signale pas les changements de langues.

* Les ancres, appliquées à un élément, sans href, sont perturbante :

<a>Caméras</a>

Elles indiquent un lien, par le changement du curseur, alors qu'il n'y a rien à cliquer ; en terme d'ergonomie, c'est très mauvais.

* Les alt de ton menu ne correspondent pas tout à fait aux contenus portés par les images.

* Ceci :

<p class="date">&nbsp;</p>

est du mauvais bidouillage ; pour créer un espace plus important entre deux paragraphe, il conviendra d'utiliser la propriété margin en CSS.

* Dans le même genre :

<div class="spacer">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

Ceci est encore pire.

Bonjour!

Laurie-Anne a écrit :
12 erreurs sur le splash 25 sur la page d'accueil... Avec un doctype transitionnel c'est innacceptable.

Je suis au courant de ces erreurs mais j'ignore comment les régler. Elles sont toutes sur des guillemets ou autres trucs du genre...

Laurie-Anne a écrit :
D'un point de vue design, les expert le confirmeront, mais je n'en vois pas réellement... Le look du site fait vieux ; et la palette de couleurs pas très assortie (il aurait mieux vallu utiliser du brun clair à la place de l'orange pour rapeller la bordure. Le fond noir donne une impression d'emfermement de la page.

Le brun pour la barre de menu du parle?
J'avais essayé avec une autre couleur de fond, mais l'effet n'était pas du tout concluant.

Juste comme ça, je prend bonne note de vos commentaire au sujet du Design, mais il n'y aura pas de changement majeur fait. Mes boss aiment le site ainsi.

Laurie-Anne a écrit :
Tu utilises 4 typos différents (logo, menu, titres, contenus) (sans compter les présentations de travaux), c'est beaucoup trop et ça perturbe.

En réalité c'est 2 typo, mais probablement que les contours blancs sur le logo et le menu donne cette impression.

Laurie-Anne a écrit :
Le liseret blanc autours des textes des menus, sous IE6, rend particulièrement mal, il serait préférable que es gif de substitution n'intègre pas ce liseret mais directement le fond de l'image (puisque l'image à une taille fixe) ou soient des textes (au lieu d'images).

En fait il s'agit de png8 avec alpha. Effectivement, je n'avais pas fait attention. Je devrai donc arranger ça via le css.

Laurie-Anne a écrit :
* Est-ce qu'il est vraiment nécessaire d'inclure 3 fichiers CSS différents par page (la CSS corrective pour IE6 n'est pas comptée) ? Ces fichiers ne pourraient-ils pas être combiné pour éviter les requetes vers le serveur ?

Pour m'y retrouver oui. Quand je travail, j'aime bien que tout soient bien classé. Dans ce cas-ci, j'utilise un css de base (très longue) et un css traitant de tableau qui s'appliquent à tout le site. La 3e s'applique uniquement à cette page en particulier.

Laurie-Anne a écrit :
* Les scripts JS sont toujours mieux en bas de page ; ainsi ils ne ralentissent pas le chargement des autres éléments de la page, comme le contenu, qui sont bien plus important qu'eux.

J'en prend bonne note. J'étais déjà au courant, mais j'avais reporté ça à plus tard.

Laurie-Anne a écrit :
* Tu ne signale pas les changements de langues.

Pour changer des pages anglais à Français tu veux dire? Il y a un petit lien en au à gauche de chaque page pour ce faire... Ça veut donc dire que ce n'est pas assé visible. Quelqu'un à une idée à ce sujet... j'ai essayé à plusieurs endroit différent, mais j'ai pas trouvé mieux.

Laurie-Anne a écrit :
* Les ancres, appliquées à un élément, sans href, sont perturbante :

<a>Caméras</a>

Elles indiquent un lien, par le changement du curseur, alors qu'il n'y a rien à cliquer ; en terme d'ergonomie, c'est très mauvais.

Je suis mieux d'enlevé ça carrément donc?

Laurie-Anne a écrit :
* Les alt de ton menu ne correspondent pas tout à fait aux contenus portés par les images.

C'est corrigé, j'avais pas remarqué ce détail. Merci!

Laurie-Anne a écrit :
* Ceci :

<p class="date">&nbsp;</p>

est du mauvais bidouillage ; pour créer un espace plus important entre deux paragraphe, il conviendra d'utiliser la propriété margin en CSS.

* Dans le même genre :

<div class="spacer">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

Ceci est encore pire.

Erf! effectivement j'avais loupé ça! C'est corrigé également.

Merci pour ta réponse Laurie-Anne, je n'en attendait pas moins de toi!


EDIT:

maosalia a écrit :
Quand on est sur une fiche produit, le menu passe en dessous de l'image de la caméra, pas très pratique ^^

Bug réglé pour la slider de la page d'accueil qui me faisait le même problème sous iE seulement.
Modifié par juliesunset (07 Jan 2010 - 22:58)

juliesunset a écrit :
Pour m'y retrouver oui. Quand je travail, j'aime bien que tout soient bien classé. Dans ce cas-ci, j'utilise un css de base (très longue) et un css traitant de tableau qui s'appliquent à tout le site. La 3e s'applique uniquement à cette page en particulier.

Il y a un problème alors... La CSS de base ne devrait pas être si longue au vu du design ; et si toi tu préfère avoir plusieurs fichiers, rien ne t'empèche de les fusionner pour la version en ligne.

juliesunset a écrit :
Pour changer des pages anglais à Français tu veux dire?

Non, je parle des changement de langue dans les pages. Si tu as un mot en anglais dans une page déclarée en français mais que le code HTML n'indique pas que le mot est en anglais, les synthèses vocales liront le mot avec la prononciation française ; et c'est pas brillant. Il faut baliser les mots dans une langue étrangère en leur donnant l'attribut "lang".

juliesunset a écrit :
Je suis au courant de ces erreurs mais j'ignore comment les régler. Elles sont toutes sur des guillemets ou autres trucs du genre...

Les & doivent être systématiquement codées selon leur entité HTML & (y compris lorsqu'il s'agit des URLs à paramètres), l'élément embed ne fait pas partie du standard XHTML 1.0 (ni du HTML 4, d'ailleurs) et tu as une balise d'ouverture a qui se répète deux fois.

Bonjour

Victor BRITO a écrit :

Les & doivent être systématiquement codées selon leur entité HTML & (y compris lorsqu'il s'agit des URLs à paramètres), l'élément embed ne fait pas partie du standard XHTML 1.0 (ni du HTML 4, d'ailleurs) et tu as une balise d'ouverture a qui se répète deux fois.

Pour la balise a je pense l'avoir déjà repéré, à moins qu'il y en ais une autres que je n'ais pas vue...

Pour les erreurs &, normalement je fais &amp systématiquement, mais il se peut que j'en ais louppé.

Pour l'élément embed, j'étais déjà au courant, mais si je veut que iE puisse lire... je doit le garder... non?

MErci pour tes comm!
Modifié par juliesunset (11 Jan 2010 - 14:43)

Bonjour!
Petit up, plusieurs corrections on été fait en autres pour la validation des page index et accueil.

J'ai éliminé les balise embed, dans le cas de la page d'accueil ça fonctionne très bien, mais sur la page d'index la vidéo ne s'affiche pas sous iE7. J'ignore d'où vient le problème mon chemin est pourtant bon.

Le problème du menu qui passe sous le carrousel sur les pages de produit a également été réglé.

En ce moment j'essaie tant bien que mal de réduire la taille du code du menu (j'ai quand même éliminé 81 lignes...). C'est pas évident, je suis à cours d'idées. Alors vos suggestions sont le bienvenu.

Si vous avez d'autres commentaires ne vous gêner surtout pas!

Bonjour!
Un autre up!
Le code css de mon menu a été sérieusement réduit. Des 325 lignes d'origine je suis passé à 137. Le tout grâce à la propriété border-radius (en combinaison avec roundies pour iE) qui m'a permit d'éliminer les images.

La prochaine étape serait de rendre le menu accessible à la navigation au clavier. Comment je fais ça? à l'aide de jquery? javascript?

D'autres commentaires?

Bonjour!
Ban oui, je continu à travailler sur le projet qui normalement aurait dû être mis en ligne officiellement lundi, mais en raison de difficulté de transfère de serveur, c'est retardé.

Je refait donc un petit up pour vous faire par de mon avancé. J'ai tenté au maximum d'épuré et simplifier mon code, corrigé les incohérences sémantique (y'en a peut-être encore), etc.

Plusieurs mon fait le commentaire que le site était austère... je me suis creusé la tête pour trouvé une façon d'en diminuer l'impact. J'en suis arrivé à ajouté un léger dégradé d'un gris chaud vers le noir au lieu de tout noir pour le fond du site.

J'aimerais avoir vos avis à ce sujet, qu'en pensez-vous?

Bonjour!
le site est officiellement lancé.
Voilà l'adresse officielle:
www.spypoint.com