Dernière soumission

[Gribouille26]

Salut,

Je voudrais avoir votre avis (sûrement le dernier...) sur mon site, avant de passer au référencement et à l'échange de liens.

Il manque des pages produits et des photos pour aérer le texte.

J'attend toutes vos critiques!

EPICE

Merci

[rico]

Sincèrement ?

Moi je le trouve très bien conçu ton site !!! C'est clair, simple et concis ! Photos de bonne qualité, texte aéré, joli design !

Ton menu est pas mal en tout cas, bien optimisé apparemment ! je crois meme que je vais le tester

Sinon, attends bien d'avoir fini toutes les rubriques avant de le référencer.

Avis positif

[Gribouille26]

Merci Rico!

Pas même une petite remarque?

Je vais retourner à mes pages produits en attendant...

[Bug]

sous IE 6 ça va, mais sous FF 0.9, le menu du haut (le déroulant) est beaucoup trop long et provoque l'apparition de l'ascenceur horizontal, comme si le menu faisait 100 % de la page et pas de son conteneur

j'ai jeté un oeil sur ton fichier css, mais je dois avouer que je n'ai pas tout compris

désolé et bon courage

[Anonymus]

Je ne trouve pas les menus suffisamment contrastés par rapport à la couleur d'arrière plan, ce qui fait qu'ils sont assez 'illisibles' .C'est vrai que je n'ai pas un bon écran, mais je ne dois pas être le seul.

Il n'y a pas de 'bas de page, ce qui fait que le texte se retrouve collé à la barre des taches, et donne l'impression qu'il 'en reste en dessous', ou tout du moins, que le texte n'est pas complet. C'est dommage aussi. Tu devrais faire un 'footer', ou un truc comme ca.

[Berberber]

C'est très joli mais :

la barre rouge en haut, me parait bien trop grande, je suis obligé de scroller sur le coté pour tout voir.

dommage de ne pas avoir de propre domaine, un .org serait certainement beaucoup plus correspondant au site

Bernhard

[Monique]

Bonjour,

J'ai quelques remarques au niveau de l'accessibilité :

- il n'y a pratiquement aucun texte alternatif (attribut alt) pour les images, dans le cas des images servant de liens par exemple l'utilisateur qui ne dispose pas de ces images n'a pas accès aux autres pages du site (dans le cas d'un texte en image, l'attribut alt doit contenir ce texte)

- le menu déroulant ne fonctionne pas si le JavaScript est désactivé (ou non disponible), si tu ne donnes pas d'alternative, l'utilsateur ne pourra pas accèder à certaines pages

- tu devrais utiliser les balises h1, h2... pour structurer le contenu et utiliser une suite de <p> plutôt que des <br> pour les textes longs (qui seront plus aérés et plus faciles à lire)

- il serait utile d'ajouter un plan du site accessible depuis toutes les pages

Le site est très intéressant et la présentation générale est agréable

Il mérite d'être encore amélioré !

[Gribouille26]

Merci de toutes ces réactions!

Pour l'affaire du menu trop long sur Mozilla, je ne vois vraiment pas non plus...

Pour le bas de page, il sera constituer des partenaires! Mais je vais essaye de faire un faux pour voir...

Pour les couleurs du menu, c'est epice qui a voulu ça. Mais je pourrais mettre les sous-rubrique en gras, ce sera peut-être plus lisible!

On a un nom de domaine, mais les redirections, c'est une autre affaire...

- le menu déroulant ne fonctionne pas si le JavaScript est désactivé (ou non disponible), si tu ne donnes pas d'alternative, l'utilsateur ne pourra pas accèder à certaines pages

Quelle alternative? Un menu omnipresent?

Je fonce de ce pas rajouter des alt et des h1 h2....

[Lurch]

Hello !

J'avais déjà visité (rapidement) ton site que j'ai trouvé très bien présenté mais aujourd'hui je vais essayer de mettre des lunettes de critique.

Habituellement je surfe avec IE6 mais cette fois j'ai pris firefox pour voir.

La page d'accueil :

Ben moi je la trouve très chouette en ce qui concerne la présentation. Sobriété et originialité.

Faire, peut-être, sur les liens du bas (nous contacter, etc...) un effet quand la souris passe dessus genre a.hover{text-decoration:underline;} voire même un changement de couleur en rapport avec le vert du logo a.hover{text-decoration:underline; color:#006600;}

Quand on clique sur le logo, on arrive à une page de présentation d'Epice. C'est une bonne idée mais, effectivement cela manque de ALT. En effet, on ne sais pas où même ce lien. Et puis, sur ce graphisme pourquoi ne pas rajouter un truc genre "présentation d'Epice" ? Ce n'est pas compliqué à faire avec un logiciel comme Paint Shop Pro.

Présentation d'Epice

Avec IE6 pas de problème.

Avec Firefox, le menu (en jscript ou dhtml, je n'ai pas regardé) déborde de l'écran et le menu déroulant se bloque pafois.

D'une façon générale, je rejoins Monique, il est préférable d'aérer tes textes en séparant bien les paragraphes. Je rajouterai que tu devrais essayer de justifier ton texte (text-align:justify) enfin, ça c'est une question de goût...

Pour être perfectionniste, ce genre de passage :

(15aine du commerce équitable, Semaine de la Solidarité Internationale ...)

Essaie de mettre le "aine" de 15aine en exposant ou mieux écris quinzaine.

Un dernier truc, que j'avais remarqué l'autre jour : sur la page produits essaie de mettre des images vraiment en rapport (la canne à sucre reviens souvent ).

En ce qui concerne le menu, j'ai laissé tombé ce genre de truc, au demeurant très classe, dans la mesure où ça ne passe pas bien sur les butineurs exotiques.

Tu n'as pas encore mis de doctype, Monique te le rappellera certainement un jour.

Ton CSS

Tu as mis une image en fond de page pour une couleur unie. Cette couleur correspond au code : #f7efde.

A la place de background-image: url(/fondBeige.gif); essaie :

background:#f7efde;

Tu allègeras un peu ta page et donc le temps de chargement.

A part ça, ton site est vraiment très chouette et, en plus, le sujet m'intéresse.

Voilà en ce qui me concerne.

PS : le lait-fraise équitable, on y a déjà pensé?

[Transfert DVD]

Salut,

perso je le trouve très bien

peut être faire ressortir un peu plus tes menus

[HoRuSs]

Je viens de faire un p'tit tour sur ton site et c vraiment bien le genre de site que l'on aime visiter et découvrir tous les jours...

Tu dis que tu as un nom de domaine, mais enfin c mon avis (j'en ai fait l'expérience) si tu as juste pris un nom de domaine et bien au niveau des redirection c pas top pour le référencement genre ca sera plus facile de bien référencer ton .free.fr (surtout qu'il est déjà PR5).

Je te conseil de prendre un petit hébergement pro pour cette raison principale (pour ma part pour 60 még plus le nom de domaine je m'en sort à 25 environs TTC par ans donc ca va).

Enfin c toi qui vois mais nom de domaine sans hébergement c'est pas le pied et c'est super chiant à référencé.

Bonne continuation.

Amicalement HoRuSs

PS: les photos des produits sont magnifiques.....

Modifié 28 Juin 2004 par HoRuSs

[planete32]

Bravo ton site est simple et très sobre tout pour réussir

sympa ton hergonomie, ça change de ce qu'il se fait

facile en navigation

pas plus désoler

[Gribouille26]

Quand on clique sur le logo, on arrive à une page de présentation d'Epice. C'est une bonne idée mais, effectivement cela manque de ALT. En effet, on ne sais pas où même ce lien. Et puis, sur ce graphisme pourquoi ne pas rajouter un truc genre "présentation d'Epice" ? Ce n'est pas compliqué à faire avec un logiciel comme Paint Shop Pro.

Je n'arrive pas a le faire comprendre a EPICE!! Il veulent que le lien soit ici....

Pour la couleur , je m'en vais changer ça.

NB: pour les fraises, je vais leur proposer un échange équitable avec mon jardin!

Le menu est un vrai pb avec Mozilla! Mais epice l'aime bien, et je ne trouve rien de ressemblant...

Pour l'hebergement pro, j'en parle depuis des mois, mais rien!

[Lurch]

Essaie de voir ici pour les menus

[Gribouille26]

C'est déjà le leur!!

[Lurch]

Ben pourtant ça passe sur mozzila

[Gribouille26]

C'est que j'ai du changer trop de chose!

Ou la mise en page l'a changé!

Au fond, il marche bien. c'est juste la taille que déconne....

[pierredureau]

Abandonne les position: absolute, ça simplifiera ton CSS et te simplifiera la vie par la même occasion.

Il faut vraiment se le mettre dans la tête, les position:absolute sont à éviter. Il doit exister des bonnes utilisations, mais je n'en connais pas (ah si peut-etre, le Zen Garden avec la BD...).

[Lurch]

Bon ben moi je suis ce fil de près car je suis en plein dedans.

Tout collait mais tout s'écroule avec le footer !!

Voilà en gros comment j'ai structuré ma page (mal à l'évidence) :

1- Un Div pour le titre (pos:absolute; top:0; width:90%, margin-left:5%).

2- Un cadre (on dit container quand on est branché si je comprends bien ) pour le reste (pos absolute; top:0; width:90%; margin-let:5%; height:100%).

2 . 1 - Un div centre pour le corps de la page (pos relative; top:0; margin-left:20%; margin-right:20%)

2 . 2 - Un div gauche (pos absolute; top:0; left:0; width:120px; height:800px)

2 . 3 - Un div droit (idem gauche sauf : right:0)

Dans l'html, j'ai srtucturé tout ça sur ce principe (en pensant qu'il vaut mieux que le corps de la page soit lu avant le reste ==> accessibilité) :

<div class="cadre">

<div class="centre">texte page</DIV>

<div class="gauche">menu</div>

<div class="droit">texte côté droit</div>

</div>

<div="titre">TITRE</div>

Bon, en plus, comme je suis perfectionniste et que je ne fais jamais simple (déjanté, quoi ) j'avais mis un div "titre page" mais bon je vais simplifier...

Bref, là où ça carabistouille complètement, c'est quand les côtés sont plus longs que le centre : pas moyen de mettre une ligne de séparation genre bas de page (même vide) et on a l'impression que les colonnes sont tronquées.

J'ai lu les articles conseillés à Gribouille mais là je suis un peu "largué" (cette histoire de hauteur minimum qui n'est pas prise comme il faut par IE et que, donc, il faut piéger avec des <body> plus ou moins exotiques, j'ai mal à la tête...)

J'ai recommencé plusieurs fois mon css, plus rien n'est à sa place maintenant. (bon j'ai sauvegardé l'ancien) il ne doit pas manquer grand chose. Maintenant je lis le conseil de Pierre Dureau : "il faut tout mettre en relatif"

Bon, ben je dois tout recommencer ? J'ai essayé le "tout relatif" mais j'ai des problèmes de positionnement... Pour cette version j'étais parti des exellents articles de pompage (j'ai peut-être loupé une ligne).

Je fatigue beaucoup, là !!!! SOS !!!

[Lurch]

Voilà où j'en suis : cela semble fonctionner à peu près.

Voilà ce que ça donne :

Le CSS

.cadre{

margin-top:1%;

margin-left:5%;

width:90%;

height:100%;

}

.titre{

width:90%;

padding-bottom:2%;

margin-left:5%;

}

.titrepage{

margin-top:5%;

width:90%;

}

.centre{

padding-left:5px;

padding-right:5px;

margin-left:20%;

margin-right:20%;

}

.gauche{

float: left;

width:120px;

height:900px;

}

.droit{

float: right;

width:120px;

height:900px;

}

.pied {

height: 30px;

background-color: #99CC99;

}

.clear{

clear:left;

visibility:hidden;

}

Code HTML

<div class="cadre">

    <div class="titre">

      TITRE

      <div class="titrepage">

                TITRE DE LA PAGE

      </div>

</div>

<div class="gauche">

      MENU GAUCHE

</div>

<div class="droit">

      MENU DROIT

</div>

<div class="centre">

      TEXTE DE LA PAGE

</div>

<hr class="clear" />

<div class="pied">

      PIED DE PAGE

</div>

</div>

Dans mon site, j'ai un titre du site, comme tout le monde, mais aussi un titre différent par page que j'appelle ici "titrepage".

Je l'ai inclus dans le bloc titre pour plus de facilité mais je ne suis pas certain que cela soit nécessaire.

La seule difficulté que je rencontre encore semble être la longueur des côtés. Je vais un peu tricher en faisant des côtés(menu gauche et menu droit) dont le texte sera définitif donc la longueur aussi. Pour le moment j'ai fixé arbitrairement la longueur des côtés à 900px.

Le pied de page s'installe sans problème, quelle que soit la longueur du bloc centre gâce à la ligne : <hr class="clear" /> que j"ai mise juste avant la fin du cadre. Cela impose au bas du cadre de descendre sous les autres blocs.

Tout ceci a l'air de fonctionner sous IE et sous Firefox et en utilisant le "relative" (car je crois que si on ne renseigne pas l'attribut position, le bloc est en relatif).

[ à Pierre Dureau ! ]. J'utilise aussi le plus possible les %.

Jusqu'à maintenant, je bloquais sur le positionnement horizontal des côtés c'est pourquoi je les mettais en "absolute" mais avec l'utilisation de "float" ça a l'air de coller.

Voilà ! Je vais faire les finitions et me boire 1 bière + 1 lait-fraise.

[j'espère que je n'ai pas dis de tros grosses ânneries dans ce post...]

[Gribouille26]

Je test ton code et je te rejoins avec le lait! Tout frais!

[Lurch]

Et de l'aspirine aussi, j'ai un peu mal au crâne...

Le gros truc c'est d'éviter les positions absolues (bis repetita) et de bien utiliser le "clear" qui permet de remplir un truc sans qu'il soit visible "visibility:hidden".

[Gribouille26]

Ca marche, mais j'arrive pas a le faire coller avec ma page....

[Lurch]

Tu as écris :

<img class="logo" src="/logos/LogoTransp300.gif">

<hr class="clear" />

<div class="footer">EPICE-2004 © Webmaster</div>

Je pense qu'il faut mettre le clear ailleurs :

<img class="logo" src="/logos/LogoTransp300.gif">

<div class="footer">EPICE-2004 © Webmaster</div>

<hr class="clear" />

[Gribouille26]

Toujours pas....

Mais il est repassé sur le logo...