Salut,

Qui va remplacer George Abitbol ? A vous de voter pour l'homme le plus classe du monde sur : http://www.reve-collectif.net/classe

Voilà pour l'accroche. Sinon, c'est Xhtml, css, php/MySQL...
Qu'est-ce que vous pensez du design et de l'ergonomie ?

h
Modifié par ashmex (10 Apr 2006 - 14:10)
Bonjour ashmex,

Il n'est pas utile, voire inopérant, de baliser les liens. Ton url n'est pas exploitable.

Et je te conseille de fournir l'url de la page d'accueil également, pour plus de clarté sur ta requête.

Smiley cligne
au niveau design j'ai rien a dire, c'est sympa, par contre niveau ergonomie, je me sens bête mais je ne sais absolument pas ce que je dois écrire dans le champ de formulaire a coté du "ok"... faudrait peut être améliorer un peu ton formulaire avec une petite description de ce que l'on doit faire.
>Véro, je ne vois ce que tu veux dire par "baliser les liens"...
Si tu pouvais préciser ta pensée...

>hellgy, je vais rajouter une boite genre "aide".

Merci à vous deux

h
Tu avais mis le lien de ton premier post dans une balise code, il me semble ...

Mais tu as corrigé depuis.
Smiley cligne
Chère Véro,
tu es plutôt George Clooney ou Jean Rochefort ?
...
j'aimerais ton avis sur mon site, steup'

Smiley cligne

h
Heu ....

Smiley confused Smiley confus Smiley sweatdrop

Sean Connery, c'est possible ?

ou bien

Daniel Auteuil, à la limite.

Mais, quel rapport avec les standards ?

Smiley lol

Ton site ...

Bon, ok, puisqu'on me le demande si gentiment, je vais aller le voir plus en détail ...

Smiley biggrin
Alors, je n'ai pas pu me rendre compte de la remarque de hellgy, puisque je me suis empressée de voter pour Sean Connery et que je ne plus voter avant le mois prochain ...

Par contre, il est une règle d'ergonomie qui recommande la présence du menu général sur toutes les pages du site : pourquoi ne pas conserver la bannière sur toutes les pages ?

Le design est classe, les couleurs aussi, offrant un bon contraste.

Je n'aime pas qu'on ouvre une fenêtre de mon navigateur sans ma permission.

Certaines images ne pourraient-elles pas se trouver dans la css (news, bonus) ?

Reste peut-être à travailler un peu l'accessibilité : liens d'évitements, etc.

Voilà, sachant que je ne suis pas sur ma machine équipée de tout mon attirail de programmation, rendant la visite des coulisses un peu moins pratique.
Modifié par Vero (07 Apr 2006 - 23:10)
Chère Véro,

merci pour tes commentaires,
le site www.reve-collectif.net n'est pas vraiment bouclé. Je ne pensais que tu irais faire un tour à la racine...

Mais je note ce que tu as dit :

- Le débat doit faire rage mais je trouve quand même vachement pratique le target="_blank" pour se balader sur un site tout en gardant à coté le site d'où on vient... Surtout avec les fureteurs à onglet ! D'un autre coté, ceux qui le veulent peuvent toujours faire un "ouvrir le lien dans une nouvelle fenetre/onglet"... Bon.

- Les images dans le CSS ? OK, j'avais pas vu le site sans CSS, c'est absurde d'avoir l'image plus le texte !

- Les liens d'évitements ? Je pige pas trop... C'est utile sur une page qui fait pas deux kilomètres de long ? Bon, je vais m'instruire sur ce forum à ce sujet.

- T'es plutôt Sean Connery alors...?
Smiley smile

h
ashmex a écrit :
Je ne pensais que tu irais faire un tour à la racine...


Je pensais qu'il était implicite, pour donner un avis, de partir de la page d'accueil ...


ashmex a écrit :

- Le débat doit faire rage mais je trouve quand même vachement pratique le target="_blank" pour se balader sur un site tout en gardant à coté le site d'où on vient... Surtout avec les fureteurs à onglet ! D'un autre coté, ceux qui le veulent peuvent toujours faire un "ouvrir le lien dans une nouvelle fenetre/onglet"... Bon.


Le débat s'appuie sur le retour d'expérience utilisateur ...
En gros, celui qui ne sait pas ouvrir ses liens dans une nouvelle fenêtre finit par se perdre au travers toutes les fenêtres ouvertes malgrès lui et celui qui sait n'en a pas besoin ...
La fonction page suivante/page précédente des navigateurs permet le repérage dans l'historique de sa navigation et l'ouverture dans une nouvelle fenêtre interromp ce repérage : d'où je viens? où suis-je ? dans quelle étagère ?

ashmex a écrit :

Les liens d'évitements ? Je pige pas trop... C'est utile sur une page qui fait pas deux kilomètres de long ? Bon, je vais m'instruire sur ce forum à ce sujet.


Même si les pages sont courtes, il peut être pénible pour un utilisateur naviguant avec un lecteur vocal, de ne pouvoir accéder facilement au contenu d'une page, par exemple, si il a déjà entendu tout ce qui le précède...
Modifié par Vero (08 Apr 2006 - 12:29)
Bonjour ! C'est le week-end et j'ai du temps, alors :

Une chose qui me choque : on préconise souvent de conserver une même charte grahique (cohérence) pour ne pas désorienter un visiteur.
La page que tu nous demande de critiquer est absolument différente de la page d'accueil. Rien que le fait de passer d'un fond noir à un fond blanc peu destabiliser. Ici, même le menu "disparaît". C'est dommage.

Concerner le [target="_blank], moi j'ai un autre point de vue : comment peut-on FORCER l'ouverture d'un lien dans un autre onglet/une autre fenêtre. C'est aussi intrusif et détestable qu'une pop-up à mon sens, ou que ces pages qui redimensionnent le navigateur à la taille du site avec un bout de javascript (quand je vois ça, je quitte directement le site). On ne fait pas un site pour nous, mais pour les visiteurs, alors c'est leur avis qui devrait primer.

La présentation de la page est agréable dans l'ensemble. Je trouve qu'il y a trop de blanc (peut-être qu'avec un fond derrière le tout, qui déborderait de quelques pixels de chaque coté ; div#conteneur).
Le cadre avec fond sur les titres "qui", "votez", "classement...", est peu esthétique. Cet effet de relief n'apporte rien.
Les couleurs sont froides, est-ce indiqué ? Ça manque un peu de chaleur ; avec une palettes de couleurs basées sur le logo 'Rêve collectif', ça irait bien.

Tu mélanges des couleurs fortes, avec des parties en noir et blanc, gris. Il faudrait trancher, ou noir et blanc, ou couleur, mais associer les deux avec un bon résultat n'est pas facile.

Pourquoi ne pas centrer le texte dans les cellules du tableau en bas de page ; et laisser un peu de blanc dessous pour mettre en valeur le bel arrondi. Smiley cligne


Élément ALT :
Cet élement, dans le balisage d'une image, sert à mettre contenu alternatif si une image ne s'affiche pas où si on ne les active pas. Il faut mettre un texte significatif, qui renseigne sur l'image, où ce qu'elle contient :
<img src="top3.gif" class="corner" alt="corner" />
Ici, l'ALT ne sert à rien et devrait être oublié (alt="") ; surtout que sur IE 6, si on survol "le coin" de tes images, on voit une infobulle "corner" peu utile.


Pour les passages en gras, tu devrais utiliser <strong></strong> et non <b></b>. (Mieux, fais une classe spéciale "gras" dans ta CSS.)

Ton lien sur George Abitbol oriente sur une page externe, et en plus sur une recherche google : pas très élégant tout ça. Tu devrais peut-être faire des fiches toi-même.

C'est un détail, mais "Ok", sur un bouton "submit", ça ne veut pas dire grand chose : mieux vaut utiliser "afficher", "envoyer", "valider"... à la limite un "Go" de temps en temps. Ici, pourquoi pas "Soumettre" (rien à voir avec du SM). Smiley ravi

Les flèches sur les liens de retour (back = beurk !) ressemblent trop aux flèches des pages persos Wanadoo. Tu devrais trouver une image plus adaptée à ton site.



Parenthèse sur la page accueil :
J'aime bien le logo jaune sur fond noir, j'aime bien le mélange "fond beige" associé au "bordeau" (pas sûr que ce soit les bonnes teintes) dans la partie contenu : mais (oui, y a toujours un mais qui gâche tout), je ne trouve pas que les deux s'associent bien.

Au survol d'une cellule, le fond devient jaune : ça ne va pas je pense. Si je clique sur "les seventies vont (...)", je vois une cellule à droite pour la radio : la surbrillance reprend du "bordeau" clair et je trouve ça plus agréable que du jaune. Peut-être devrais tu faire un essais en modifiant la couleur du titre et de menu. Smiley rolleyes
La partie biseautée des angles supérieurs droits est un parti pris, mais je n'aime pas.

Pour les autres éléments (comme la partie interface radio), je trouve ça bien et que ça colle avec le sujet et les titres du site.
Smiley decu Donc, je n'aime pas : le fond noir, la surbrillance en jaune, les angles coupés.
Smiley biggrin Mais le reste, je trouve ça soigné et agréable à lire.

Bon courage !
Salut,
J'ai eu un peu de temps et j'ai fait mis à jour : www.reve-collectif.net/classe.

- une page d'aide pour hellgy.

- un remix du design pour neko. Je garde mon fond blanc, ma flèche "wanadoo" et mon tableau aligné à gauche ! Smiley langue mais j'ai bricolé mes titres, mon bouton "OK", mes "alt" inutiles...

- pour le <strong> plutôt que le <b>, je veux bien une explication. A 6 contre 1 (caractères), je privélègie toujours le <b>... à tord ?

- pour le lien vers google, j'ai pas trouvé mieux. Vu que tout ça est automatique et change selon les votes, je ne peux pas prévoir qui va être l'homme le plus classe du monde... alors :
<a href="http://www.google.fr/search?q='.$first['nom'].'">'.$first['nom'].'</a>

...

- la page www.reve-collectif.net attendra un peu... A ce propos, l'idée était de considérer le site de l'homme le plus classe du monde comme un mini-site, complètement à part. C'est sûr, avec un nom de domaine bien à lui ce serait la classe mais non.

Bien à vous.

h
Salut, salut !

a écrit :
- pour le <strong> plutôt que le <b>, je veux bien une explication. A 6 contre 1 (caractères), je privélègie toujours le <b>... à tord ?
Pas spécialement tort, non. Surtout si tu penses avant tout au poids. La balise B met en gras, la balise strong sert à mettre du texte en avant : B, c'est pour le style, strong, pour donner du sens au texte. Raphaël en parle ici : http://css.alsacreations.com/Tutoriels-et-articles-divers/strong-b-em-i-quelle-balise-utiliser-et-pourquoi


Pour le cas du lien google, tu peux toujours préciser que c'est un lien externe à ton site, qui pointe dehors. La pseudo classe after est utile ici :

CSS

.ext:[#orange]after[/#] {
    content: " [ ext ]";
    color: #999
    background-color: #xxx;
    }
(Tout ce qui est entre les guillements dans le content est pris en compte, même les espaces. On peut aussi utiliser une image : [ content: url(http://machin.truc/image.extension); ]

BALISAGE
a écrit :

<a class="ext" href="http://www.google.fr/search?q='.$first['nom'].'">'.$first['nom'].'</a>

RESULTAT
L'homme le plus classe du mois est George Abitbol ! [ ext ]

(Remarque : ici, je dois mettre un espace avant et après "ext" pour que les crochets s'affichent bien. Dans contenent, j'ai mis un espace devant [ ext ] qui évite de le coller au lien, sinon au aurait :
L'homme le plus classe du mois est George Abitbol ![ ext ]
La petite soeur d'after, before, mettrait le [ ext ] devant le lien.)


a écrit :
A ce propos, l'idée était de considérer le site de l'homme le plus classe du monde comme un mini-site, complètement à part.
Dans ce cas ma remarque précédente n'a aucun intérêt !

Le lien "aide" est une bonne idée.

bouton "OK" : heu... bin, j'allais dire une grosse con****. Mon navigateur n'avait pas rechargé correctement les images, se contentant de reprendre celles qu'il avait en cache, du coup, je n'avais pas vu les changements. Smiley murf

Re-bon courage !!
Modifié par Smiley neko (09 Apr 2006 - 17:06)
Administrateur
Bonjour,

merci d'éditer le titre de ce sujet pour y faire figurer l'URL ou le nom du site comme demandé dans le sujet d'annonce

Felipe