Un site à se mettre sous la dent...http://www.cousette.com/

Bonjour,

Petit message de modiration avant la critique. Laurent, pourrais-tu éditer ton premier message et inclure le nom de ton site ou sont URL dans le titre du message afin de le rendre conformes aux règles de cette section du forum.

30k a écrit :
Et enfin pour décrire l'activité du "texte à voir" serait mieux que du texte à lire.
(texte à voir : en gros une petite touche de toshop pour créer un effet visuel léger ou fort selon les envies, sur un texte de 5 à 8 mots au plus qui renseignerait tout de suite sur le domaine d'activité)

Si je comprends bien ce que tu veux dire, tu suggère d'utiliser des images textes plutôt que tu dexte dirrectement pour la description du site. Autant pour du print pas de problème, autant pour le web, ce n'est pas tellement conseillé. Il vaut mieux, autant que possible utiliser du texte "normal" que l'utilisateur pourra styler à sa guise (que ce soit en agrandissant simplement les caractères ou en définissant un style personnel via les feuilles de style utilisateur).



Pour ce qui est du site :

Graphiquement, c'est une catastrophe sous IE6. Ma configuration actuelle a une petite résolution d'écran (viewport réduit parce que je fais plein de choses en même temps) : Une partie du site est tronquée, l'autre clairement pas là où elle devrait être.

Les tailles de caractères sont définies en px et sont donc totalement impossible à agrandir avec IE 6 et 7. IL est préférable d'utiliser des % ou des em.

Pour ce qui est du code :

* Tu as une erreur de code, à corriger.

* Quel est l'intérêt pour ton site d'utiliser un doctype XHTML1.1 servi en application/xhtml+xml ? à part faire en sorte que ça plante avec IE6 ? Je n'ai pas du de mathML ou autre qui nécéssite ce doctype. Un doctype HTML 4.01 c'est très bien et tout à fait adapté à ton besoin.

* Les titres de chaque pages devraient rapeller le nom du site.

* Les descriptions des pages ton site ne sont pas assez pertinentes, d'ailleurs Google ne les utilise pas (à part pour quelques pages). Leur principal problème est quelles sont trop courtes, une description d'environ 100-150 caractère est l'idéal.

* Les meta keywords et generator sont totalement inutilisés par les robots et peuvent donc être suprimées.

* Pourquoi dupliquer l'inclusion de ton icone ?

<link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" />

* Mélanger les médias dans la feuille CSS est dangereux ; d'ailleurs sous IE6, qui ne reconnait pas @media dans la CSS, plus de login possible puisque cette zone est définie en display:none; Il est préférable d'inclure plusierus feuilles de style via le code HTML ayant chacune un média défini.

* Il y a un problème dans ta hiérarchie de titres. "Information (h3)" (même s'il est commenté pour le moment) n'est clairement pas une sous section de "Actu Création (h2 précédent)". La hiérarchie de titre doit être assimiliée à la même que celle que l'on réaliserait dans un document word.

* Quand je vois ça :

</div></div></div></div></div>

J'ai la forte impression qu'il y a de la divite aiguë dans l'air.

* Je n'ai pas YSlow sous la main pour faire un check du site, mais j'ai tout de même l'impression qu'il y a beaucoup trop de JS dans cette page (d'ailleurs mon PC me l'a fait sentir quand j'ai ouvert la page la première fois).
Modifié par Laurie-Anne (10 Nov 2009 - 09:17)

30k a écrit :
Je sais que cette technique est restrictive quand à l'utilisation du site pour les personnes ayant un handicap de perception mais au delà des cas école ou certes ce n'est pas dans les normes d'utiliser cette méthode, il reste l'aspect visuel global qui ne peut être traité que comme cela...

Même si le débat peut durer un bon moment (personne n'a tord, personne n'a raison : tout dépends du point de vue), je pense qu'il est important de souligner un tout petit détail, les personnes ayant des handicaps de perception ne sont pas des cas d'école : ce sont toi, moi, et un peu tout le monde... dans un contexte particulier.

Personnellement, j'ai un talent pour caser mes lunettes (faut pas me demander comment, en général je ne sais pas moi même ^^; ), et du coup, à -4 dioptres, j'y vois plus grand chose sans lunettes ; mais ça ne m'empèche pas de bosser pour autant, il suffit que j'agrandisse les caractères des pages (beaucoup), mais avec les images c'est pas possible.

N'importe qui peu se retrouver dans le même cas (sans être aussi maladroit que moi) tout simplement en étant fatigué, en ayant un début de migraine...



Désolée pour le HS ^^;

Hors sujet d'entrée...

Je suis déficient visuel et aussi dyslexique suite à un accident donc je suis dans la catégorie des cas "école" et je fais partis de ceux qui sans leur lunettes (je les casses pas mais je les perds souvent ^^) ne voient pas plus loin que le bout de leur nez et peuvent dire bonjour à un mannequin dans un magasin de vêtement ^^

C'est seulement qu'avec mon handicap, bizarrement un texte à voir et plus facile à appréhender qu'un texte à lire cela peut certes donner un effet de doublon en utilisant les deux mais pour l'aspect visuel premier, celui qui accroche l'œil c'est un petit plus et un moins aussi pour ceux qui ne peuvent en profiter, je le concède... Et sans mes lunettes cet effet de style purement graphique passera à la trappe c'est sur. Mais je le défend quand même
Modifié par 30k (10 Nov 2009 - 15:26)

Bonjour Laurent,

je le trouve pas mal du tout ton site, surtout si c'est réellement ton premier.
Je pousserais même le bouchon jusqu'à dire que certaines agences web devraient en prendre de la graine, mais c'est un autre débat.

C'est vrai qu'il lui manque un peu de texte, ne serait-ce que pour stimuler son référencement.
Mais ce côté épuré permet de mettre le focus/l'accent sur les images.

J'ai pu lire sur certains forums que tu rencontrais un problème de "float", et il est avéré plus particulièrement sur cette hérésie d'IE6...

Je pense que le problème vient du "clear" que tu utilises pour positionner la structure des colonnes de ton site.
C'est un problème que je rencontrais régulièrement sur ce pseudo navigateur, et partant du postulat qu'il détient encore un peu moins de 20% de part de marché en 2009, je ne pouvais pas faire l'impasse.

J'en viens au fait, j'en viens au fait...

Donc, j'ai trouvé une parade qui marche pour moi à 100%.
J'ai banni le clear au profit de l'overflow en hidden.
Le principe :
- une div que l'on appellera Container qui sera... ton contenant.
- 2 colonnes/div respectivement Gauche et Droite.
Le code CSS

#Container {
display:block;
position:relative;
width:100%;
overflow:hidden;
}

#Gauche {
display:block;
position:relative;
float:left;
width:20%;
}

#Droite {
display:block;
position:relative;
float:right;
width:80%;
}

Le code HTML

<div id="Container">
  <div id="Droite"></div>
  <div id="Gauche"></div>
</div>

Tu remarqueras que j'ai volontairement placé la div Droite avant la Gauche, et c'est important, car cela permettra de la férer naturellement à droite avec l'instruction CSS "float:right;".

Cette technique me permet d'obtenir une compatibilité totale avec tous les navigateurs.
Pour parfaire ta connaissance en CSS, je te conseille vivement le site (en anglais) de Stu Nicholls : http://www.cssplay.co.uk/.

A te lire