Bonjour à tous,

Je viens seulement vous demander, si vous voulez bien votre avis sur mon site.

http://www.marci.fr

C'est une simple production en HTML et en CSS, donc pas de php à part les formulaires de contact. Est-ce que certains aspects de l'interface nécessiteraient selon vous des améliorations ?

Merci beaucoup pour vos commentaires.
A bientôt !
Bonjour,

Graphiquement, j'aime beaucoup le style. Par contre il y a un petit problème d'affichage avec IE6 (la colonne de gauche est trop courte).

Gros point négatif : 48 erreurs de validation, il faut les corriger absolument. Pour le plus gros des erreurs il s'agit de fermeture de balises oubliée (en XHTML, il faut terminer les balises auto-fermante par /> et non pas > comme en HTML) ou de balises écrite en majuscule (le XHTML n'accepte que les minuscules).

Autre gros point négatif, le menu devient illisible lorsque l'on augmente la taille des caractères. Et le contenu n'est pas toujours facile à lire sur les illustrations.

Il y a également une assenceur horizontal qui, apparement, ne sert à rien (pas d'élément caché qu'il révèle).

Pour ce qui est du code :
* Il y a beaucoup de meta tag inutiles dans le head du code :
		<meta name="author" content="Gilles Marcilly">
		<meta name="owner" content="Eric marcilly">
		<meta name="description" content="">
		<meta name="identifier-url" content="http://www.marci.fr">
		<meta name="revisit-after" content="14 days">
		<meta http-equiv="Content-Language" content="fr, fr-be, fr-lu, fr-bz, fr-nl, fr-ch, fr-ca">
		<meta name="category" content="musique">
		<meta name="abstract" content="Site officiel de Marci">
		<meta name="Keywords" content="marci,marcy,eric marcilly,chanteur,nantes,nantais,chanson francaise,nouvelle scene,esquisse,squisse,jimmy fetiveau,francois badeau,mathilde en juillet,anne tricoire, plus belle la vie">
		<meta name="robots" content="index, follow">
		<meta name="distribution" content="global">
		<META NAME="Rating" CONTENT="General">
		<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
		<META NAME="Copyright" CONTENT="Tous droits réservés © 2009 marci">
À par description, Content-Language (qui n'a besoin que de fr) et robots, ils peuvent tous être omis, n'apportant aucun intérêt (pas utilisé par les moteurs de recherche, pas lu par les utilisateurs (pour les mentions liées au copyright, par exemple). Par contre ces infos doivent se retrouver sur chaque page du site (surtout l'encodage manquant sur le page de contact).

* Il est préférable de mettre les script JS en fin de document (afin que la page HTML se charge avant les scripts), surtout celui de google qui est assez lourd à charger.

* Attentions aux abréviations dans les intitulés de liens :
<li><a href="biographie.html">bio</a></li>
Un title avec le mot complet pourrait permettre d'éviter une potentielle confusion (bio = biologie, biographie, biologique...).

* Je ne suis pas convainque que d'utilisé d'un lien vide :
<div id="ecoutez"><a href="album.html" id="album">&nbsp;</a></div>
Si une image est le suport d'un lien et/ou si elle comporte du texte (porteuse de contenu), cette image DOIT se trouver dans le code avec un texte alternatif rempli comme il se doit, sinon : plus d'image plus de lien. De plus il est important que le texte alternatif d'une image comporte la même information que l'image elle-même :
<img src="img/dates.png"  alt="dates de concert de Marci">
Là on pert toute l'information liée aux dates de concerts.

* Il est plus efficace d'attribuer un padding ou un margin à un élément pour le positionner que de le faire précéder d'une liste de retour à la ligne :
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
(idem pour les listes de "&nbsp;")

* Il serait plus confortable pour l'utilisateur qui a fait une erreur en remplissant le formulaire de contact que celui-ci conserve les information déjà saisies.
Bonjour Laurie-Anne,

Je te remercie pour tes commentaires précis. Je ne m'attendais pas à une réponse si complète !

Sur tes conseils, je vais essayer de corriger rapidement les erreurs de validations, ajouter l'encodage à la page contact et placer les scripts Javascript à la fin des documents. Mais ces scripts ne doivent-ils pas être placés dans la partie <head> de l'HTML ?
Je vais essayer de mettre biographie en toutes lettres mais cette modification aura, je pense, pas mal d'incidence sur le reste de l'interface (notamment le lecteur son placé à droite du menu). Il y a donc pas mal de boulot en perspective !

Je suis sur Firefox et je n'ai pas constaté, comme toi, un problème de lisibilité du menu lorsqu'on l'agrandit ? Peux-tu m'indiquer sur quel navigateur tu remarques cela ?
Je n'ai pas non plus d'ascenseur horizontal... Sur quelle page, sur quel navigateur apparaît-il ? Comment pourrait l'enlever ? Quel réglage, quel div est en cause ?

J'aimerais également que le formulaire de contact conserve les informations saisies en cas d'erreur. Cependant je n'ai pas créé le script php moi-même. C'est seulement un copier coller et je n'ai pas aujourd'hui les armes pour le modifier. Pourrais-tu m'indiquer un formulaire tout fait qui proposerait cette fonctionnalité ? Ou peux-tu me décrire les modifications à effectuer sur le code ?

J'ai utilisé pour le menu de gauche des listes de liens vides car je n'ai trouvé que cette solution pour personnaliser ces éléments au maximum (et ne pas utiliser par exemple des typographies classiques) en affichant, au survol de la souris, des images se superposant à une image d'arrière-plan.

Je profite de tes compétences pour te poser quelques questions Smiley smile :

* J'ai remarqué que l'image dates.png se plaçait de manière totalement anarchique, et différente d'une page à l'autre sur ie8 (et peut-être sur les versions antérieures). Si tu ne l'as remarqué, cette image s'affiche sur le papier froissé à droite de l'interface (<div id="dates2">). Ce div admet les réglages suivants :

a écrit :

#dates2 {
position:absolute;
height:200px;
margin-top:225px;
width:200px;
margin-left:430px;
}


Quels modifications pourrais-je apporter à cet élément ? Il me semble que je suis obligé de mettre ce div en position absolue, non ?


* Je ne parviens pas à intégrer mes vidéos (page videos.html) avec le lecteur dewtube et la méthode swfobject.

J'ai inséré dans le dossier js, les fichiers swfobject.js et expressInstall.swf. J'ai intégré dans mon code HTML les lignes suivantes :

a écrit :

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("flashcontent", "9.0.0", "js/expressInstall.swf");
so.write("flashcontent");
</script>


a écrit :

<object class="photos" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="601" height="401" id="mymovie">
<param name="movie" value="dewtube.swf?movie=battements.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="dewtube.swf?movie=battements.flv" width="601" height="401">
<!--<![endif]-->
<a href="http://get.adobe.com/fr/flashplayer" target="_blank">Vous avez besoin d'une version plus récente d'Adobe Flash Player pour lire cette vidéo de Marci. Merci de cliquer ici pour la télécharger gratuitement" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>



Auparavant, j'avais placé les vidéos avec le code suivant. Cela fonctionnait sur FF mais je me suis rendu compte qu'on ne pouvait pas lire les vidéos sur ie :

a écrit :

<object class="photos" type="application/x-shockwave-flash" data="videos/dewtube.swf?movie=langue.flv" width="601" height="401"><param name="movie" value="videos/dewtube.swf?movie=langue.flv" />


Est-il possible de placer plusieurs lecteurs dewtube sur une même page avec la méthode swfobject ?

Je te remercie infiniment de ton aide !
gmarcilly
Je repasse car mes pages sont maintenant valides (à part quelques points insolubles : bouton Paypal; target="_blank" indispensable, code pour intégrer une vidéo par Dailymotion...)

Que pensez-vous de mon site ? http://www.marci.fr

Peut-être que quelqu'un aurait des solutions à me proposer pour les deux problèmes que j'ai soulignés plus haut ?

A bientôt et merci d'avance ! Smiley biggrin
Modifié par gmarcilly (23 Aug 2009 - 23:27)
Bonjour,

Il y a des problèmes de lisibilité; le menu je le trouve trop discret; pourquoi ne pas essayer d'élargir ton site sur tout l'écran ( il s'agit d'un étalage de fond et non d'un site fluide Smiley langue )
Bonsoir

tout d'abord le design:

ca manque de lisibilité: les infos concernant le concert et les paragraphes...

faudrait mettre une marge au dessus et en dessous des paragraphes.

concernant la code:

les div autour des balises <ul> sont inutiles

donc : modifie par <ul id="menu">

Bonne continuation
Salut,

L'ambiance générale est plutôt chouette, par contre c'est assez hétérogène qualitativement. Par exemple sur la home :

- ta colonne de gauche est toute en font image alors que la nav de haut ne l'est pas, dommage de ne pas avoir de cohérence. De plus, cette nav est peu lisible (contraste faible, transparence inutile, pas de respiration).

- "s'inscrire à la newsletter" pète chez moi.

- le texte rouge de "concerts" est tout crénelé pas beau !

- le texte d'accueil de la home est complètement illisible à cause du fond, il faut faire quelque chose !
Bonjour à tous et merci de vos réponses,

Pour delahk : j'ai choisi de créer mon site sur une structure non fluide car j'ai souvent remarqué que les sites proportionnels à la fenêtre du navigateur voyaient leurs mises en page se déformer sur les petites fenêtres. Par exemple, les menus sur une ligne qui se retrouvent sur deux lignes... La largeur du site garantit, il me semble, une bonne accessibilité. Et puis, je n'aime pas les sites en pleine page, on est assommé par toutes les informations, on ne s'y retrouve pas. C'est mon avis... Les goûts et les couleurs... Smiley cligne Je suis d'accord avec toi, le menu d'en haut n'est pas assez lisible : je vais le retravailler.

Pour h_wiz : pour la partie Concerts, je vais essayer de retrouver une typo qui ressemble autant à l'écriture à la main et qui soit plus lisible. Pour le texte d'accueil, je me suis surtout préoccupé du référencement. Je sais pertinemment que personne ne lit les textes dans ce type de sites et d'informations. Je vais revoir cette histoires de div autour des balises <ul>, merci pour le conseil ! Smiley biggrin

Pour STPo : Sur tes conseils, je vais supprimer la transparence inutile sur le menu d'en haut, et éclaircir le fond gris pour obtenir plus de contraste. Bien vu !
Je vais mettre "S'inscrire à la newsletter" en gras pour compenser sa petite taille (que je ne peux réévaluer). Pour la partie concerts, même remarque que pour h_wiz, je vais essayer retrouver une typo qui ressemble autant à l'écriture à la main et qui soit plus lisible. Pour le texte d'accueil, même commentaire adressé à h_wiz.

Merci encore et n'hésitez pas à m'apporter vos réponses ou d'autres avis ! Smiley smile
Je reviens... j'ai effectué les modifications que vous m'avez conseillé :

- Une typo plus propre pour la partie "Concerts.
- Menu d'en haut, fond gris plus clair et transparence supprimée
- Le texte de "S'inscrire à la newsletter" légèrement plus grand

Qu'en pensez-vous maintenant ? Vous voyez d'autres soucis ?

Merci et à bientôt ! Smiley smile
Bonjour,

Est-ce que les personnes qui lisent cette conversation accepteraient de tester sur le site la lecture des vidéos (page "vidéos" accessible par le menu supérieur) et de revenir me dire s'ils ont rencontré des soucis. Car je ne suis pas très sûr que mes intégrations swf-object soient valides et que les vidéos soient accessibles sur tous les navigateurs.

D'autre part, peut-être que quelqu'un aurait des solutions à me proposer pour un problème que j'ai déjà évoqué un peu plus haut ; à savoir :

- L'image dates.png qui se place de manière totalement anarchique, et différente d'une page à l'autre sur ie8 (et peut-être sur les versions antérieures). Cette image s'affiche sur le papier froissé à droite de l'interface (<div id="dates2">). Ce div admet les réglages suivants :

a écrit :

#dates2 {
position:absolute;
height:200px;
margin-top:225px;
width:200px;
margin-left:430px;
}


Quels modifications pourrais-je apporter à cet élément ? Il me semble que je suis obligé de mettre ce div en position absolue, non ?

Merci à tous pour votre aide !
A bientôt ! Smiley smile