[Pro] Site du vigneron Jean-Louis Denois

En phase finale de développement, je vous soumet ce site afin de reccueillir vos critiques les plus constructives : http://dev.jldenois.com

Reste à faire :
- la traduction anglaise est encore non finalisée
- la fonction Imprimer des fiches vins imparfaite à mon goût (j'ai ouvert un topic à ce sujet)
- toutes les fiches vins ne sont pas remplies.
- les légendes des photos ne sont pas encore remplies (elles sont masquées en attendant en fait)
- le responsive design

Merci d'avance pour vos retours
Modifié par Spheerys (17 May 2013 - 08:31)

Bonjour,

Première impression, je trouve ça pas mal du tout. C'est clair, terroir et moderne à la fois, les couleurs sont bien trouvées (le brun grisé est élégant), le blanc aère la maquette, les photos sont valorisées.

Par contre une critique de taille qui devrait être solutionnée facilement. Ça m'a sauté à la figure en arrivant sur le site, attention de ne pas placer des photos trop compressées/abîmée/floues. Dans le carousel sur la page d'accueil, la première photo qui s'affiche (un superbe paysage vallonné) est molle, très altérée par une compression jpeg excessive ou un agrandissement trop important. Il existe différents logiciels qui permettent d'optimiser poids des images et qualité. Si le fichier initial ne permet pas un résultat satisfaisant, choisissez une autre photo. Surtout que d'autres photos sont plus propres et nettes (la 3 est moins détériorée). La première photo est très importante, c'est la première impression qui laisse son empreinte sur tout le site.

Plus en détails, l'effet "roll-over" sur les bouteilles est très joli. La sélection en fonction des gammes avec les bouteilles qui glissent, ça fait pro. Les fiches de certaines bouteilles sont encore vides mais je pense que cela viendra dans un second temps.

Pour résumer, un joli site réalisé avec goût, qui correspond parfaitement au produits proposés. Franchement, on est pas loins de ce qu'aurait fait une petite agence de com, si c'est un site perso, même réalisé à partir d'une template, le résultat est à la hauteur. Attention cependant de garder une qualité constante dans le traitement des photos de la page d'accueil.

J'ai revu un peu la première photo, mais elle a bcp de grain à la base.
Ça devrait néanmoins être mieux en attendant que j'en trouve une autre plus nette

Merci pour ce retour en attendant

Bonjour,
je ne trouve pas trop quoi dire d'un point de vue Design à part "Félicitation!!!!". C'est élégant, propre et agréable.
Mon seul souci est au niveau de la page d'accueil... Tu as un joli Slide avec de merveilleuses images mais il ne s'agit que d'une page de redirection anglais-français et je trouve cela très dommage.
J'aurai préféré, mes cela n'est qu'un conseil, que cela soit ta page d'accueil et que tu utilises un fichier php pour rediriger les visiteurs cela le langage utilisé par le navigateur.
A part cela en tout cas, joli boulot.

Elprofessor a écrit :
Mon seul souci est au niveau de la page d'accueil... Tu as un joli Slide avec de merveilleuses images mais il ne s'agit que d'une page de redirection anglais-français et je trouve cela très dommage.

En fait au départ, j'avais mis le menu général en français sous le slide.
Mais vu que le site est devenu Bilingue, j'ai viré ce menu et ai mis à la place Français/English

Elprofessor a écrit :
J'aurai préféré, mes cela n'est qu'un conseil, que cela soit ta page d'accueil et que tu utilises un fichier php pour rediriger les visiteurs cela le langage utilisé par le navigateur.

Je ne suis pas sûr d'avoir bien saisi : tu aurais mis une sorte de temporisation avant de basculer automatiquement sur la page intérieure (en français?) ?

Elprofessor a écrit :
A part cela en tout cas, joli boulot.

Merci
Modifié par Spheerys (15 May 2013 - 20:36)

Je pense que ton client est le vigneron qui a le plus beau site de l'Aude.

Du design comme j'aime.
Modifié par jb_gfx (15 May 2013 - 21:24)

Plop,

Intéractif, mais pas trop, élégant et clair, j'aime beaucoup !

Pour trouver des choses à dire... une petite légende sous les photos auraient pu être rajouté au lieu de " p_castagnas_2011_178".

Le logo (en haut à gauche), au clic, je ne renverrai pas vers la page Français / Anglais, plus vers la Home de la langue.

Sur la page contact, précise peut-être les champs obligatoires à saisir.

Je trouve la couleur du texte dans ton menu du header un peu trop proche de la couleur du header, du coup, il est moins facile à lire.

PS : Je suis à 5 min à pied d'un magasin qui en vend... haha... vais-je aller voir le produit ?!

KaySix a écrit :

Pour trouver des choses à dire... une petite légende sous les photos auraient pu être rajouté au lieu de " p_castagnas_2011_178".

Le client doit remplir les légendes, c'est prévu (j'ai modifié mon post initial)
Je les aies virées en attendant.

KaySix a écrit :
Le logo (en haut à gauche), au clic, je ne renverrai pas vers la page Français / Anglais, plus vers la Home de la langue.

C'est une idée
Les autres, vous avez un avis sur ce point d'ergonomie ?

KaySix a écrit :
Sur la page contact, précise peut-être les champs obligatoires à saisir.

Excellente idée

KaySix a écrit :
Je trouve la couleur du texte dans ton menu du header un peu trop proche de la couleur du header, du coup, il est moins facile à lire.

Pas faux : j'ai éclaircie un chouilla

KaySix a écrit :
PS : Je suis à 5 min à pied d'un magasin qui en vend... haha... vais-je aller voir le produit ?!

Il parait que son vin est très bon
Pas encore goûté en ce qui me concerne.
Modifié par Spheerys (16 May 2013 - 18:35)

Salut

Comme les autres je trouve le site très très bien fait, bravo !

Concernant le clic sur le logo je suis du même avis que KaySix, étant donné que l'on peut changer la langue par l’intermédiaire des drapeaux en haut à droite je vois pas l'utilité de revenir sur le slider du départ.

Bonne continuation !

PPssfff ça m'embête un peu ^^
Disons que je trouve ça discutable :
- les textes des slides de la page de garde sont différents selon la langue
- une fois dans les pages intérieures, le menu principal en haut contient une entrée vers la page présentation. Je trouverai ça redondant de mettre le logo pointant aussi vers la page présentation, d'autant plus qu'il n'y a un lien vers la page de garde QUE dans le rappel du menu présent dans le footer.

Bon après je suis ouvert à la discussion hein

Salut,
pour une deuxième fois félicitation. Pour répondre à ce dont je te parlais dernièrement, il s'agirait d'un code php à la racine de ton site qui vérifierai si le navigateur du visiteur est en français ou en anglais et selon la langue il le ferais passer vers la page index en français ou celle en anglais, si ça t'intéresse je te donnerai le code. Parceque comme je te l'ai expliquer il serait plus beau avec une page d'accueil sous le slider.

Encore une fois merci pour le design et bonne continuité...
Modifié par ELprofessor (17 May 2013 - 18:01)

Bonjour,
félicitation, le site est vraiment magnifique!

Je n'ai pas grand chose à ajouté à ce qui a déjà été dit, sauf que je seconde les autres concernant la "spashscreen". Je comprend l'idée de faire cliquer vers la langue de son choix, mais ça créer un clique supplémentaire inutile, alors qu'il y a possibilité de faire comme ELprofessor a dit. Après je peux comprendre que tu ne veuille pas éliminer cette page, parce que c'est vrai qu'elle est magnifique.

Pourquoi ne pas l'utiliser comme accueil pour chaque langue en y intégrant ton menu?

Trouve-t-on c'est vins au Québec?

Yes! Pas mal!

Attention : dans le code source de la page d'accueil on a 2 doctypes :

<!DOCTYPE html>

<html lang="fr">
<head>
    <!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="utf-8" />

Bien vu
C'est réparé.

Je cherche une solution pour améliorer l'ergonomie de la page d'accueil...

Finalement, j'ai opté pour une détection de la langue du navigateur avec affichage du menu qui va bien au lieu du choix de la langue :
- si $_SERVER['HTTP_ACCEPT_LANGUAGE'] est "en", on passe en anglais
- si $_SERVER['HTTP_ACCEPT_LANGUAGE'] est "fr" ou tout autre valeur, on passe en français

Au passage je remercie Subran qui a fourni (en 2011) le bout de code qui va bien pour mon CMS (MODX)

Je pense en effet qu'on y gagne en ergonomie et que cette solution est plus "propre" que celle d'avant.
Modifié par Spheerys (25 May 2013 - 18:08)

J ferai le contraire au niveau de la detection de langue c'est a dire si c'est "en" ou tout les autres c'est anglais.
Si c'est "fr" c'est français, la langue internationale est l'anglais.

Avec ma graphiste, on s'est posé la question.
Comme le domaine est français, on a estimé que par défaut, il était plus cohérent de le laisser en français (bien que tu aies raison sur le fait que l'anglais soit la langue internationale).

Si d'autres ont des avis sur la question, je suis preneur

Spheerys a écrit :

Si d'autres ont des avis sur la question, je suis preneur

Mon avis c'est que ton code pour la sélection de la langue via HTTP_ACCEPT_LANGUAGE n'est pas bon.

Cette variable renvoie une chaine qui à la forme :

es,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3

L'ordre dans lesquelles apparaissent les langues peut varier et la note q est un indice de préférence de l'utilisateur entre 0 et 1 (pour 1 la valeur n'apparait pas).

Ainsi si tu as :

en;q=0.3,fr,fr-fr;q=0.8,en-us;q=0.5

L'utilisateur préfère le français mais ton script va l'envoyer sur le site anglais (parce que "en" apparait au début mais il a un indice de préférence moins élevé que "fr" ou "fr-fr".

Voilà une méthode qui fonctionne vraiment dans tous les cas :

http://www.thefutureoftheweb.com/blog/use-accept-language-header
Modifié par jb_gfx (26 May 2013 - 22:23)

Effectivement, la méthode proposée est carrément plus fiable.
Voilà le code du snippet DetectLanguage pour MODX :

<?php
$langs = array();

if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
    // break up string into pieces (languages and q factors)
    preg_match_all('/([a-z]{1,8}(-[a-z]{1,8})?)\s*(;\s*q\s*=\s*(1|0\.[0-9]+))?/i',     $_SERVER['HTTP_ACCEPT_LANGUAGE'], $lang_parse);

    if (count($lang_parse[1])) {
        // create a list like "en" => 0.8
        $langs = array_combine($lang_parse[1], $lang_parse[4]);
    	
        // set default to 1 for any without q factor
        foreach ($langs as $lang => $val) {
            if ($val === '') $langs[$lang] = 1;
        }

        // sort list based on value	
        arsort($langs, SORT_NUMERIC);
    }
}

// look through sorted list and use first one that matches our languages
foreach ($langs as $lang => $val) {
	if (strpos($lang, 'en') === 0) {
              header ("location: ".$modx->makeUrl(97, '', '', 'full'));
              exit;
	} else if (strpos($lang, 'fr') === 0) {
              header ("location: ".$modx->makeUrl(1, '', '', 'full'));
              exit;
	} 
}

// show default site or prompt for language
header ("location: ".$modx->makeUrl(1, '', '', 'full'));
exit;

Je l'appelle sur la page d'accueil du site avec [[DetectLanguage]]
Qd j'aurai le temps j'en ferai un add-on
Modifié par Spheerys (07 Jun 2013 - 15:32)

J'aime beaucoup le rendu général du site, comme ca a été dit, les couleurs s'armonisent très bien, le site a un coté épuré et très propre qui au final colle très bien avec le produit ciblé.

Pour compresser les images au mieux, je te conseille de lire cet article.

Sinon, il a encore moyen de pousser un peu plus loin les performances en injectant quelques lignes dans le .htaccess
Pour ca, n'hésite pas à jeter un oeil à celui proposé par HTML5 Boilerplate.

Pour accélérer encore le chargement des pages, je te conseillerai de placer (dans la mesure du possible) le javascript avant la balise de fermeture de l'élément body.

Pour finir, il y a la petite image présente tout à gauche dans le footer qui a une dimension supérieure (127x120) à la dimension affichée (60x57)

A part ca, rien à redire, super boulot