[Amateur] La maison de Léochille

Bonjour à toutes et tous,


Après avoir posté quelques messages mais surtout lu beaucoup d'explications, je me permets de soumettre mon site présentant notre gîte à louer dans l'Ardenne belge.

Tout a été réalisé en PHP pour des raisons de facilité : la gestion du multilangage (un fichier variable=valeur par langue), l'inclusion de code (un seul fichier header et footer) et la gestion des pages dynamiques (calendrier, formulaire).

La validation CSS renvoit des erreurs relatives aux border-radius encore inconnu en CSS 2.1.

La validation (X)HTML renvoit une erreur (la fameuse target="_blank" pour les liens, dont je souhaite conserver le comportement) et trois avertissements (mais aucune idée de ce qu'ils signifient).

Niveau design, j'ai tenté de respecter un usage de couleurs cohérentes et d'avoir une balance images/texte valable.

Mesdames, messieurs, à vos tomates, je suis prêt à les recevoir !
Modifié par Mildju (08 Oct 2010 - 13:21)

Note : je n'ai plus les avertissements relatifs à l'encodage manquant. Une simple lecture du sujet "encodage et internationalisation" a suffi...

Salut,

le site fait un bonne impression a l'ouverture, les couleurs sont agréables et le contenu est clair.
Si je peux me permettre quelques remarques :
- la couleur du lien actif dans le menu est sensée être la même que la couleur (gris) du nom du site dans l'image du header, pourtant elle m'apparait (il me semble) légèrement plus claire...
- Tu devrais harmoniser les arrondis de ton image header avec ceux du reste de la page.
- Dans ta page d'accueil, je rajouterais un titre au premier paragraphe, une phrase résumée de ce que trouvera le client ("Un gite en pleine nature pour s'évader et se reposer" exemple rapide...)
- La photo me donne plus l'impression que tu vends des portails pour gites , une photo centrée sur le gite et ses alentours me semble plus appropriée
- Je mettrais un margin-top sur le header et un margin-bottom sur le footer (pour pas qu'ils collent au body)
- Dans ta page "bonnes adresses" ya un probleme d'encodage sur les "à", peut-etre que t'as pas encodé ton fichier en utf-8, ou alors probleme d'encodage du "à" dans ta bdd (note, pareil dans la page "activités", fédération, et dans ta page tarif, dans le calendrier avec "déc", "fév". D'ailleurs les mois sont pas traduits...)

Autres problème: sous ie6, testé avec ietester et spoon.net, ya un gros soucis puisque ton div principal fait a peine 100px de haut. (en fait surement 1% puisque c'est ce qui apparait dans le css. En supprimant le height:100% de ton html - qui ne te sert pas il me semble - dans le débugger ca solutionne, tu peux essayer).
Toujours pour ie6, tant qu'a faire, remplace la transparence de ton image header par la couleur de fond du site (ca évite les coins blancs sous ie6)

Voila, j'espère que ca va t'aider.

a+
Modifié par davidito (08 Oct 2010 - 17:13)

davidito a écrit :
le site fait un bonne impression a l'ouverture, les couleurs sont agréables et le contenu est clair.

Merci, cela fait toujours plaisir !

davidito a écrit :
- la couleur du lien actif dans le menu est sensée être la même que la couleur (gris) du nom du site dans l'image du header, pourtant elle m'apparait (il me semble) légèrement plus claire...

Et pourtant, j'ai utilisé le même code couleur (#F0FFD0 sur bannersketch.com)

davidito a écrit :
- Tu devrais harmoniser les arrondis de ton image header avec ceux du reste de la page.

Je pensais l'avoir fait et c'est l'impression que j'ai aussi (sous Firefox 3.6.10)... La proximité avec une autre couleur "trompe" aussi la vision.

davidito a écrit :
- Dans ta page d'accueil, je rajouterais un titre au premier paragraphe, une phrase résumée de ce que trouvera le client ("Un gite en pleine nature pour s'évader et se reposer" exemple rapide...)

Ok, je vais y réflechir.

davidito a écrit :
- La photo me donne plus l'impression que tu vends des portails pour gites , une photo centrée sur le gite et ses alentours me semble plus appropriée

C'est marrant, tu es la 2ème personne à me faire la remarque. Comme il va faire beau ce week-end, je vais reprendre le cliché... avec le portail ouvert !

davidito a écrit :
- Je mettrais un margin-top sur le header et un margin-bottom sur le footer (pour pas qu'ils collent au body)

J'ai déjà mis des margins pour séparer la bannière du menu et le menu du body. Quand au footer, il y a encore un souci car si tu rétrecis la page en hauteur, le footer vient s'insérer dans le background... Tu aurais une idée du pourquoi ?

davidito a écrit :
- Dans ta page "bonnes adresses" ya un probleme d'encodage sur les "à", peut-etre que t'as pas encodé ton fichier en utf-8, ou alors probleme d'encodage du "à" dans ta bdd (note, pareil dans la page "activités", fédération, et dans ta page tarif, dans le calendrier avec "déc", "fév". D'ailleurs les mois sont pas traduits...)

Problème règlé à l'aide de quelques htmlentities qui manquaient. Il me reste encore les mois à traduire.

davidito a écrit :
Autres problème: sous ie6, testé avec ietester et spoon.net, ya un gros soucis puisque ton div principal fait a peine 100px de haut. (en fait surement 1% puisque c'est ce qui apparait dans le css. En supprimant le height:100% de ton html - qui ne te sert pas il me semble - dans le débugger ca solutionne, tu peux essayer).

Houlala, oui, quelle horreur ! Le "1%", c'était sur un conseil dans un autre post... Je vais changer ça.

davidito a écrit :
Toujours pour ie6, tant qu'a faire, remplace la transparence de ton image header par la couleur de fond du site (ca évite les coins blancs sous ie6)

Bien vu. Mais ce n'est pas très beau d'avoir la bannière avec des coins arrondis et le reste à angle droit...

davidito a écrit :
Voila, j'espère que ca va t'aider.

a+

Oui, grandement, merci beaucoup !

PS : j'ai bien reçu le message que tu as envoyé via le formulaire.
Modifié par Mildju (08 Oct 2010 - 19:41)

Pour la couleur, ColorZilla me donne #6F6F6F. En fait je suis pas sur que sur le web la couleur #F0FFD0 soit interprétée, donc c'est la #6F6F6F qui apparait. Fait un test en changeant la couleur du texte de ton image par #6F6F6F.

Pour les arrondis, je quasiment sûr que ceux de l'image sont plus grands que ceux des div. (A moins d'un trompe-lieu vraiment bien fait)

Pour les margin, quand je dis le "body" je faisais référence aux limites de la page (pas au div qui contient le contenu principal). Pour faire plus simple, essaye en rajoutant dans ton css #body{ padding:10px 0; }. c'est pour aérer un peu le contour du site.

Pour ce qui est du footer qui rentre dans le background en rétrécissant la page, je vois pas à quoi tu fait référence. En réduisant ma fenêtre, ya pas de soucis. Je viens de faire un tour avec ie6, à priori t'as fait quelques modif, maintenant ca se présente bien. C'est peut-etre pour ca.

Par rapport a ie6 et la transparence, j'ai vu que tu utilise un script pngFix,js. Seulement, sauf si je me trompe, t'as qu'une image png transparente sur ton site (le header). Or ca me parait pas très judicieux de charger un script juste pour faire apparaitre les coins transparents de ton header. Je me répete, mais je te conseille de remplacer le fond transparent de ton image par la couleur de fond de ton site et de virer le script qui te sert a rien du même coup.

au fait, sur ie6, ya un message d'erreur de script "interfaz non compatible".

Et pour finir sur les images, le jpg de la lightbox sont trop lourds, ca peine a charger et c'est un peu, comment dire, déconcertant. Donc je te conseille 2 trucs:
1- réduis tes images, j'ai tester avec photoshop, et j'ai réduit une de tes images de 388Ko a 121Ko (a qualité 60%), ca fait pas mal, je te la met en lien pour que tu testes la différence.



et 2-, essaye en préchargeant tes images en javascript:

(A mettre avant ton </body>)

<script type="text/javascript"><?php

foreach($_SESSION['image_preload'] as $a => $b){
  $file='images/'.$b.'.jpg';
  echo 'var '.$b.' = new Image();';
  echo $b.'.scr = "'.$file.'";'."\n";
}

?></script>

$_SESSION['image_preload'] contient le "name" de tes images (Ex: $_SESSION['image_preload'][]='40_gite_large'; )
et dans le code de ton image: <img src="images/40_gite_large.jpg" name="40_gite_large" />

(tu peux biensur ecrire le javascript directement, mais en utilisant php c'est plus simple pour ajouter ou supprimer une image, et tu peux le faire dynamique suivant chacune de tes pages)

voilà, bonne continuation

Désolé de te répondre aussi tardivement, mais entretemps, le disque dur de mon PC a lâché...

Bon, j'ai lu attentivement toutes tes remarques. Voici mes commentaires :

1. je me suis trompé dans le code couleur. Il s'agit bien du gris #6F6F6F pour les menus et le titre de la bannière.

2. j'ai retravaillé les arrondis et mis la couleur de fond plutôt que de la transparence. Et donc, le Javascript pngFix a été enlevé.

3. Toutes mes images font maintenant, au maximum, 120 Ko. Du coup, je préfère laisser de côté (pour l'instant) le pre-load.

4. Je réflechis à un titre accrocheur pour la page d'accueil ! J'ai modifié aussi la photo de la page d'accueil... qui sera peut-être modifiée à son tour dans un futur plus ou moins proche.

5. Les mois et les jours du calendrier sont traduits. Je pense à déplacer tout le contenu actuel de la page tarifs sur la droite et ajouter à gauche une ou plusieurs images pour garder une certaine consistance d'une page à l'autre.

6. De manière générale, j'ai décalé le dessus de la page et aéré un peu plus le menu principal.

7. Sous Firefox 3.6.10, avec une hauteur suffisante, le footer est placé correctement càd en dehors du content (dans la partie vert clair) :

Mais lorsque je rétrecis ma fenêtre en hauteur, le footer remonte dans le content (càd dans la partie jaune clair), alors que je souhaiterais qu'il en reste exclu :

8. je me suis permis d'ajouter, sous IE6, un message "invitant" l'utilisateur à mettre son navigateur à jour. Cependant, je le déplacerai tout en-dessous et m'arrangerai pour qu'il n'apparaisse qu'une seule fois.
Modifié par Mildju (14 Oct 2010 - 13:09)