[clos][Avis & critiques] www.ericlebihan.net

Bonjour,

J'aimerais avoir votre avis et vos critiques sur le site www.ericlebihan.net nouvelle version très orienté standards du web...

Pour anticiper quelques remarques :

- Le titre principal (h1) dépasse du cadre quand on agrandi la taille du texte. Je n'ai pas trouvé encore de solution alternative.
- Le div du milieu n'accepte pas de marge en haut avec IE5 et ie 5.5. J'ai ajouté des commentaires conditionnels mais je ne suis pas sur de leur bon fonctionnement

<!--[if lt IE 6]> #h1{height:143px;} <![endif]-->
<!--[if lt IE 5]> #h1{height:143px;}<![endif]-->	
<!--[if lt IE 6]> #milieuhp, #milieu, #milieureal{margin-top:39px;} <![endif]-->
<!--[if lt IE 5]> #milieuhp, #milieu, #milieureal{margin-top:39px;} <![endif]-->

- Je n'ai pas testé ce site sur mac, ne disposant pas du matériel

Vos remarques sur le design (proposition d'améliorations), sur l'ergonomie et la cohérence du tout sont les bienvenues !

Merci de m'avoir lu jusqu'ici !

Eric
Modifié par EricLB (07 Jun 2006 - 14:28)

Ton site est bien, joli, et clair, j'aurais juste une petite remarque sur le fait que :
1- Son passage ici fait un peu "pub pour mon site" plus que "qu'en pensez-vous"? (pataper !)
2- Autant le site est très orienté technologies, autant la bannière ne l'est pas du tout. Volontaire ?
Sinon, j'ai pas maté le code ni css ni html.

chu a écrit :
Son passage ici fait un peu "pub pour mon site" plus que "qu'en pensez-vous"? (pataper !)

Ah ? Pourquoi ?
Après 134 messages ça me semble loin d'être le cas...

chu a écrit :
Autant le site est très orienté technologies, autant la bannière ne l'est pas du tout.

Bonne remarque par contre ! J'avoue que je ne suis pas fan.
Modifié par 20cent (07 Dec 2005 - 17:20)

Salut Eric.

Bravo pour ton site.

Je ferai juste une remarque comme je te l'ai dit : c'est ton header qui me paraît un peu trop confus, tu as mis trop de couleurs je pense. Ensuite c'est une question de goût, ça ne se discute pas.

Sinon pour le reste, j'aime beaucoup le footer et le menu. Pareil pour le choix des polices et les "thumbnails" de ton portfolio.

Bonne continuation.

chu a écrit :
Ton site est bien, joli, et clair, j'aurais juste une petite remarque sur le fait que :
1- Son passage ici fait un peu "pub pour mon site" plus que "qu'en pensez-vous"? (pataper !)
2- Autant le site est très orienté technologies, autant la bannière ne l'est pas du tout. Volontaire ?
Sinon, j'ai pas maté le code ni css ni html.

1- Non, pas du tout, je souhaite juste avoir des retours sur des détails qui m'auraient echappés ou des améliorations possibles - malgré tout le soin que j'ai pu y apporter. Tous les conseils sont bons à prendre : je pense être encore très loin de la perfection en ce qui concerne l'utilisation sémantique du code XHTML, des normes d'accessibilité ou de l'utilisation des feuilles de style (je ne parle même pas de graphisme).

2- Oui c'est voulu, je ne voulais pas un site trop froid, ce qui est le cas de pas mal de sites sur le sujet (je veux absolument eviter le bleu - couleur emblématique des technologies).

NetCodeur a écrit :
Salut Eric.

Bravo pour ton site.

Je ferai juste une remarque comme je te l'ai dit : c'est ton header qui me paraît un peu trop confus, tu as mis trop de couleurs je pense. Ensuite c'est une question de goût, ça ne se discute pas.

Sinon pour le reste, j'aime beaucoup le footer et le menu. Pareil pour le choix des polices et les "thumbnails" de ton portfolio.

Bonne continuation.

Merci pour ton retour Netcodeur. Effectivement, je ne suis pas satisfait à 100% de mon header, mais j'assume complètement la profusion de couleur !
. Je n'ai pas plus d'inspiration pour le moment, mais je garde ta remarque en réserve.

Salut,

Un menu d'accessiblité caché par display:none ne sert à une efficacité limitée :
cf ce sujet(c'est un point de départ).

Je trouve le texte trop petit à l'origine. Je ne sais pas ce qu'en penses les autres...
Donc je l'agrandi et là, ça pose un problème avec le lien "expériences personnelles"

Une balise meta non fermée qui rend la page non valide (ça peut arriver a tout le monde )

Bonjour,

EricLB a écrit :
Le div du milieu n'accepte pas de marge en haut avec IE5 et ie 5.5. J'ai ajouté des commentaires conditionnels mais je ne suis pas sur de leur bon fonctionnement

Les commentaires conditionnels sont des commentaires HTML et ne peuvent donc pas s'utiliser dans une feuille de style :ils s'utilisent pour inclure une feuille de style, externe ou interne. Tel que tu les as écrits, ils sont donc ignorés.

Attention également à la syntaxe de la condition : if lt IE 5 ne vise qu'IE 3 et 4... ce qui n'est pas vraiment la bonne cible (voir FAQ du forum pour les syntaxes)

Pour compenser des bugs dans IE5.0 et IE5.5 :

1. On attache les styles "normaux" pour les navigateurs conformes et pour IE6.0, de la manière habituelle, par un link ou un style, sans commentaires conditionnels.

2. On attache ensuite la CSS spécifique IE5.x, avec à nouveau un link ou un style, mais placé cette fois dans le commentaire conditionnel if lt IE 6. Cette CSS réécrit uniquement ceux des styles précédents qui sont concernés par le(s) bug(s)

Exemples :

<link href="normal.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if lt IE 6]>
<link href="ie5x.css" rel="stylesheet" type="text/css" />
<![endif]-->

<style type="text/css" media="screen">
<!-- 
#foo {...}
-->
</style>

<!--[if lte IE 6]>
<style type="text/css">
#foo {...}
</style>
<![endif]-->

Modifié par Laurent Denis (08 Dec 2005 - 07:36)

Merci Laurent pour toutes ces précisions

Je vais revoir plus précisemment cette partie, qu'apparemment je n'ai pas bien comprise...

___seb a écrit :

Je trouve le texte trop petit à l'origine. Je ne sais pas ce qu'en penses les autres... Donc je l'agrandi et là, ça pose un problème avec le lien "expériences personnelles"

Sur quel navigateur ? J'ai essayé sur Opéra, IE et Firefox : "expériences professionnelles" passe sur deux lignes sans problème...

Oui peut-être que le texte est un peu petit. Votre avis sur la question ?

a écrit :
Une balise meta non fermée qui rend la page non valide (ça peut arriver a tout le monde )

Ah bon ? J'ai pourtant validé avec le validateur du W3C. C'est quelle balise sur quelle page ?

Merci.

Eric

Bonjour,
Désolé s'il y a de la redite, je n'ai pas tout lu.

Pas mal, vraiment pas mal. Intéressant, accessible, rapide à charger.
Juste un détail, tes liens d'évitement dont tu parles dans ta page d'accessibilité, ils sont nulle part, enfin je ne les ai pas trouvés.

QuentinC, ils sont juste après le body :

<p id="acces">
	<a href="#milieuhp" accesskey="2">Aller au contenu</a> - <a href="#menu" accesskey="3">Aller au menu</a> - <a href="accessibilite.php" accesskey="0">Accessibilit&eacute;</a>
</p>

Il est dommage qu'ils ne soient pas utilisables lorsque les CSS sont activés...

Oui, c'est vrai j'ai pas donné ma config :
Je suis sur un portable écran 15 pouces. J'ai regardé ton site avec firefox 1.5 sous linux (distrib Aurox 10.2 (dérivé de fedora core 3)). Le mieux est une copie d'écran (cf en message privé) (trop lourd pour le forum).

Pour le menu a gauche, avec unfort agrandissement "expériences professionnelles" passe sur deux lignes et le problème survient quand le pointeur de la souris est placé sur "professionnelles".

Oui tu as bien une erreur sur la page d'accueil, un meta non fermé :

   1.  Error  Line 14 column 49: end tag for "meta" omitted, but OMITTAG NO was specified.

      <meta name="DC.Coverage" content="France, Paris">

      You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

      &#9993;
   2. Info Line 14 column 0: start tag was here.

      <meta name="DC.Coverage" content="France, Paris">

Modifié par ___seb (08 Dec 2005 - 22:13)

Salut Eric

En ce qui me concerne :
- le footer est trop "enterré" niveau couleur
- le menu de gauche gagnerait à être moins large. Il suffirait de trouver autre chose pour "Expériences professionnelles". Un synonyme par exemple.
- ta page d'accueil manque un peu de saveur. Beaucoup d'informations ; très longue. Les titres pourraient être plus accrocheurs : plus gros par exemple ou marquant un peu plus de dynamisme entre les articles.

Donc en gros ton site est très bien et il pourrait être presque parfait dans son style

Tony Monast > Ah ok

Enlève-moi ce display:none et/ou ce visibility:hidden qui cache les liens de navigation. C'est pas trop grave étant donné que je ne les utilise pas personnellement, mais pour que tu saches, display:none et visibility:hidden sont pris en compte par un lecteur d'écran.

QuentinC a écrit :
Tony Monast > Ah ok

Enlève-moi ce display:none et/ou ce visibility:hidden qui cache les liens de navigation. C'est pas trop grave étant donné que je ne les utilise pas personnellement, mais pour que tu saches, display:none et visibility:hidden sont pris en compte par un lecteur d'écran.

C'est une info que je ne connaissais pas !!! J'étais persuadé que les lecteurs d'écran ne tenait pas compte des CSS. Mais c'est un domaine que je connais mal, si tu as d'autres infos au sujet des lecteurs d'écrans, n'hésite pas à m'en faire part. Une petite liste, par exemple...

Merci

Eric

globy a écrit :

En ce qui me concerne :
- le footer est trop "enterré" niveau couleur

Salut Globy, qu'est ce que tu veux dire par "enterré", est-ce que les couleurs ne ressortent pas assez sur le fond noir, ou est-ce le fond noir qui te gêne ?

EricLB a écrit :


Salut Globy, qu'est ce que tu veux dire par "enterré", est-ce que les couleurs ne ressortent pas assez sur le fond noir, ou est-ce le fond noir qui te gêne ?

Je parlais bien entendu des contrastes dans le footer. J'ai rien contre le noir ou tes couleurs sombres. Ça fait un rappel des couleurs de ta bannière. Mais pourtant elle a plus de caractère que le reste.
En fait si tu voulais qu'on t'appelle sans trop chercher l'info, c'est très bien de faire figurer de suite ton numéro de téléphone sur la page d'accueil. Mais dans ce cas faut-il encore qu'il soit lisible
Il y a une mince frontière entre sobriété et monotonie. Aussi je trouve que tu as apporté plus de soin à tes créations "externes" qui rentrent plus dans l'idée d'une charte graphique que d'une charte de monotonie.
En fait il faudrait sans doute que tu étoffes un peu plus ta css et que tu prennes un peu plus de « risques ».

a écrit :
Il y a une mince frontière entre sobriété et monotonie. Aussi je trouve que tu as apporté plus de soin à tes créations "externes" qui rentrent plus dans l'idée d'une charte graphique que d'une charte de monotonie.

Est-ce que tu peux développer ? Je trouve tes remarques très intéressantes, mais un peu obscures par moments !

Qu'appelles-tu " créations externes" ?

C'est vrai que concernant le footer, je suis parti à la base sur l'idée d'utiliser les mêmes couleurs que celles utilisées dans le reste du site mais fond blanc et fond noir ne produisent pas le même rendu - j'ai donc éclairci les couleurs du footer et notamment celles pour mes coordonnées, suite à ta dernière remarque.

Quand tu parles de monotonie, est-ce que tu veux dire que çà ne claque pas assez au niveau des couleurs ? Ou ça a avoir avec l'harmonisation de l'ensemble ?

Comme suite à l'ensemble de vos remarques j'ai effectué les modifications suivantes :

- Agrandissement de la taille des polices
- Modification de "expériences professionnelles" en "expériences"
- Affichage des liens d'évitement
- Fermeture de la balise meta oubliée
- Couleur de police plus claire pour le footer
- Modification des commentaires conditionnels :

<!--[if lt IE 6]>
<style type="text/css">
h1{
	height:143px;
}		
#milieuhp, #milieu, #milieureal{
	margin-top:60px;
}
</style>
<![endif]-->

Est-ce la bonne syntaxe ?

(A ce propos, si quelqu'un pouvais me dire si ça passe sur IE5 ou 5.5, difficile de voir avec les versions standalone d'IE, merci.)

Est-ce que toutes ces modifications vous paraissent améliorer l'ensemble ?

Merci pour vos messages