Http://www.inconcevable.net -> demande d'avis

Bonjour à tous
À force de lectures sur les CSS, j'ai fini par créer mon premier site sans tableau et en essayant d'être le plus conforme possible (à mon niveau de connaissance actuel) aux bonnes pratiques web.

Le site en question est bien plus un site "école" où j'apprends à manier le html et les css plutôt qu'un vrai site.
J'ai fait en sorte que le site soit lisible sans style.

Pour le reste, je m'en remets à votre jugement

http://www.inconcevable.net/

Si vous en avez le temps et l'envie, c'est avec plaisir que je lirais vos critiques même (et peut-être surtout) négative, ce qui me permettra de progresser dans le bon sens


Note : le site rencontre a priori des soucis avec IE (je n'ai pas windows, juste IE4linux d'installé) qui sont au nombre de 3 :
-décalage des menus de doite
-bandeau blanc juste en dessous de la bannière d'entête
-un gros bug lors du passage au dessus du menu graphique
J'essayerai de résoudre ces pbs un peu plsu tard, car prendre du temps pour chercher comment combler les failles d'IE, c'est autant de temps perdu pour apprendre les CSS

EDIT: ne faites pas torp attention au texte, il doit comporter des fautes de frappes ou d'orthographe qui seront corrigées prochainement, merci
Modifié par Nitram (13 Apr 2006 - 19:43)

Bonsoir,

Première impression : le site est très agréable. Rien que l'apparence me donnerait envie de m'y attarder. La partie design semble assez étudiée, recherchée.

Premier bémol sous Firefox (que tu connais) : quand je passe sur un menu, la flèche de ma souris est prise de saccade, lag. Mais rien de tout ça sous IE 6. Nouveau test : la souris saccade même en bougeant ailleurs sur la page, comme sur une zone vide, ou le menu de mon navigateur.
La vitesse d'affichage s'en ressent aussi sous Firefox, plus lente que sous IE.

Cependant, c'est vrai que l'entête du site souffre d'un problème d'affichage avec IE (sous Win). Plutôt qu'un long discours, des captures d'écran : http://univers-fusco.com/tests/test01.jpg


Tes rollover posent problème c'est évident, mais ce n'est pas le plus important. Un seul est utile à mon sens : le "A PROPOS" qui fait apparaître du texte à gauche. Rien ne justifie que les deux autres éléments (Réalisations, Contact) soient en rollover.
Étant définis par la partie CSS, ils disparaissent si on désactive les images. Ça peut sembler un problème mineur, ce menu étant doublé en bas à gauche, c'est dommage.


Les éléments "Réalisations" et "Contact" devrait être incorporés dans le balisage normal :

<a href="http://www.inconcevable.net/realisations.php" >Réalisations</a>
<a href="http://www.inconcevable.net/contact.php">Contact !</a>

Ça allégerait déjà quelque peu la page, en évitant quelques images.
Page qui est assez lourde :

a écrit :

Documents (1 fichier) 2 Ko
Images (18 fichiers) 265 Ko
Feuilles de styles (1 fichier) 7 Ko
Scripts (1 fichier) 3 Ko
Total 277 Ko

* Il manque des éléments ALT sur les images. (C'est curieux, car je note la présence de <label> dans
le formulaire. )
* Le menu haut est sympa, mais le contraste est peu élevé dans l'état par défaut ; le "inconcevable" qui apparaît est également difficilement lisible (on le devine plus qu'autre chose).

Dans contact, le texte dans ton "textarea" à un espace vide au début, c'est dû au fait que ton balisage est présenté sur plusieurs ligne ; si tu mets tout à la suite, l'espace vide devrait disparaître.
Petit plus pratique pour tes visiteurs : comme tu codes en 1.0, tu peux utiliser un peu de javascript pour effacer le texte quand on clique dans la case (toujours sympa pour le visiteur) :

<textarea name="commentaire" cols="40" rows="10" id="com" onclick="if (this.value=='Entrez ici une description du site souhaité...') this.value=''">Entrez ici une description du site souhaité...</textarea>

Ce code s'adapte aussi dans un champ "input" (l'élément onclick est interdit en xhtml 1.1 ).

a écrit :
Vous êtes ici : Informations > Derrière le site

Si le site se complexifie, avec des sous-sous... niveaux, il peut être intéressant d'associer des liens au texte du "vous êtes ici". (Sauf sur le dernier élément, celui qui présente la page en cours - je le dis car j'avais fait la bourde... .)

Concernant le code, tous les menus sont en début de page. L'utilisation de liens d'évitement serait utile pour permettre à certains visiteurs de "sauter" les menus.

La "fin" du formulaire est en majuscule (mais pas le début) :

	<INPUT TYPE="HIDDEN" name="env_report" value="REMOTE_ADDR,HTTP_USER_AGENT">
	<INPUT TYPE="SUBMIT" value="Valider">
	<INPUT TYPE="RESET" value="Annuler">
	</FORM>

<img src="http://www.inconcevable.net/stats/phpmyvisites.php" alt="phpMyVisites" [#red]style="border:0"[*/#] />

À mettre dans le fichier CSS.

Le cochon-de-bas-de-page est trop près du menu sur la page "Standard". Peut-être qu'une marge sur le dessus pour lui faire un peu de place...

Le gif animé sur les menu est discutable.

Le forum n'est pas en accord avec la charte graphique du site.

Les couleurs de fond des champs du formulaire sont grises... tristes, dans un site coloré. Ce serait pas mal de reprendre les couleurs chaudes du site dessus, ça intégrerait le formulaire dans le site.


Je pense que le plus dur est fait. Le plus important est d'alléger un peu la page est de corriger les problèmes sous Firefox (saccade), et l'affichage de l'entête sous IE.
Bon courage Nitram !
Modifié par (14 Apr 2006 - 02:09)

Bonjour,

Tout d'abord c'est vrai que le site est très lourd (j'ai mis bien 45 seconde en 56k)

Sinon les couleurs du menu gauche "inconception" son trop claires quand on passe au dessus, ça donne du jaune sur fond blanc.

Sinon je seche, tout le reste est très beau!! (et le projet parrait sympa)

Bonne continuation

Bonjour et merci d'avoir pris ce temps pour m'aider

Je passe pour le moment les bugs pour IE, il faudra que je prenne plus de temps pour voir ce qui cloche

En ce qui concerne les ralentissements sous firefox, je n'en ai aucun. Tu dis que le curseru de la souris saccade même dans les menus du navigateur... Cela pourrait peut-être venir du cochon animé que j'ai mis en fond de page (il cligne de l'oeil toutes les 6 secondes) ? C'est pour moi la seule possibilité, car je n'ai pas utilisé de code particulier autrement.



J'ai légèrement allegé la page (de 60Ko) et je pense pouvoir gagner encore 100 Ko. Travail en cours Merci de me l'avoir fait remarquer ! Je trouvais que le menu rollover donnait un peu de dynamique à un site statique comme celui ci, mais je songe à l'enlever, ou du mois à le modifier...

EDIT :

a écrit :

Total 118 Ko

Je n'ai pas vu d'images où des alt manquait ? À part pour les images d'arrière plan de décoration. Si c'est ce dont tu parles, je ne pensais pas ajouter de "alt" car de mon point de vue, si une personne se sert des alt, c'est principalement parce que les images ne l'intéressent pas ou qu'elle ne peut pas les voir; donc des images de décorations peuvent passer à l'as, mais peut etre que ma façon de voir les choses n'est pas bonne ?

Merci pour l'astuce du formulaire, c'est désormais corrigé !

Les liens d'évitement sont en place.

En ce qui concerne le cochon en bas de page qui se rapproche trop du menu de gauche quand la page est vie ou presque, je vais voir ce que je peux faire.

Je pense également placer des liens dans le fil d'ariane si le site se complexifie, ce qui m'étonnerait fortement

Je n'ai pas encore touché au forum, je pense juste changer les couleurs, quoique...

En ce qui concerne les couleurs du formulaire, je pense que tu parles des boutons ? Les champs de formulaires sont chez moi blanc par défaut, j'avais donc oublié que certains navigateurs affichaient des formulaires gris.


Merci encore pour tes conseils

Je vais continuer à corriger les problèmes, pour poster ici même lorsque j'aurai un site en version "finale"

Si toi ou d'autres personnes ont de nouveaux commentaires, n'hésitez pas !!

EDIT : @linki : merci Je vais allèger le site et changer les couleurs du menu pour un plus grand contraste !
Modifié par Nitram (14 Apr 2006 - 11:55)

Hello,

a écrit :
En ce qui concerne les couleurs du formulaire, je pense que tu parles des boutons ? Les champs de formulaires sont chez moi blanc par défaut, j'avais donc oublié que certains navigateurs affichaient des formulaires gris.

Oups. Touché, coulé ! J'oublie que mon Théme XP me met tout ça en gris. (Du coup, si chez moi c'est gris, la couleur peut être toute autre pour un autre visiteur, si tu veux le laisser en blanc, autant lui donner une couleur de "background" blanc.)

* Pour les ALT, tu as raison, il ne faut pas mettre de CONTENU pour les images servant à la décoration, etc. Mais je crois que certains validateurs d'accessibilité renvoient une erreur si on en met pas ; ils préfèrent : alt=""

* Bel amaigrissement de la page (de quoi rendre jaloux les humains !!).

a écrit :
En ce qui concerne les ralentissements sous firefox, je n'en ai aucun.

* Je n'ai jamais eu ça sur un autre site, alors je suppose que ça vient du tiens... mais il se pourrait que le problème soit chez moi (il faudrait avoir d'autres avis).

* Le menu rollover : J'ai dis qu'il est inutile pour les deux éléments de droite uniquement. La raison, on peut obtenir ça avec un peu de CSS et de balisage (ça permettrait au menu de ne pas disparaître sans les images).


Avec le coup des ralentissements, je commence à m'inquiéter : serait-ce mon petit Firefox qui fatigue ?
Modifié par (15 Apr 2006 - 16:26)

neko a écrit :
Avec le coup des ralentissements, je commence à m'inquiéter : serait-ce mon petit Firefox qui fatigne ?

Bonjour,
Je confirme le ralentissement avec Firefox. J'ai également testé avec FF 1.07 sans extension: idem.

Alan a écrit :


Bonjour,
Je confirme le ralentissement avec Firefox. J'ai également testé avec FF 1.07 sans extension: idem.

Est ce que le ralentissement se produit lorsque le cochon en haut à gauche (en fond d'ecran) cligne de l'oeil ?
Je ne vois que cette possibilité...

C'est bien ça, ça se produit quand le cochon cligne de l'oeil.

Non, Le cochon n'y est pour rien chez moi.
D'après quelques essais, en supprimant le margin:0; qu'il y a sur les a:hover; des menus (et qui ne servent apparement à rien), cela évacue le problème. C'est bizarre, mais c'est ce que je constate.

Autres moyens (également étranges) d'évacuer le problème : remplacer le fond.png par un fond.gif ou un fond.jpg, ou ne pas mettre le menu en float.
Evidemment le mieux est simplement la première solution (supprimer le margin) qui en plus va dans le sens du principe de parcimonie.

Voici une page de test
Modifié par Alan (16 Apr 2006 - 00:49)

Bonjour,

Dans ton menu, des puces se perdent.
Je veux dire par là que j'ai plus d'éléments de liste que ce qu'il y en a réellement. Je ne sais pas si c'est très clair ...

Pour ton formulaire, le texte par défaut qui ne part pas tout seul est en effet très énervant.

Voici une variante du script précédent qui marche aussi quand on navigue au clavier :

<textarea name="commentaire" cols="40" rows="10" id="com" onfocus="if(this.value==this.defaultValue) this.value='';">Entrez
ici une description du site souhaité...</textarea>

En effet, onclick ne satisfait pas tout le monde, moi le premier.

Merci à tous pour vos nouvelles remarque

J'ai supprimé les margin sur les a:hover, j'espère que de cette façon vous ne connaitrez plus de ralentissements intempestifs. Je me suis rendu sur la page de test que Allan a donné, mais je ne recontre aucun ralentissement, cela doit provenir du système sur lequel est installé le navigateur.

Neko, rencontre tu toujours des ralentissements quand le clochon cligne de l'oeil ?

QuentinC j'ai changé onclick pour onfocus, je pense que c'est lieux ainsi effectivement.
Par contre je n'ai pas compris ta remarque sur les listes. Désolé !

Je pense avoir reglé le problème d'affichage sous IE du menu et du rollover, si vous pouvez me le confirmer, j'en serais ravi
Modifié par Nitram (17 Apr 2006 - 20:29)

Bonjour Nitram,

Pour moi pas de ralentissements sous win2k que ce soit sous FF ou IE.

Par contre désolé, mais le menu "délire" complètement sous IE.
Décalé vers le bas et avec un gros retard d'affichage des rollover, comme du cops il y'a un fond blanc sur le div ou le ul du menu, on a un blanc qui s'affiche. (ah ben en fait c'est plusieurs divs.).
tiens je viens de voir que ça ne le fait vraiment que si le site est ouvert a la fois sous IE et FF.
Dans le doute peut être prévoir un div qui englobe les autres avec comme fond l'image par defaut de l'ensemble de la barre. (désolé pour la cure d'amaigrissement ).

Un manque de titres dans les liens du menu de droite je pense alors qu'on en trouve globalement partout sur le site (tiens sauf le lien ubuntu sur la page "derriere le site").

Autre remarque sur le forum qui "force" une nouvelle fenêtre.

Par contre j'aime beaucoups le design, très recherché et fort joli.
Un truc me gène pourtant, je ne sais pas quoi exactement, peut-être une ambiance générale qui ne me semble pas en adéquation totale avec le message, le cochon me donne une drôle d'impression (bon Ok j'avoue j'ai été traumatisé par le cochon d'amytiville - vous trouvez pas qu'il fait peur le cochon du bandeau avec ses yeux blancs cerclés de noir? ) et le bandeau me fait imanquablement penser à l'ésthétique de films comme Seven ou Saw alors que la mise en page des contenus est agréable à lire accueillante.

Wala wala.
Bon courage a toi.

AymericJ a écrit :
le menu "délire" complètement sous IE.
Décalé vers le bas et avec un gros retard d'affichage des rollover, comme du cops il y'a un fond blanc sur le div ou le ul du menu, on a un blanc qui s'affiche.

Arf, je ne comprends plus rien, j'ai pourtant suivi un tuto tiré du livre CSS2 pratique du web design, et je ne rencontre pas ni n'ai pas entendu parler d'un ralentissement au niveau du menu de droite... Pfiu, ça devient complexe, j'ai l'impression que le site fonctionne différement chez chacun, en relisant tout le topic.

a écrit :
Un manque de titres dans les liens du menu de droite je pense alors qu'on en trouve globalement partout sur le site (tiens sauf le lien ubuntu sur la page "derriere le site").

Tu dois parler je pense de l'atrtribut "title" ? Si c'est le cas, que rajouterais tu dans les title des liens du menu ? Une description de chaque rubrique ?

a écrit :
Autre remarque sur le forum qui "force" une nouvelle fenêtre.

Oui, bonne remarque, je n'ai pas encore touché au forum, et j'ai peur que si des gens cliquent sur le lien du forum et que celui s'ouvre dans une même fenêtre, les gens soient perdus (pas le même design, les mêmes menus...) Peut etre que je me trompe ?

a écrit :
vous trouvez pas qu'il fait peur le cochon du bandeau avec ses yeux blancs cerclés de noir?

Sur ce point mon ressenti est biaisé : je connais le cochon original qui m'a servi pour la photo, c'est à la base un cochon tout rose en mousse anti-stress super sympa, ce qui fait que je le trouve également sympa sur la photo. maintenant à y regarder de plus près, il est vrai qu'il n'est pas très accueillant...

a écrit :
Bon courage a toi.

merci, car j'ai l'impression de ne pas être sorti d'affaires avec ces bugs bizarres !

Yep l'attribut "title", il est vrai que ça peut semble redondant si tes textes de liens sont explicites mais ça permet de placer un court descriptif de la page à venir et de placer par exemple un "Lien externe - description" pour les liens..externes.

Pour les title tu peux prendre par exemple le titre principal de la page à venir : "Sites déja réalisés", "Contacter inconcevable.net", "Logiciels Libres, définition".

En plus, plancher sur ces "title" permet de bien voir si tes liens sont explicites et au passage de réfléchir à une logique de construcion du site, comme le rapport entre ces "title" et les "titre" meta des pages affichées dans le navigateur...

Voilà qui est fait pour l'attribut tittle

Reste maintenant le déprimant problème : les bugs en tout genre avec IE. Si vous avez une idée, n'hésitez pas

Si je n'y arrive pas, je posterai dans la rubrique "CSS", car sinon cela sortira du cadre de la rubrique "demande de conseils et ergonomie".

Merci à toutes les personnes qui se sont exprimées et qui ont permis de m'aider à améliorer le site, et si vous n'avez pas encore réagi : vous pouvez encore l faire, je suis ouvert à toute remarque

Mon avis ne portera pas sur la partie technique mais uniquement sur l'esthétique et l'aspect graphique. Je passerai vite fait sur le concept du site que je trouve très interressant puisque mon propre site se place dans ce genre de vitrine mi-pro/mi-amateur.
Les couleurs sont sympa mais pas très joyeuses, il faudrait penser à aérer les menus en laissant un espace entre le bord du menu et le lien (ptete que ça a été dit mais j'ai lu très vite les réponses dsl) et surtout... surtout... le détail qui tue:
Les ombres

Elles doivent être dirigées selon le même angle, or l'ombre de la page principale est dirigée vers la droite et l'ombre du "tuyau" est vers la gauche.
Cette règle est décrite dans le livre CSSZenGarden et dans bien d'autres aussi certainement.
Modifié par Charlycoste (18 Apr 2006 - 17:28)

...

bonjour à tous !!

je ne parlerai que de l'aspect du site que je trouve vraiment sympa,
tant au niveau des couleurs que des choix d'images !
On s'y retrouve rapidement , c'est clair et bien pensé !
J'aime vraiment .

Au niveau des navigateurs pas de problème avec Mozilla ( version 1.5, ou
seamonkey )
Concernant IE sous Linux (!!?) c'est juste une versioin 6 "émulée avec Wine
qui rame à 100 à l'heure ... donc je ne peux juger des bugs cités plus haut !

..seul remarque "négative" et le déplacement horizontal de quelques px
lors de l'accés aux pages "réalisations " et " contact " ( ps : et ce sous FF 1.5 .. pas de problème sous Opera9 !!??)

Pour résumé : j'en serais fier

++

Merci pour toutes vos nouvelles remarques !

Mon plus gros soucis est que chacun rencontre des bugs différents :

a écrit :
Cependant, c'est vrai que l'entête du site souffre d'un problème d'affichage avec IE (sous Win). Plutôt qu'un long discours, des captures d'écran : http://univers-fusco.com/tests/test01.jpg

a écrit :
quand je passe sur un menu, la flèche de ma souris est prise de saccade, lag. Mais rien de tout ça sous IE 6. Nouveau test : la souris saccade même en bougeant ailleurs sur la page, comme sur une zone vide, ou le menu de mon navigateur.
La vitesse d'affichage s'en ressent aussi sous Firefox, plus lente que sous IE.

a écrit :
Je confirme le ralentissement avec Firefox.

a écrit :
C'est bien ça, ça se produit quand le cochon cligne de l'oeil.

a écrit :
Non, Le cochon n'y est pour rien chez moi.

a écrit :
Pour moi pas de ralentissements sous win2k que ce soit sous FF ou IE.

a écrit :
le menu "délire" complètement sous IE. decu
Décalé vers le bas et avec un gros retard d'affichage des rollover, comme du cops il y'a un fond blanc sur le div ou le ul du menu, on a un blanc qui s'affiche. (ah ben en fait c'est plusieurs divs.).

a écrit :
seul remarque "négative" et le déplacement horizontal de quelques px
lors de l'accés aux pages "réalisations " et " contact " ( ps : et ce sous FF 1.5 .. pas de problème sous Opera9 !!??)

Pour résumer, je suis un peu perdu !
Avoir un site qui saccade, on ne peut pas dire que ce soit ergonomique. En revanche, le site saccade parfois chez IE, parfois sur firefox, parfois pas du tout. En ce qui me concerne je n'ai detecté que le gros bug du menu horizontal rollover sous IE qui décale le reste du contenu de quelques pixels vers le bas...

Ces bugs sont un mystère pour moi, d'autant plus que je n'ai rien utilisé de spécial (pas de script...)

En ce qui concerne le design, je suis content de voir qu'il fait à peu près l'unanimité

a écrit :
Cependant, c'est vrai que l'entête du site souffre d'un problème d'affichage avec IE (sous Win). Plutôt qu'un long discours, des captures d'écran : http://univers-fusco.com/tests/test01.jpg

Pardon, je l'ai effacée par erreur.

Nitram a écrit :
...
Mon plus gros soucis est que chacun rencontre des bugs différents...

Il est des noootreuhhhhhh!! Il subit des bugs comme les autttreuuhhhh.

Aymeric, désolé.