Bonjour

Je viens de terminer ma première mise en page first mobil en utilisant flexbox non sans mal .....

http://www.fermelescollines.com/2016/index.html

Ce site grandement inspiré d'un template de Raphaël m'a permis de faire des progrès, mais un retour sur le site en totalité (code, le graphisme, les couleurs,) me serait d'une grande utilité Smiley smile

Au plaisir de lire vos critiques et conseils , merci

Bon weekend
Smiley biggrin
Modifié par africa (12 Apr 2016 - 04:10)
Administrateur
Bonjour,

je n'ai testé qu'un aspect : en ayant une légende de photo qui passe sur 2 lignes, cela élargit la photo et tout le bloc figcaption. Est-ce souhaitable ? (je dirais que non).
Si tu ne te préoccupes pas des vieux navigateurs qui ne supportent pas flexbox wrap (multi-ligne/colonne), pas besoin de 2 conteneurs flex : un seul suffirait pour les 4 figcaption.

En 768 de large, la sidebar à gauche parait très large comparée au contenu (mais il faudrait tester sur un vrai device)
Bonjour !

Des randonnées à cheval ? Ça a l'air sympa. Smiley smile

J'ai un peu du mal avec ces blocs bleu vif qui 'jurent' avec le reste du site fait de tonalités douces presque éteintes.

Seule la page "Accueil" fonctionne ?

Vous mettez l'accompagnateur en avant en citant son nom mais l'image le représentant est en plan large (il est souriant mais peu visible).

Je n'ai pas compris ce que représentaient les autres images : des noms de randonnées (non car sur le pdf elles sont appelées autrement), des hauts-lieux (on dirait mais le vautour est-il un haut-lieu ?)

"Etablissement habilité tourisme n° HA 064.02.0001...etc " ça ressemble à des mentions légales, c'est écrit bien gros...

Sinon les chevaux ont l'air de faire la tête dans le 'header ' : ils ont pas l'air pressé de se lancer dans une chevauchée sauvage... Smiley smile (blague à part, vous n'avez pas une image plus... enthousiasmante)
Smiley smile
Merci Felipe et zelena Smiley biggrin

J'ai suivi vos conseils

Felipe
J'ai revu la largeur de la sidebar de gauche et adapté en fonction des écrans.

(pas besoin de 2 conteneurs flex : un seul suffirait pour les 4 figcaption.)
J'ai essayé, pas réussi ???

Zelena

J'ai atténué la couleur bleue, je n'ai pas d'idée pour une autre couleur..!
Si vous avez des conseils ? Smiley biggrin
J'ai modifié 2 photos, supprimer les mentions, c'est bien mieux, merci.
Modifié par africa (02 Apr 2016 - 16:32)
africa a écrit :
J'ai atténué la couleur bleue, je n'ai pas d'idée pour une autre couleur..!

Bonjour,
Côté couleurs, puisque le site est marqué pays basque, pourquoi ne pas utiliser par exemple une charte graphique en rapport avec les maisons rouge et blanc, ou autre signe fort permettant d'identifier visuellement cette localisation.
Je ne suis pas fan des sites au régionalisme exacerbé, mais lorsque c'est fait intelligemment, cela passe sans problème.
sepecat a écrit :


Côté couleurs, puisque le site est marqué pays basque, pourquoi ne pas utiliser par exemple une charte graphique en rapport avec les maisons rouge et blanc, ou autre signe fort......


Merci pour le post, j'ai déjà envisagé l'utilisation des couleurs basques, mais ici 2 sites sur 3 reprennent les mêmes couleurs, identité oblige ...! Smiley biggrin

Bon am
salut je viens de voir le site, et ben pas mal du tout , voir ton site me donne envie de lire le livre que j'ai acheté sur le flexbox. Juste je bosse en ce moment et j'ai pas trop le temps ; mais tu confirmes mon intéret pour le sujet !

Et encore bravo pour le site !
mika931 a écrit :
salut je viens de voir le site, et ben pas mal du tout , voir ton site me donne envie de lire le livre que j'ai acheté sur le flexbox. Juste je bosse en ce moment et j'ai pas trop le temps ; mais tu confirmes mon intéret pour le sujet !

Et encore bravo pour le site, ca donne un apercu de ce que l'on peut faire avec une flex box et réfléchir mobile first
J'en appelle ici au grand Manitou des Arts, j'ai cité Spongebrain, le seul capable de t'écrire un post aussi long que le bras, post qui si tu le suis à la lettre te permettra d'avoir un graphisme à la hauteur de ton code.
(va être content le spongebrain mdr)
Bonjour

Merci pour vos retours

Grâce à vous et au livre de Raphaël j'ai pu améliorer ce site,
J'ai beaucoup de mal avec le graphisme, j’espère comme le suggère Manhattan que Spongebrain passera sur mon site Smiley smile

J'ai lu bon nombre de ces messages , ses posts sont toujours très pertinents et enrichissants ....

Bonne journée


Manhattan a écrit :
J'en appelle ici au grand Manitou des Arts, j'ai cité Spongebrain, le seul capable de t'écrire un post aussi long que le bras, post qui si tu le suis à la lettre te permettra d'avoir un graphisme à la hauteur de ton code.
(va être content le spongebrain mdr)
Bonjour,

Après ces quelques compliments, je me dois de répondre ? Vils flatteurs va ! Smiley lol

En fait, pas grand chose à ajouter par rapport à ce qui a déjà été dit. C'est un site pour une petite asso, qui fait plutôt bien le job. Déjà à la base, c'est propre et lisible, on trouve facilement l'info.

Le template semble bien se décliner en petites largeurs (responsive). Les photos, notamment celle du header sont plus fraîches sur la version actuelle.

Quelques réserves sur les points suivants (déjà abordés ?) :
• En l'état, l'utilisation du template fait encore un peu brut de décoffrage, on change les photos et le texte et ça peut s'appliquer à tout. Il faut donc la personnaliser un peu plus pour donner un peu de cachet à l'ensemble.
• Le titre fait un peu plat. Peut être mentionner le nom en grand "Les Collines" et préciser "Ferme équestre" en plus petit, façon baseline en dessous. Histoire de hiérachiser l'info et d'animer la typo ?
• En version verticale (mobile… ), la taille des lettres du titre est plus petite que celle de "menu". Pas logique. Inutile d'accentuer à ce point l'espace entre les lettres (Menu).
• Ce bleu est en effet très agressif, il charge la maquette. Il m'évoque les vielles interfaces bureautiques. À mille lieues de l'univers de la randonnée et du cheval. Choisir une couleur moins brute, ou simplement passer au fond blanc, histoire d'alléger. N'ayez pas peur du blanc, il vous le rendra bien. Inutile de surcharger vu qu'il y a déjà plein de visuels, plus de sobriété mettra en valeur le contenu.
• Pas fan des coins arrondis et de la bordure blanche sur la version desktop. On a des cadres dans des cadres, dans des cadres… Ça colle 10 ans au site. Faites simple, coins carrés, pas de bordures, fond blanc (ce qui implique de revoir l'équilibre des couleurs (blanc en fond + texte gris/noir + couleur fraiche en touches (titres, éléments de navigation… ) ). À tester, une très légère ombre autour des blocs ? Mais très légère…
• Les Hover en jaune fluo, ça claque trop. À remplacer par cette couleur dont je parle au dessus : un vert frais, nature ou flashy, un bleu vert ? … À vous de tester…
• Pas fan non plus de la photo triste et terne avec les chevaux attachés (prestations).
• Quand je clique sur le titre, il ne se passe rien. L'idéal serait de revenir à l'accueil pour faciliter la navigation.
• Le rond avec le dessin du cheval… Mouais… C'est pas assez stylisé pour être votre mascotte, un peu léger pour une illustration. Peut, être que ça passera mieux en tant qu'illustration sur fond blanc.
L'idéal serait une jolie mascotte/logo dans le header. Mais pas indispensable.
• Attention au fautes d'orthographe et erreurs de typo. Il manque les accents sur les majuscules (Écrans), et pire, sur les minuscules (Accès).
• Si l'image a la cote, un petit texte d'intro ne serait pas du luxe dans certaines rubriques. Par exemple dans "Balades". Placer 3 lignes pour faire rêver un peu. Placer des chapôs.
https://fr.wikipedia.org/wiki/Chapeau_(presse)
• La carte des randonnées manque un peu de soin (textes collés, pixélisés, design Excel… ). Pour la faire vivre, un peu de texte en amont, des teintes plus "nature". Et sur celle-ci des ronds avec des photos ou des pictos qui illustrent les paysages à découvrir ? Dans ce genre là ?

http://www.mairie-courchevel.com/image/Environnement/dechets/pictolocgreen.png


Très jolis les fonds d'écrans offerts. À faire vivre dans le menu avec un call to action genre "offert", "cadeau"… Ce genre de bonus sera bien perçu par les amateurs de chevaux, autant le mettre en valeur.


Pas de révolution dans mes suggestions donc, mais des petites optimisations qui si elles sont bien appliquées, peuvent donner un coup de peps.
Sympa l'arrière plan qui s'affiche en fin de scroll. C'est moderne. Raison de plus pour simplifier le reste. Smiley cligne

Ceci dit, j'adore les chevaux et mes souvenirs de randonnées, bivouac dans le Morvan sont juste magiques. Je le recommande à tous. Smiley smile

Voilou. Smiley smile

P.S. : Pour les couleurs, j'ai placé un petit guide à la fin de ma présentation (PDF) en lien ci-dessous.
Modifié par spongebrain (12 Apr 2016 - 10:39)
Bonjour

Merci, merci .... spongebrain Smiley biggrin

De m’avoir consacré de votre temps et de votre expérience, je vais m'empresser de mettre vos conseils en application.

Bonne journée


P.S.
Je n'ai pas trouvé le petit guide (PDF) sur les couleurs, je vais peut être m'acheter des lunettes Smiley biggrin
africa a écrit :

Je n'ai pas trouvé le petit guide (PDF) sur les couleurs, je vais peut être m'acheter des lunettes Smiley biggrin

Sur le lien juste en dessous (article alsa). Ensuite il suffit de télécharger le PDF sur SlideShare et le guide des couleurs se trouve à la fin. Smiley cligne

J'ajouterai que je trouve étrange que le seul lien social soit Google+, réseau moribond face aux Twitter et Facebook…

Pas fan des ombres sous les titres. Ça ne fait pas propre, ni moderne.

Sur la version mobile, l'usage veut que l'on place le burger icon tout en haut (à gauche ou à droite). Inutile d'ajouter la mention menu. Les utilisateurs ont l'habitude de ce pictogramme.

Smiley smile
Modifié par spongebrain (13 Apr 2016 - 20:33)
Hello,

En passant, je plussoie l'analyse de sieur Rondepierre sur l'aspect "daté" du site pour les raisons déjà évoquées et sur le reste aussi Smiley jap Smiley ohwell
Effectivement, ce "grand vide" au scroll qui débouche sur une belle image mérite probablement une section à part, sans être totalement dérangeant, il laisse une curieuse impression (à télécharger ? pas fini ?...)
J'ai un rendu curieux sur iPad (paysage et portrait) dû à certaines images qui ne s'adaptent pas (le logo dans la sidebar, ainsi que les images en dessous, les cartes...) qui débordent du "cadre" et déforment un peu la mise en page, c'est dommage Smiley cligne

Allez, mon PinIcon pour la route Smiley lol


Bon courage Smiley cligne upload/12813-PinIcon.png
Modifié par 6l20 (14 Apr 2016 - 17:31)