[Intermédiaire] Remember Factory

Bonjour,

Avant de commencer je souhaiterais tous vous remercier pour votre précieuse aide.
Cela fait un petit moment que je bosse sur ce projet personnel.
Et si celui-ci est arrivé à maturité aujourd'hui, c'est grâce à vous.

J'ai vérifier mes CSS sur W3C. Tout est OK.

http://www.rememberfactory.be/
Merci à vous.
Modifié par Rifton007 (10 Feb 2010 - 17:04)

Salut,

Déja pour commencer, 101 erreurs de validation avec un doctype transitionnel, c'est pas terrible.

Niveau code, je pense que ça pourrait être plus léger, mais bon...

Niveau design, c'est frais, fin et élégant, mais je trouve que les formes carrées trop brutes sont un peu dérangeantes. Pas pour le logo ou les éléments de haut de pages (accueil, cartes d'invitation etc.), mais pour le rectangle en dessous, avec le cadre en bois qui entoure l'animation. Ca tue un peu le raffinement et la poésie voulue par le reste.

Je trouve qu'au niveau intérêt, quand on arrive sur la page, on sait pas trop de quoi parle le site et les termes "souvenirs éternels" (pas d'accent sur le deuxième e), cartes d'invitation, imagerie et compilation dvd ne sont pas suffisants pour comprendre.
Le contenu qui explique un peu plus se situe beaucoup trop bas dans la page.
Ergonomiquement c'est une erreur que d'imposer de descendre dans le site pour connaître réellement et précisément son sujet.

La lisibilité est limite globalement, le texte en gris sur blanc ("votre union...", "Votre histoire..."), le texte en blanc sur rose ("pourquoi choisir..."), et même les titres roses sur fond blanc sont très limites.

Le bandeau gris dégradé qui délimite la partie haute et basse du site est un peu terne, il serait bien de le rendre un peu plus gris bleu pour pas qu'il ne ternisse l'image du site.

Attention, le bloc rectangulaire avec la tapisserie semble avoir un décalage d'un pixel en haut à gauche au niveau du dégradé gris.

Les icones de l'entête sont peu identifiables, il serait peut être bien d'ajouter même en petit leur fonction. L'enveloppe ressemble aussi à une maison et le coeur avec le plus n'est pas explicite de l'ajout en favoris..

La structure du site est peu perceptible, il y a des liens un peu partout sous différentes formes ce qui fait que le visiteur peut se sentir un peu perdu. Une navigation discrète en haut de colonne droite par exemple serait un plus (la un gris un peu plus foncé que le texte actuel peut être plus adéquat).

L'espace vertical pourrait être un peu plus condensé de façon globale, de manière à afficher plus de contenu simultanément dans la page.

Sinon, site de bonne facture visuellement, il donne envie, mais il faut à mon sens faire un peu plus attention à l'ergonomie, le visiteur ne connait pas le site, il faut qu'il puisse le faire en un coup d'oeil.

Merci pour tes avis et critiques Mikachu.

J'ai fait une formation en 2002 de webdisgner que je n'ai même pas terminé.
Ce qui explique certainement tout ces manquements.

1) A l'aide quel outil puis-je trouver les 101 erreurs de validation.
2) Comment puis-je alleger mon code ?
3, 4, 6 et 7) J'ai bossé à la vas vite sur photoshop sur ma page d'accueil. Qu'en pense tu de ces premiéres modifications ?
http://www.rememberfactory.be/beta_layout.jpg
5) C'est noté j'y travailerais dés demain.
8)J'avais pensée à des info-bull en CSS qu'en pense tu ?

En te souhaitant une agréable soirée.
Modifié par Rifton007 (10 Feb 2010 - 20:06)

Bonjour.

Si je regarde tes 101 erreurs, je remarque que la moitié d'entre elles proviennent des javascripts que tu as placés de façon interne. Mets-les dans des fichiers externes.

Mais en passant, c'est pourquoi ces scripts ?

Ensuite, tes éléments <img /> n'ont aucun texte alternatif. Ceci est encore plus important pour les textes-images, car si on désactive les images, on perd de l'information sans l'attribut alt.
Dans ton imagemap, tu utilises une valeur invalide (shape) pour les formes de tes liens

Et dans les autres erreurs, j'ai vu un attribut border en majuscule, un ID en double (les ID doivent être uniques !) ainsi qu'un signe égal oublié pour l'un des attributs de ton tableau sur la page de contact.

Et question d'accessibilité, en plus des alt manquants dont j'ai parlé, il y a aussi le fait que tu n'as pas relié les <label> aux champs de ton formulaire de contact. Pour les relier, tu dois ajouter for="identifiant" au label, et id="identifiant" au champ correspondant. En les reliant ainsi, il ne suffira que de cliquer sur le <label> pour que le curseur se place automatiquement dans le champ, ce qui facilite beaucoup l'utilisation des formulaires pour les non-voyants.

Voilà, c'est tout de mon côté, puisque Mikachu a bien résumé pour ce qui est de l'organisation des pages et des contrastes qui sont assez bas en effet, surtout que j'ai une déficience visuelle qui me donne plus de difficultés avec les contrastes bas.

Alors à mon sens tout les problémes énnoncé par IshimaruChiaki sont réglés.

J'ai isoler les scripts JS
HTML et CSS sont OK sous W3C
J'ai lié les input TXT à leur LABEL

Maintenant que les script son isolé, suis-je obliger de remplacer tout les caractéres spéciaux par &gt; &lt; etc ...

Merci IshimaruChiaki

Rifton007 a écrit :

Script généré par Dreamweaver pour les images survolée de mon head.

Y'a moyen de faire les hover à l'aide de CSS uniquement. Je pense que le javascript est inutile dans ce cas-ci.
Modifié par juliesunset (11 Feb 2010 - 14:51)

juliesunset a écrit :
Y'a moyen de faire les hover à l'aide de CSS uniquement. Je pense que le javascript est inutile dans ce cas-ci.

S'il s'agit des images porteuse de texte qui deviennent plus lumineuses, NON le JS est la seule bonne solution. Ces images ne doivent pas se trouver en fond d'élément (dans CSS) mais bien dans le code (ce qui nécéssite JS pour l'effet de hover).

Rifton > l'avantage de CSS par rapport à JS pour les hover est qu'il ne nécéssite pas autant de code. Mais cette technique doit être réservée pour des image de fond (donc sans contenu et non support de lien).

Laurie-Anne, en quoi un lien avec une image ( et du texte ) en background CSS mais qui a un équivalent textuel html n'est pas préférable à l'utilisation du javascript ?

Laurie-Anne a écrit :
Fais un test et désactive les images sant désactiver les CSS.

Pour ceux qui n'ont pas le temps voici le résultat : Oh plus d'image, plus de lien !

Ben si : on a du texte grâce au alt.

Le JavaScript n'est obligatoire que pour le rollover.

Sorano a écrit :
Dans quel cas, situation, les images (image de background dans l'exemple) pourraient être désactivées en "situation réelle" sans désactivation du CSS ?

A partir du moment où c'est paramétrable dans un navigateur ça peut arriver. Typiquement dans le cas d'un bas débit (on est toujours en 56k dans les villages des Hautes Alpes ).