[Pro]site pour un gîte rural dans une ancienne chapelle.

Bonsoir,

J'ai créé un site pour un gîte rural installé dans une ancienne chapelle du 16e siècle.

Principe du responsive single page design, contenu géré par Wordpress.
95% du contenu de la page principale est gérable par le client final.
La partie blog est gérée à part avec les templates de Wordpress.
J'ai aussi utilisé Bootsrap pour le css.

Site Chapelle Enchantée

Bonjour.

Le logo dans le titre est vraiment minuscule (joli d'ailleurs).

L'article 'Votre séjour à la chapelle enchantée' a beaucoup de texte... (j'avoue, j'ai eu la flemme...)

Virginie et Olivier sont discrets... ça manque un peu d'humanité.

Les 'ballades', c'est de la musique (dans 'Faire des belles ballades en vélo')

(C'est un peu dommage ce 'Mobile First': pas de mise en page spécifique pour un écran un peu grand... mon petit 17 pouces...)

Bref, des détails...

Merci pour le retour

Zelena a écrit :
Bonjour.
Le logo dans le titre est vraiment minuscule (joli d'ailleurs).

c'est vrai, mais j'ai voulu rester dans les limites du menu.

Zelena a écrit :
Bonjour.
Virginie et Olivier sont discrets... ça manque un peu d'humanité.

Je voulais les faire figurer, même en photo, mais ils n'ont pas voulu...

Zelena a écrit :
Bonjour.
(C'est un peu dommage ce 'Mobile First': pas de mise en page spécifique pour un écran un peu grand... mon petit 17 pouces...)

je comprends pas.. pourtant il passe bien sur mon 24 pouces.

(je vais corriger la faue à balades
Modifié par lionel_css3 (01 Dec 2016 - 09:44)

lionel_css3 a écrit :

Je voulais les faire figurer, même en photo, mais ils n'ont pas voulu...

Et en illustration ?

lionel_css3 a écrit :

je comprends pas.. pourtant il passe bien sur mon 24 pouces.

Si, si, ça passe.
C'est juste un regret sur le manque - assez répandu - de mises en page propres aux 'grands écrans', lequel découle assez naturellement du Mobile First.

Ce n'est pas à proprement parler une critique.

Zelena a écrit :

C'est juste un regret sur le manque - assez répandu - de mises en page propres aux 'grands écrans', lequel découle assez naturellement du Mobile First.

oui tu veux dire par exemple que les pavés de texte sot trop larges sur grand écran?
eh oui c'est un peu le problème avec le responsive design c'est qu'il y a des cas où dans certaines largeurs d'écran le design est défavorisé....
En plus là je récupère des éléments dans des 'contenus de type Pages' Wordpress à l'intérieur desquels l'utilisateur final a peu de possibilité concernant le design (à moins de coder directement dans l'éditeur)

lionel_css3 a écrit :

oui tu veux dire par exemple que les pavés de texte sot trop larges sur grand écran?

Oui, ou des images alignées les unes en dessous des autres avec beaucoup d'espace de chaque côté.

Zelena a écrit :

Oui, ou des images alignées les unes en dessous des autres avec beaucoup d'espace de chaque côté.

je ne comprends pas où, peux-tu me citer une largeur d'écran et de quelles images tu parles ?

edit: et quel navigateur éventuellement?
Modifié par lionel_css3 (01 Dec 2016 - 11:19)

lionel_css3 a écrit :


je ne comprends pas où, peux-tu me citer une largeur d'écran et de quelles images tu parles ?

Il n'y a rien de vraiment choquant, dans votre cas en tout cas.

À dire vrai, il n'y a guère que la photo Beynac-1.jpg qui corresponde vraiment...

Je parlais d'une façon plus générale (désolée de vous faire des frayeurs... ).

Bonjour.

Deux-trois trucs en passant concernant principalement les textes :

“Spa” n’est pas un acronyme, mais un mot ordinaire, il s’écrit donc “spa”, en minuscules, s’agissant d’un établissement d’hydrothérapie ou d’un équipement d’hydromassage (en fait, le nom découle (normal s’agissant d’eau) de la ville de Spa, en Belgique). De plus le texte contient les graphies “SPA” et “spa”.

“Une chapelle du XVIème”… arrondissement ? siècle ? autre ? Je ne vois pas de raison de ne pas ajouter le mot “siècle”.

Idem pour le “lit douillet de 160” : je ne vois pas de raison de ne pas ajouter les mots “centimètres de large”. Par ailleurs, cette précision me semble excessive, et peut-être dissuasive (“Quoi ? Mais nous, on veut un matelas de 200 !”).

Les numéros de siècles sont certes normalement composés en chiffres romains, mais je m’interroge sur la capacité des gens à comprendre ces chiffres romains. Peut-être vaudrait-il mieux écrire ces numéros en chiffres ordinaires.

En bonne typo, suivant un numéro, le suffixe “-ième” s’écrit simplement “e” en exposant, et non “ème” ou “ième” ; c’est plus joli.

Le texte comporte des majuscules dispensables : “Chapelle”, “Lauzes”, “douche Bio”, etc. Sur “Chapelle Enchantée”, ça va car ça peut être considéré comme un nom propre.

Attention aux abréviations dans les textes : “St-Valentin”, “Nous sommes situés à 10 mn de la cité médiévale”. Dans des textes non scientifiques, techniques ou administratifs (ou à l'opposé, dans des textes à valeur littéraire), les abréviations ne se justifient que par un manque de place ou parce que ce sont des abréviations dont l’usage est généralisé (“m²”, “M.”, “Mme”, etc.).

“Périgordins pur souche” > “Périgordins PURE souche” (UNE souche, c’est féminin) > “Périgordins de souche”. “Pure souche” est quelque peu pléonastique, une souche (au sens métaphorique du terme) étant pure par définition.

EDIT : Et puis, si on dit “pur jus”, on dit “DE souche”.

Par contre, et au cas où on t’en ferait la remarque, “Périgordins”, bien que beaucoup moins utilisé que “Périgourdins” est exact. “Périgordins” désigne les habitants du Périgord, “Périgourdins” désigne plus spécifiquement aux habitants de la ville de Périgueux (source : Wikipedia, page “Périgord”).

Bref, ton texte devrait faire l’objet d’une relecture pour éliminer ces quelques petites erreurs (à moins que certains de ces “écarts” soient volontaires).

Les cases de défilement et de fermeture de la lightbox sont difficiles à voir, en tout cas sur certaines photos. Des cases plus visibles (couleurs, taille) seraient appréciables.

La colonne de texte “Notre SPA” (avec “SPA” à corriger) est en texte justifié avec une justification (largeur de colonne) peu importante et des espaces intermots de largeur très variable et donc peu esthétiques. Il est possible d’homogénéiser la largeur de ces espaces en utilisant la propriété + valeur CSS :

hyphens: auto

.
Celles-ci ne sont pas supportées par les navigateurs basés sur Blink, mais bon, pour les autres, ce sera déjà mieux. Il est encore possible d’uniformiser davantage la largeur des espaces intermots en réduisant la largeur de ceux-ci grâce à la propriété

word-spacing

+ valeur négative et unité (ça peut aussi marcher avec une valeur positive, mas c’est plus rare).

Le numéro de téléphone devrait peut-être être plus visible et placé ou dupliqué avant ou après le formulaire de contact, à moins que les propriétaires ne souhaitent pas être préférentiellement contactés par ce moyen. Beaucoup de gens sont susceptibles d’utiliser le téléphone, notamment des personnes maîtrisant mal l’informatique. Et aussi, pourquoi ne pas écrire le numéro de téléphone avec l’indicatif international (à la place ou à côté du numéro national).

Ah oui, je trouve la police scripte des titres assez peu lisible (même si j'aime bien l'idée d'employer une police scripte).

C’est tout pour le moment. Bonne continuation.
Modifié par thierry (04 Dec 2016 - 21:09)

lionel_css3 a écrit :
oui tu veux dire par exemple que les pavés de texte sot trop larges sur grand écran?
eh oui c'est un peu le problème avec le responsive design c'est qu'il y a des cas où dans certaines largeurs d'écran le design est défavorisé....
En plus là je récupère des éléments dans des 'contenus de type Pages' Wordpress à l'intérieur desquels l'utilisateur final a peu de possibilité concernant le design (à moins de coder directement dans l'éditeur)

Les paragraphes trop larges sur grand écran, c'est un grand classique en matière d'ergonomie...
En règle générale, un @max-width de 33 à 40 EM (soit une largeur maxi d'environ 60 à 70 caractères) appliqué sur la balise P ou élément de liste suffit à y remédier, avec, éventuellement des marges gauche et droite en valeur "auto" pour centrer lesdits paragraphes.

Bonjour Lionel,

Je partage l'avis de Sepecat, sur grand écran, le site s'étale trop en largeur. Les paragraphes peuvent être plus courts que la largeur du container.

J'aime les photos du petit slider du haut, elles sont à la fois vintage, chaleureuses et modernes. Mais pour moi, le reste ne suit pas.

Je note aussi 3 gros points à optimiser : le manque de composition (on a des trucs qui se casent un peu partout comme pour boucher les trous), la gamme des couleurs terne et plombante, le logo et les illustrations désuètes.

À vouloir trop en montrer, ça peut devenir contre productif. Les utilisateurs ne resteront pas des heures sur le site, ça manque de synthèse et certains choix n'ont pas été tranchés. Vous devez privilégier le storytelling plutôt que le dépeçage en règle.


Quelques pistes d'améliorations :

• Supprimer ce fond gris/beige terne et poussiéreux. Quitte à donner une touche ancienne, un blanc serait plus propre et donnerait de suite un coup de frais (avec le logo et titres en or ou brun ?). L'association du marron, du beige/rose et du gris/beige est lourde. Le texte gris sur le marron… Les tableaux bleus et jaunes bureautiques sur le gris/beige… c'est hard ! La difficulté est de garder une touche rétro sans faire vieillot. Choisir des teintes qui se répondent plutôt que des teintes qui luttent.
Cherchez un site en exemple (voyage, musées… ) ou une gamme toute prête. C'est le problème #1 de ce site.

• De l'air !! Tout est agglutiné et de taille similaire. Le moindre trou est bouché. Du coup difficile, voir impossible de faire chic. Mettez du vide, choisissez la symétrie, plus de dépouillement, moins de bricoles collées un peu partout, du contraste dans la taille des éléments, supprimez le contenu inutile ou polluant…

• Le logo est complètement à revoir. Cet angelot à flèche récupéré sur une vieille carte de Saint Valentin fait kitsch, il est mal placé par rapport au texte (il tombe) et n'inspire ni le glamour, ni l'élégance. Restez sobre, si vous tenez à un angelot, donnez lui une pose moins cliché, plus sobre, plus imagée, moins énorme. L'arc et les flèches, non. Pas de variantes dans le logo, on ne touche jamais à un logo et on laisse du vide autour, sinon vous tuez le logo. Là ça devient carrément kitchouille dans la déclinaison avec les petits cœurs beiges et kakis. Les beigeasses et les kakis sont très casse gueule dans une palette. Chacun ayant un écran qui peut afficher les couleurs de façon différente, ces couleurs vireront bien souvent au caca d'oie. C'est pourquoi elles sont rares, voir bannies des palettes Material ou iOS.
L'aspect sale des couleurs ressort encore plus quand on place dessus un dessin rose bonbon.

• La photo avec la bouteille de champ dans le spa est imposante. Le "cadeau" fait cheap. De la promo à pas cher, mais pas chic…

• La zone "La région enchantée… " ne fait pas rêver (attention de ne pas oublier les Majuscules !!). Là pour le coup, je suis frustré de ne pas mieux voir la photo. Le descriptif est trop long. 2 phrases c'est suffisant et ça serait bien plus efficace : elles auront plus de chances d'être lues, là on glisse.
Pourquoi ne pas afficher la photo sur toute la largeur, avec un effet de parallaxe cool ? Là oui, ça donnerait plus envie de se déplacer…

• Les "news de la… " : On s'éparpille. Tout ça pour nous coller des cartes façon fiche de cuisine avec une vue de la chapelle redondante et un gâteaux aux noix qui baigne dans la soupe. Le tout accompagné de textes inutiles qui détournent du sujet principal…
Je virerais cette rubrique polluante. Trop d'info tue l'info. Un blog à côté, si vous avez le contenu ?

• "Descriptif de nôtre gîte"
Sympa les photos. Les utilisateurs sont demandeurs de ce genre d'infos. Par contre, vu que le haut de la page présente une certaine symétrie, il aurait été agréable de rester dans cette logique. Là j'ai un gros bloc sur le côté avec 3 tonnes te texte et un spa à l'eau verdâtre… Aussi glam qu'un WC bouché, en plus de casser la symétrie.
Mettez cette photo avec les autres (un petit filtre pour assainir l'eau), et pour le texte de cette rubrique, 3 phrases maxi. Là même le rapport annuel de Renault impose moins de texte à lire. En assommant les utilisateurs avec autant de blabla, vous vous assurez d'une chose : ne pas être lu.

• Les plans de dessus en image de synthèse, c'est très laid. Là encore, ça casse le glam. Utile certes, mais laid. Ne pas perdre de vue que vous devez faire rêver, emporter les lecteurs. Pour atténuer l'effet "lourd", les présenter en slider (du coup ça prend 2 fois moins de place), et tenter un effet filtre pour enjoliver un peu ? L'idéal serait de les redessiner en outline pour s'harmoniser avec le reste. Un plan technique passerait mieux que ces dessins.

• "Votre séjour à la Chapelle… " : là on se prend une claque avec un chapitre de roman entier à se coltiner. Et c'est pas du Flaubert, juste de l'argument commercial ! Aussi agréable à lire qu'une page de mentions légales. Le détail qui tue, le tableau au style "Excel" sur le côté. Là il y a un manque de soin et de cohérence évident, La photo détramée en arrière plan ne sert pas le propos. Uni ou bichromie plus soutenue (il est vrai que votre gamme actuelle n'aide pas).

• Le dessin avec les cyclistes, pas fan mais pourquoi pas si le site est rafraichi. Mais peut être tout en bas, avec le plan ?

• Les "idées d'activités…", ça j'aime beaucoup. Les photos sont pertinentes et sympas. Quel dommage que l'on ait été assommé auparavant par 12 chapitres et 3 tonnes de textes chargés. Ça arrive presque trop tard…

• Les coordonnées GPS, latitude, longitude… C'est parce que vous aviez peur de ne pas avoir assez de contenu ? Ça illustre votre peur du vide, quitte à remplir avec n'importe quoi.
À la limite, si vous voulez mettre un gadget, la météo locale serait plus utile (assez risqué aussi…).

• Les mentions légales : sauf la raison sociale et les coordonnées, à placer ailleurs (page annexe… ).

• Le footer reprend les infos rabâchées plusieurs fois au dessus. Là encore, on alourdit avec des infos redondantes, du coup ça en devient presque confus. Imaginez-vous à la place de quelqu'un qui aura TOUT lu ! Si cette personne existe…


Bref, je note l'intention de vouloir bien faire, mais je pense qu'ici le mieux est devenu l'ennemi du bien. Vous voulez trop en dire, au détriment de la fa forme, du style et finalement du fond. Choisissez vos mots, vos images, la composition…
Vu le travail déjà accompli, je pense que vous êtes à mi-chemin, en revenant sur des choses plus simples, plus aérées et fraiches, une approche plus narrative (le storytelling peut passer par le visuel), ça devrait pouvoir avancer.

Voilou pour moi.
Modifié par spongebrain (05 Dec 2016 - 15:54)

Bonjour,

je suis sur un pc portable 15,4" sous chromium.

personnellement les couleurs ne me rebutent pas du tout, c'est ce qui fait l'identité du site. Marre de voir le web se normaliser en blanc flat lol

Le premier petit défaut que je constate c'est que les boutons du menu ne prennent pas la couleur de background du bouton de bienvenue lorsque l'on clique dessus, du coup on a plus de mal à se repérer.
Je trouve que le logo facebook aurait mérité d'être stylisé dans les teintes du site.

La mise en forme du premier paragraphe sous le slideshow n'est pas très élégante. Je le verrai moins large avec un centrage vertical et peut être une indentation quoique l'alignement à gauche est esthétique.

L'idée cadeau n'est pas assez explicite, on ne sait pas si il va être question d'une bouteille de champagne ou d'autre chose. De plus les internautes qui naviguent sur le site ont à priori déjà un désir de louer un gite, ils n'ont pas besoin d'idée cadeau pour offrir une location. Pour moi c'est un élément en trop qui devrait être synthétisé, explicité, et placé à un niveau plus que secondaire. D'autre part la proposition est trop simpliste, on est juste invité à faire une réservation standard sur le formulaire, c'est un argument commercial complètement vide qui amoindrit l'image de marque selon moi.

La texte sur la région enchantée du Sarladais n'est pas top, c'est un peu trop plat. Les attraits naturels et culturels d'accords, mais quels sont ils? Quels sont les particularités du coin à voir pour lesquels ont devrait être intéressé de louer ce gite? La structure du texte est mauvaise, personnellement je procéderai à une description en allant du particulier, le gite, vers le général, la région. Là ça commence par la chapelle puis on nous parle de la région pour finir par les 40m2 de la chapelle sur deux niveaux. Ce n'est pas l'endroit pour parler de ça! Les trois dernières lignes devraient trouver leur place dans le descriptif technique du gite.

Ensuite on arrive sur les news version blog, si c'est une volonté du client que dire... pour moi ça n'a rien à faire là, en particulier sur un site one page, ce serait à supprimer. Il n'y a rien de plus anti-commercial qu'un blog, si en plus c'est pour tomber sur un gâteau aux noix du Périgord, même si c'est la spécialité du coin, quand on cherche un gîte s'est pas notre sujet. Quant à "la chapelle est prête à vous recevoir", c'est le minimum! D'accord ce sont des billet amenés à changer, mais franchement, le flux d'actualité d'un gite... il n'y a rien de prometteur.

Puis on arrive au descriptif, le moment est venu de dire que le gite fait 40m2 sur deux niveaux. Mais non puisque c'est dit dans la description de la région.... lol

Et c'est là que ça commence à sentir le roussit pour moi, on nous a collé une pub pour une part de gateau au noix du périgord plus haut et la cuisine est inexistante dans le descriptif, limite on se demande s'il faut apporter un camping gaz!!! Ou acheter la part de gâteau à 5 euros dans la maison du proprio qui est juste à coté! haha

Les photos sont géniales.

Ensuite la partie sur le séjour, bon même remarque sur le texte mais c'est la volonté du roi.

Par contre avec les tarifs on aimerai bien un calendrier des disponibilités et des tranches tarifaires en fonction des saisons. C'est quasiment la norme sur tout les sites de location saisonnière et d'hébergement. Même remarque sur le numéro de téléphone, il n'est pas assez visible.

Puis viennent les idées d'activités. C'est subjectif mais quand on me parle d'idées j'entends que c'est parce qu'à la base il n'y a rien à faire, d'ou la nécessité d'avoir des idées et d'en donner. Cette partie devrait se trouver à la suite de la présentation de la région, ben oui, on découvre la région et ce qu'on peut y faire. Résultat ici on a un bloc sans lien logique avec le précédent qui ressemble à un bouquin scolaire destiné à apprendre le français aux anglais lol. Vraiment pour moi il faut replacer tout ça dans le contexte régional, donc au minimum à la suite de la présentation de la région, ou il est déjà question de ces activités.

=> Il faut garder une évolution cohérente dans les sujets, et ne pas traiter un sujet partiellement pour y revenir après un autre, pensez aux amoureux de la roulette, moi j'ai scrollé avant de penser à cliquer sur le menu!

En one page pour moi les mentions légales sont en trop à cet emplacement cela fait fouilli, je les mettrai plutot dans le footer en plus condensé ou dans un bloc extensible. Lorsque l'on est un professionnel de confiance on a pas besoin de mettre en avant les infos qui prouvent que l'on peut nous faire confiance. Même si évidemment il faut les garder accessible pour raison légale.

Et pour finir, bon de réservation en pdf, en option c'est bien mais par défault il faudrait un formulaire.

Voilà pour mes remarques, critiques et conseils

Cordialement.
Modifié par Cyberdome (10 Dec 2016 - 23:42)

lionel_css3 a écrit :
Mais bon il y a quand même une différence entre "critiquer" et "s'écouter parler".

Réponse grossière, prévisible, cohérente avec le site présenté. Désolé mais si ça peut passer limite pour un site perso amateur, avec un label "pro" ça ne tient pas la route pour les raisons que je vous ai expliqué. Mettez votre orgueil de côté, vous jouez contre vous, contre votre client et contre les professionnels sérieux. Aucun designer pro ne soutiendrait un tel site. Aucun. C'est pas vendable honnêtement. Les notions de bases de design ne sont même pas intégrées et le résultat n'est pas propre. Vous n'êtes pas designer ni par le rendu, ni par la réaction. C'est un métier qui ne se limite pas à savoir utiliser des logiciels.

Dommage il n'y avais aucune malveillance dans mon propos. Vous n'avez pas saisi la perche (un peu raide certes). Je passe mon tour.
Modifié par spongebrain (11 Dec 2016 - 20:17)

spongebrain a écrit :

Réponse grossière, prévisible, cohérente avec le site présenté. Désolé mais si ça peut passer limite pour un site perso amateur, avec un label "pro" ça ne tient pas la route pour les raisons que je vous ai expliqué.

.....

Dommage il n'y avais aucune malveillance dans mon propos. Vous n'avez pas saisi la perche (un peu raide certes). Je passe mon tour.

Et bien justement, si vous passez votre tour, cela vous donnera du temps pour aller faire un tour sur votre propre site qui ne possède aucune balise <meta> description... dans sa balise <head>
Une grossière erreur de débutant ça... monsieur le professeur
vous êtes vous êtes amusé à faire une recherche sur google en mettant votre nom et vous avez regardé ce qu'il reconstitue comme description dans les résultats qui pointent vers votre site?
Et je ne parle pas de contenu sémantique totalement absent sur la page d'accueil et le texte anglais mélangé avec le texte français, le seul contenu réel étant un slider d'image placé après la balise <footer>.... joli la sémantique... bravo la technique de référencement SEO ...
Et je ne vous parle pas non plus de vos graphiques en 1ere image de slider, sur fond caca d'oie avec des textes doublés superposés et légèrement décalés rouge et vert vif qui font mal aux yeux..
Ah oui, mais pardon, je suis pas graphiste, je suis grossier et amateur... je peux pas comprendre

Pardon, alors, je passe mon tour moi aussi
Modifié par lionel_css3 (12 Dec 2016 - 00:30)

Je n'ai parcouru qu'une partie du site, attention à la cohérence d'ensemble sur les guillemets...

Le Périgord noir est reconnu pour la richesse des ses sites touristiques classés, ce coin de la Dordogne est d’ailleurs qualifié de pays des mille et un châteaux, grottes, gouffres, abbayes, bastides et jardins. On y trouve également une concentration unique des « plus beaux villages de France ».
...
Un spa relaxant pour une pleine sérénité, une acoustique exceptionnelle, des mets de terroir d'une saveur raffinée, un champagne à déguster paisiblement, des vins régionaux gouleyants: Tout est pensé pour ravir vos sens et faire de ce séjour une inoubliable" Nuit de Miel".

Petite faute d'accord :

Après une soirée relaxante, la chapelle enchanté peut être le point de départ d'un périple touristique aussi varié qu' enchanteur.Bien sûr nous sommes à votre disposition pour vous faciliter la vie durant votre séjour, n’hésitez pas à nous consulter pour tous renseignements sur les activités authentiques, manifestations du terroir, et visites locales qui combleront vos attentes.

Quelques anomalies détectées également sur les espaces (cf. ci-dessus devant « Bien sûr » + autres séparateurs par ci par là)...
Bonne fin de soirée.

sepecat a écrit :
Je n'ai parcouru qu'une partie du site, attention à la cohérence d'ensemble sur les guillemets...
Bonne fin de soirée.

J'entends bien, mais c'est un site Wordpress.....

Le client retouche lui même ses contenus... je ne peux pas être constamment derrière lui...

Je vais aller voir la faute d'accord que tu as remarquée [edit: c'est fait ], en plus j'en avais déjà corrigé d'autres, mais là j'y peux rien...

Si tu vas acheter un lecteur de Dvd au Leclerc, on va pas gronder le vendeur si tu regardes des mauvais films dessus (humour)
Modifié par lionel_css3 (11 Dec 2016 - 23:59)