[Pro]Site aménageur de Camping car

Bonjour,


je vous soumet un site que je viens de mettre en ligne

http://www.evasion24.com/index.php

Le client est un aménageur de camping car qui adopte un style 'marin', d'où la palette de bleu et les éléments de décor 'aquatiques'.

J'ai voulu le site assez simple et conventionnel étant donné la masse importante de texte qu'il contient.
J'ai choisis des pages php, afin d'inclure un fichier unique pour le footer.
La boite à onglets des caractéristiques est un tabs() de jquery avec un fondu de transition.
Les 'call-out' (citations de Camping car magazine) sont une technique css que j'avais trouvé dans le livre de Michael Bowers.
Les trois fourgons dans le header ont été pris lundi y a 15 jours dans un pré avec un ciel gris... viva Photoshop....

J'ai un bug avec Opéra que je ne comprends pas: dans la page d'accueil (seulement) le menu se colle au header...
Modifié par lionel_css3 (19 Nov 2011 - 09:55)

Saloute,

Au niveau du design je n'accroche pas du tout, d'autant plus que la premier chose que je vois quand j'arrive sur la page c'est le mot évasion. Ça aurait été bien de te baser sur ce mot pour le design. Cependant je pense qu'il est pertinent (ton design) par rapport à ton public cible.

Graphiquement parlant il y a des incohérences a mon avis, au survol de ton menu une bordure verte apparait, pourquoi ? c'est la seul fois où tu utilises du vert dans tout le site, à la limite du bleu plus foncé pourquoi pas mais pas du vert.

Tu utilises à mon sens trop de polices différentes, la page fait un peu fouillis car comme tu l'as dis il y a pas mal de contenu, le nombre de police renforce ce sentiment. Il y en a quatre en tout, plus celle des logos partenaires.

Au niveau du footer chez moi (FF 7 sous mac) c'est l'apocalypse rien n'est aligné, certain contenu passe en dessous des images. D'ailleurs c'est la même chose pour les pages « Le goeland », « Le vent du large » et « Le grand large ». Les textes se montent les un sur les autres c'est illisibles et ça ne fait vraiment pas sérieux.

Sémantiquement parlant pourquoi ne pas avoir mis les images de tes h2 dans l'html vu que celle-ci sont porteuse de sens, avec un attribut alt spécifiant le texte ça aurait été parfait.

Sur la page coordonné pourquoi ne pas avoir utilisé google map ? c'est interactif, facile à intégrer et plus agréable à utiliser pour l'utilisateur, d'ailleurs ça s'utilise c'est déjà bien, ton image elle, ne s'utilise pas. D'ailleurs personnellement j'aurais appelé cette page contact et j'y aurais mis un formulaire de contact plus peut être un mailto. Car ton lien de contact se cache dans le fouillis du footer et n'est pas très explicite en plus. En plus c'est du flash pour un lien contact c'est la première fois que je vois ça ... pourquoi faire simple quand on peut faire compliqué ? lol

Au niveau du contenu c'est dommage que tu n'as pas scindé le tout. Franchement la première page c'est une des plus importante car c'est cette page qui va donner la première impression à l'internaute. Moi quand je vois autant de contenu ça me donne juste envie de fuir, je me demande si quelqu'un le lira en entier un jour ? Alors qu'une petite présentation vite fait, et pourquoi pas un petit résumé des rubriques est tellement plus sobre et invite plus à la découverte du site. Ici tu balances la sauce direct.

Un truc qui fait pas mal fuir aussi c'est dans ta page comparatif, déjà la charge cognitive de ton tableaux doit être conséquente, mais alors si tu met des sous tableaux dans le tableau ça devient carrément trop rébarbatif. Il faudrait avoir une réflexion à ce niveau pour mieux présenter le contenu, car oui c'est tout un art la présentation du contenu ^^.

Ce qui serait pas mal aussi c'est de rendre ta bannière cliquable et qui pointerait vers ta page d'accueil, il faut tabler sur la cohérence externe, tel est mon nindo ^^ !

En espérant t'avoir fourni quelques pistes.

A bientôt !

bonjour, et merci pour ta contribution.

Gili a écrit :

Saloute,
Au niveau du design je n'accroche pas du tout, d'autant plus que la premier chose que je vois quand j'arrive sur la page c'est le mot évasion. Ça aurait été bien de te baser sur ce mot pour le design. Cependant je pense qu'il est pertinent (ton design) par rapport à ton public cible.

je comprends pas ce que tu veux dire... Evasion 24, c'est la raison sociale du client... c'est la moindre des choses que l'on voit cela en premier..

Gili a écrit :

Graphiquement parlant il y a des incohérences a mon avis, au survol de ton menu une bordure verte apparait, pourquoi ? c'est la seul fois où tu utilises du vert dans tout le site, à la limite du bleu plus foncé pourquoi pas mais pas du vert.

ah oui, c'est vrai, j'ai oublié de le modifier, c'est un menu dont j'ai recyclé le style.... autant pour moi.. de là à parler d'incohérence...

Gili a écrit :

Tu utilises à mon sens trop de polices différentes, la page fait un peu fouillis car comme tu l'as dis il y a pas mal de contenu, le nombre de police renforce ce sentiment. Il y en a quatre en tout, plus celle des logos partenaires.

là je suis pas d'accord, je n'en utilise que deux; amaze (qui est utilisé à l'origine par le client) et Verdana. Les autres sont décoratives... à ce moment là tu n'aurais qu'à compter les polices de Peugeot, Fiat, Citroën et Renault

Gili a écrit :

Au niveau du footer chez moi (FF 7 sous mac) c'est l'apocalypse rien n'est aligné, certain contenu passe en dessous des images. D'ailleurs c'est la même chose pour les pages « Le goeland », « Le vent du large » et « Le grand large ». Les textes se montent les un sur les autres c'est illisibles et ça ne fait vraiment pas sérieux.

Ah oui c'est vrai, j'avais oublié, y a des gens qui ont des macs ... mais là j'ai pas de solution, j'ai pas de mac, et ça s'affiche bien partout ailleurs..... là je sais pas quoi faire... tu pourrais poster une copie d'écran??

Gili a écrit :

Sémantiquement parlant pourquoi ne pas avoir mis les images de tes h2 dans l'html vu que celle-ci sont porteuse de sens, avec un attribut alt spécifiant le texte ça aurait été parfait.

ben j'ai utilisé des h2 avec image de substitution, pour moi y a pas mieux, si tu affiches la page sans le css, le sens sémantique est respecté.

Gili a écrit :

Sur la page coordonné pourquoi ne pas avoir utilisé google map ?

Parce que ...

Gili a écrit :

En plus c'est du flash pour un lien contact c'est la première fois que je vois ça ... pourquoi faire simple quand on peut faire compliqué ? lol

faire simple, c'est mettre l'email en clair pour se faire spammer?
en plus le genre de clientèle ciblée aura plutôt tendance à téléphoner qu'à envoyer un e-mail

Gili a écrit :

Moi quand je vois autant de contenu ça me donne juste envie de fuir, je me demande si quelqu'un le lira en entier un jour ? Alors qu'une petite présentation vite fait, et pourquoi pas un petit résumé des rubriques est tellement plus sobre et invite plus à la découverte du site. Ici tu balances la sauce direct.

et encore tiens toi bien, le document original du client était 2 fois plus long, j'ai condensé au maximum, ceci dit, y a pas non plus 20 pages de texte... et puis un site vide où il n'y a rien à lire, moi ça ne m'intéresse pas.
Celui qui est intéressé par un camping car, il lira...

Gili a écrit :

Un truc qui fait pas mal fuir aussi c'est dans ta page comparatif, déjà la charge cognitive de ton tableaux doit être conséquente, mais alors si tu met des sous tableaux dans le tableau ça devient carrément trop rébarbatif. Il faudrait avoir une réflexion à ce niveau pour mieux présenter le contenu, car oui c'est tout un art la présentation du contenu ^^.

là je ne suis absolument pas d'accord avec toi, je trouve ce tableau très bien et même le client qui ne voulait pas du comparatif au début était tout content à la fin... (j'ai bien fait d'insister..)

Gili a écrit :

Ce qui serait pas mal aussi c'est de rendre ta bannière cliquable et qui pointerait vers ta page d'accueil, il faut tabler sur la cohérence externe, tel est mon nindo ^^ !

pour quoi faire, il y a un bouton accueil... même deux


Merci d'avoir pris le temps de me donner ton ressenti, tu me soulèves un problème avec le Mac que je ne sais pas trop comment résoudre.. toi tu ne l'as pas vu sur un PC donc???

Gili a écrit :
Saloute,
Au niveau du footer chez moi (FF 7 sous mac) c'est l'apocalypse rien n'est aligné, certain contenu passe en dessous des images. D'ailleurs c'est la même chose pour les pages « Le goeland », « Le vent du large » et « Le grand large ». Les textes se montent les un sur les autres c'est illisibles et ça ne fait vraiment pas sérieux.

ça me fout les boules cette histoire de Mac..

est ce qu'il existe un site sur lequel on peut simuler l'affichage d'une page en choisissant le navigateur et l'OS?
J'avais vu ça une fois sur un bouquin mais je n'arrive plus à le retrouver....

De rien, avec plaisir

lionel_css3 a écrit :
je comprends pas ce que tu veux dire... Evasion 24, c'est la raison sociale du client... c'est la moindre des choses que l'on voit cela en premier..

Evidement qu'il faut que ce soit la première chose que l'ont voit, ce que je voulais dire c'est que c'est le mot évasion que l'ont voit en premier, pourtant le site ne m'évade pas du tout, je voulais dire que graphiquement ça aurait été bien de jouer sur le nom de la société.

lionel_css3 a écrit :
ah oui, c'est vrai, j'ai oublié de le modifier, c'est un menu dont j'ai recyclé le style.... autant pour moi.. de là à parler d'incohérence...

Oui ca s'appel bien une incohérence graphique enfin on vas pas pinailler ^^

lionel_css3 a écrit :
là je suis pas d'accord, je n'en utilise que deux; amaze (qui est utilisé à l'origine par le client) et Verdana. Les autres sont décoratives... à ce moment là tu n'aurais qu'à compter les polices de Peugeot, Fiat, Citroën et Renault

Une linéal pour le contenu, une script pour les titres, une autre script pour la page « Le vent du large » (pourquoi ne pas avoir utilisé la même ?). Mais je te l'accorde il n'y en a que 3 différentes, mais avec les images c'est dur de juger.

lionel_css3 a écrit :
Ah oui c'est vrai, j'avais oublié, y a des gens qui ont des macs ... mais là j'ai pas de solution, j'ai pas de mac, et ça s'affiche bien partout ailleurs..... là je sais pas quoi faire... tu pourrais poster une copie d'écran??

Je suis plus sur mon mac en ce moment mais il semblerait que le problème soit en rapport avec firefox car là je suis sur un autre mac mais sous chrome et ca fonctionne bien. Mais dès que je rentre chez moi je te fais un petit screen ^^

lionel_css3 a écrit :
ben j'ai utilisé des h2 avec image de substitution, pour moi y a pas mieux, si tu affiches la page sans le css, le sens sémantique est respecté.

Oui tu as raison la sémantique est respecté, mais ça ne change rien au fait que les images porteuses de sens doivent se trouver dans l'html. Enfin maintenant tu en fais ce que t'en veux

lionel_css3 a écrit :
faire simple, c'est mettre l'email en clair pour se faire spammer?
en plus le genre de clientèle ciblée aura plutôt tendance à téléphoner qu'à envoyer un e-mail

Benh non mais mettre simplement un formulaire de contact comme dans 95% des sites actuels, c'est clair qu'il ne faut pas mettre l'email en clair d'ailleurs si tu me relis je n'ai pas parlé de ça.

lionel_css3 a écrit :
et encore tiens toi bien, le document original du client était 2 fois plus long, j'ai condensé au maximum, ceci dit, y a pas non plus 20 pages de texte... et puis un site vide où il n'y a rien à lire, moi ça ne m'intéresse pas.
Celui qui est intéressé par un camping car, il lira...

Carrément qu'un site vide c'est nul, mais mettre en avant le contenu de façon intelligente ça ne veut pas dire que le site doit être vide. Et puis que toi ca ne t'intéresse pas je veux bien comprendre mais c'est au client qu'il faut pensé.

lionel_css3 a écrit :
là je ne suis absolument pas d'accord avec toi, je trouve ce tableau très bien et même le client qui ne voulait pas du comparatif au début était tout content à la fin... (j'ai bien fait d'insister..)

C'est un gros tableau avec des sous tableaux, bon si tu trouves que TOI ca te vas ok mais sache juste qu'en terme d'ergonomie c'est pas ce qu'il y a de mieux. Moi personnellement quand je conçois un site web je me base sur des livres ou sur des sources fiable, toi tu me dis que tu le trouve très bien, il y a déjà un problème dans cette démarche. Je ne peux que te conseiller l'excellent livre d'Amélie Boucher qui pour ma part, à changer ma façon de concevoir des interfaces web.

lionel_css3 a écrit :
pour quoi faire, il y a un bouton accueil... même deux

Je pense que tu te centre trop sur ton jugement. Ergonomiquement parlant c'est mieux de proposer plusieurs chemin de navigation. Sur tout les sites actuel le logo est cliquable et pointe vers la page d'accueil. Tu peux ignoré ce fait, mais sache juste que ca s'appel la cohérence externe, et que plus tu tablera sur cette cohérence plus tes utilisateurs se sentirons alaise avec ton interface car c'est des systèmes d'interactions qu'ils leurs sont familier.

A bientot

Gili...

Au sujet de 'Evasion', le thème du client c'est une ambiance marine, et puis une belle plage de sable fin, si ça n'évoque pas l'évasion, je rentre dans les ordres

Pour les polices, en général on considère les logos comme des éléments graphiques.. et c'est vrai tu as raison, il y a une 3ème police dans les bandeau supérieur de chaque page véhicule (à droite du schéma d’implantation), mais bon..

a écrit :

Oui tu as raison la sémantique est respecté, mais ça ne change rien au fait que les images porteuses de sens doivent se trouver dans l'html. Enfin maintenant tu en fais ce que t'en veux

mais le contenu de ces images h2 est le même que le contenu de la balise h2 !!

<h2 id="h2-presentation" class="h2-deco">Pr&eacute;sentation</h2>

Le formulaire, y a le pour et le contre, là mon bouton mail il est dans toutes les pages....
et dans un formulaire c'est compliqué pour mettre des pièces jointes..

Pour la quantité de texte, comme je t'ai dit, j'ai condensé le texte du client (d'ailleurs les trois documents originaux sont téléchargeables sur le site).
Alors imagine si je n'avais pas utilisé un tabs() Jquery ..... pour organiser.

Le tableau comparatif, c'est un bonus, on considère que les gens ont lu avant les descriptions individuelles des camping car. Il est long mais il n'a que 3 colonnes...

Le logo cliquable, j'y ai pensé. En fait il fait partie de l'image de fond, mais ça c'est pas méchant à modifier et le site n'est en ligne que depuis à peine 48H.. c'est aussi maintenant que je peux remarquer ces petits détails là.

Rien n'est jamais parfait du premier coup....

Le livre d’Amélie Boucher, je l'ai, je ne l'ai même pas fini.... c'est un peu trop dilué à mon gout... par exemple 4 pages de considérations métaphysiques pour dire que le titre d'un contenu doit être situé à proximité dudit contenu, bon...on peut faire plus direct.

Ce qui me préoccupe le plus c'est le problème potentiel sous Mac...
J'ai réduis pas mal de bugs avec les autres navigateurs sur PC, mais avec le Mac, je suis plus emmerdé..
Modifié par lionel_css3 (19 Nov 2011 - 18:59)

Gili ???

juste comme ça.... sur ton Mac où ça s'affiche mal, tu n'aurais pas modifié la taille de la police dans le navigateur par hasard??

lionel_css3 a écrit :

Oui tu as raison la sémantique est respecté, mais ça ne change rien au fait que les images porteuses de sens doivent se trouver dans l'html. Enfin maintenant tu en fais ce que t'en veux

mais le contenu de ces images h2 est le même que le contenu de la balise h2 !!

<h2 id="h2-presentation" class="h2-deco">Présentation</h2>

Essaie en désactivant les images SANS désactiver le CSS (avec Web Developer), tu verras pourquoi.
Sache qu'en plus qu'on n'est pas à l'abri d'un serveur qui déconne, certains semi-voyants utilisent une configuration qui utilise un contraste élevé et qui désactive les images de fond. Donc si l'image de fond ne s'affiche pas pendant que les propriété CSS autres que celles des couleurs et fonds restent actives, tes textes vont rester cachés ! De plus, c'est proscrit par Google !

Un peu de lecture : http://www.alsacreations.com/astuce/lire/62-balise-ltimggt-ou-feuille-de-style-css.html
Et un cas véridique : http://www.phpbb.com/community/viewtopic.php?f=64&t=2122341

lionel_css3 a écrit :
Au sujet de 'Evasion', le thème du client c'est une ambiance marine, et puis une belle plage de sable fin, si ça n'évoque pas l'évasion, je rentre dans les ordres biggrin

Tu as tout a fait raison, je m'étais enfermer sur la masse de contenu. j'étais un peu dans le cake hier

Sinon effectivement j'ai changé la police de base de mon browser (Gill sans miam miam) et je l'ai mis à 18px mais il me semble que ta feuille de style doit écraser mes personnalisations ?

Voilà le screenshots :


Modifié par Gili (20 Nov 2011 - 10:45)

Bonjour,

pour le problème avec OS X, s'il s'agit de lignes de texte avec pas assez d'espace horizontal et posant problème sous OS X, j'ai découvert grâce à ma participation aux RMLL de cette année que c'était encore pire avec Firefox sous Ubuntu ... Tu peux installer relativement facilement Ubuntu avec VMWare sous Windows et c'est gratuit.

La capture d'écran qui précède me fait penser (sans avoir regardé le code source, je me trompe peut-être) à un height fixé sur un bloc : jamais de height, ça empêche entre autres de zoomer le texte (Firefox: Affichage/Zoom/Zoom texte seulement). Et aussi de modifier plus tard le texte sans changer cette hauteur. La propriété min-height est le remplaçant n°1 et encore, seulement s'il le faut (non en fait le remplaçant n°1, c'est le background prévu pour être extensible avec couleur de fond)

edit: je parle difficilement français ce midi, je simplifie mes phrases ...
Modifié par Felipe (20 Nov 2011 - 12:01)

Felipe a écrit :
Bonjour,
La propriété min-height est le remplaçant n°1 et encore, seulement s'il le faut (non en fait le remplaçant n°1, c'est le background prévu pour être extensible avec couleur de fond)

Felipe et Gili.....

effectivement j'avais mis une hauteur fixe à la boite tabs() de Jquery, sinon l'affichage 'sautait' à chaque changement d'onglet.
j'ai remplacé par la propriété min-height et ça ne devrait plus le faire, tu peux vérifier Gili?

merci pour la suggestion Felipe, il est vrai qu'à force d'essayer de faire des sites qui passaient sous IE6, j'avais oublié l'existence de min-height et min-width

IshimaruChiaki a écrit :

De plus, c'est proscrit par Google !

Je comprends mal..... tu veux dire que Google quand il lit le code html il va chercher dans le css pour voir si le texte d'un h2 est indenté??


Pour les images, c'est un choix assumé: ce site là n'est pas prévu pour être vu sans les images.

lionel_css3 a écrit :


Je comprends mal..... tu veux dire que Google quand il lit le code html il va chercher dans le css pour voir si le texte d'un h2 est indenté??


Pour les images, c'est un choix assumé: ce site là n'est pas prévu pour être vu sans les images.

Je parle du fait de mettre les images porteuses de contenu en fond avec le CSS et de cacher les textes, au lieu de tout simplement utiliser la balise <img /> avec la balise alt="" !

Salut Gili,

lionel_css3 a écrit :
Je comprends mal..... tu veux dire que Google quand il lit le code html il va chercher dans le css pour voir si le texte d'un h2 est indenté??

Et bien pourquoi pas ?
S'il sait reconnaitre un texte de la même couleur que le fond, du display:none ou du visibility:hidden pour te mettre en sandbox, je vois pas ce qui l'empêcherais de traquer l'abus de text-indent. Et bien sûr qu'il lit ton code CSS…

Pourquoi ne mets tu donc pas tes images porteuses de contenus dans le contenu ?! C'est pourtant la logique même : image portant du contenu = balise <img /> (sauf exceptions). Et les images de fond en CSS, c'est pour les éléments de décoration (sauf exceptions, et alors on a un alt vide).
Modifié par audrasjb (21 Nov 2011 - 08:10)

audrasjb a écrit :
Salut Gili,
Pourquoi ne mets tu donc pas tes images porteuses de contenus dans le contenu ?! C'est pourtant la logique même : image portant du contenu = balise &lt;img /&gt; (sauf exceptions).

parce que l'image remplace (à l'affichage) le contenu du h2!

si je mets le h2 et l'image à la suite, ça n'a plus aucun sens.

et si je mets le text-indent dans le javascript, il va le trouver, ausi?

audrasjb a écrit :
je ne vois pas ce qui l'empêcherait de traquer l'abus de text-indent. Et bien sûr qu'il lit ton code CSS…

tu ne vois pas, certes, mais tu as des sources à citer?

en tout cas je viens de tester certains sites que j'avais développés en utilisant cette technique avec cet outil

http://www.ranks.fr/fr/outil-google-sandbox

et apparemment tout va bien.....

et puis il ne faut pas oublier que la sandbox de google semble avoir été créée pour lutter contre le spam...

et que pensez vous de cette technique (Gilder/Levin method) ?

<h2><span></span>Mon titre</h2>

utilisé avec le css suivant

h2  {
width:200px;
height:100px;
position:relative;
}


h2 span  {
background:url(mon-fichier.jpg);
position:absolute;
width:100%;
height:100%;
}

l'image, qui devra avoir un fond opaque, se superpose au texte.

Mais cette fois Google va t-il me casser les noix parce que j'ai mis un span vide????

Si le texte est plus large que l'image, ça coupe ! Même la technique la plus fancy ne peut pas remplacer la bonne vieille balise <img /> avec un attribut alt="" pertinent ! Google indexe le contenu de ces attributs, donc inutile d'user de techniques black hat de SEO !

Mais as-tu au moins lu le lien "Balise <img /> ou feuille de style CSS" que j'avais posté plus haut ?
Même certains sites d'accessibilité proscrivent l'insertion par CSS pour les images porteuses de sens ! http://accessibiliteweb.com/fr/accessibilite/conseils/perceptibilite/equivalents-textuels-1-1/contenus-non-textuels/

Et rien n'interdit d'insérer une balise <img /> dans une balise de titre, c'est valide !

Tu peux faire ça :

<h1><img src="banniere.png" alt="Mon super site" /></h1>

Ou même ça :

<h1><a href="index.php"><img src="banniere.png" alt="Mon super site"></a></h1>

dans le cas du header avec lien de retour vers l'index.
Modifié par IshimaruChiaki (21 Nov 2011 - 22:06)

IshimaruChiaki a écrit :

Et rien n'interdit d'insérer une balise <img /> dans une balise de titre, c'est valide !

ah bon?

mais faire une balise h1 ou h2 ... h6 sans aucun texte dedans c'est valide ça?

si c'est la cas, et alors ça va m'arranger, pourquoi certains se sont tracassé pour mettre au point des techniques d'images de substitution?

IshimaruChiaki a écrit :
Si le texte est plus large que l'image, ça coupe !

ça c'est pas un problème, je suis capable de faire des images à la taille voulue....