[Pro] Location villa Koh Samui

Bonjour à tous,

Je vous serais très reconnaissant de critiquer la première version de la maquette que je viens de réaliser :

Villas4Rent

Il s'agit d'un site qui regroupera les plus belles villas de Koh Samui...

Je suis avide de vos conseils, notamment concernant :
- La compatibilité avec IE6
- L'ergonomie du site, son usabilité
- Le respect de la sémantique
- L'optimisation du code xHTML et CSS

J'aimerais tout particulièrement avoir votre avis sur le "sélectionneur de langue". J'ai souhaité utiliser la "lightbox" (en l'occurrence Fancybox) qui sera utilisée pour la galerie afin de réduire le nombre de JS. Partant du constat que certains visiteurs ne savent pas (ne voient pas) qu'il peuvent changer la langue (via les petits drapeaux), je me suis dis que l'ouverture d'une fenêtre modale était une bonne alternative à une page dédiée à la sélection de la langue. Qu'en pensez-vous?

Concernant le slider, j'ai utilisé la version "Lite" de Cycle Plugin qui fonctionne à merveille avec IE6, et j'ai rajouté manuellement la légende grâce à CSS. C'est pour l'instant la meilleure solution que j'ai trouvé pour obtenir un slider avec légende utilisant jQuery fonctionnel sous IE6. Si vous avez de meilleurs solutions, je suis preneur!

Je prépare en ce moment même les maquettes pour la page de résultats de recherche, et la "fiche" d'une villa. Je vous transmet tout ça dès que j'ai fini.

Je vous remercie d'avance pour vos commentaires et critiques
Modifié par Julien1926 (01 Oct 2010 - 18:33)

Un peu d'aide s'il vous plaît.

J'ai des difficultés à obtenir un affichage respectable sous IE6!

Moi je dirais juste:

woaw

ton site est nickel

Salut,
j'ai tester rapido avec Ietester. En principe ca colle assez bien avec ie6/ie7.

Sous ie6: ya un probleme d'affichage majeur. Je te fais une capture d'ecran.
Sous ie7 ca va dans l'ensemble, a part le footer qui déborde et le alt de l'image "rechercher" qui apparait)

capture ie6



J'enleve la capture ie7 car elle reste la meme que ie6 a l'upload!

Dans les 2 cas, les drapeaux apparaissent pas dans la bannière du haut, une erreur javascript s'affiche a l'ouverture (problème avec publiclab.n2clic.com/villas4rent/), le diaporama est figé (peut-etre du à l'erreur javascript).

Sinon, sous FF, c'est nikel. Le design est bien, ca fait sérieux.
Pour ce qui est de l'affichage des langues dans une box. Ca surprend au début, mais comme tu le dis ca permet de savoir qu'il y a plusieurs langues... ensuite faut voir a ce que ca s'affiche pas chaque fois que tu reviens sur la page d'accueil. ca ferait trop lourd.
Tu peux aussi chercher a positionner tes drapeaux plus en vue (a coté du logo, ou du formulaire de recherche), ou encore faire une sélection automatique suivant la langue du useragent.

Petites remarques: les titles des drapeaux anglais et francais sont inversés. Et un petit margin-bottom:50px pour le footer serait bien aussi.

Bon courage, pour une maquette ca assure.
Modifié par davidito (06 Oct 2010 - 14:29)[/edit]

Je vous remercie pour ces commentaires!
J'en arrive en effet au mêmes constats sous IE6 et j'ai du mal à cerner le problème. Je continue à essayer de résoudre cela.

Le problème JS vient peut être du non-support de IE6 par la lightbox...

Je viens d'effectuer plusieurs modifications pour rendre l'affichage correcte sous IE6, je constate que ce navigateur gère très mal :
- Le display:inline-block (pour les petites icônes de drapeau) > résolu en utilisation une liste en float:left
- Le problème des marges. J'ai trouvé l'article de Florent V. très intéressant :
HasLayout et bugs de rendu dans Internet Explorer 6-7
- L'erreur d'affichage du contenu portant la classe ".col" qui a été résolue en appliquant un largeur fixe et un clear:both à l'élément parent.

#content .col, #footer .col {
    width:260px;
    float:left;
    margin:10px 25px;
    padding:0;
}
#content {
	clear:both;
	width:930px; /* 960-2x(10+5) */
	margin:0 auto;
	background:#e8e8e8; 
	padding:10px;
	border-top:5px solid #006480;
	border-left:5px solid #006480;
	border-right:5px solid #006480;
	position:relative;
	-moz-box-shadow:inset 0 0 10px #fff;
	-webkit-box-shadow:inset 0 0 10px #fff;
	box-shadow:inset 0 0 10px #fff;
}

Reste donc à résoudre :
- Trouver une "lightbox" fonctionnant parfaitement sous IE6 (je connais PrettyPhoto)
- Les éléments de la liste à puces "Contactez-nous" dans le pied de page, qui devrait être collés. Probablement un problème de plus lié aux mages.