Monteberiot.com, avis et conseils SVP

Salut,

Le graphisme c'est pas trop mon truc mais dans le genre j'aime bien sauf les menus à droite, je trouve le gris de fond trop foncé et la police pour le texte courant AMHA peu lisible. Je n'aurais pas mis non plus de sous-menu déroulant mais plutôt une page (par exemple) regroupant les 3 vins.

shumisha a écrit :

Je suis preneur de vos conseils avisés en matière de CSS, car j'ai été obligé de mettre pas mal de javascript pour corriger des differences d'apparence entre IE et FF, et peut être que l'on peut faire en CSS pur ?

Ben oui on peut le faire en CSS, mais comme tu as mis du code avant le doctype (enlève ton adresse email si tu ne veux pas être spammé) IE passe en mode quirk et calcule les dimensions des éléments différemment.

shumisha a écrit :
Notamment, comme c'est un layout centré en largeur fixe, et qu'il y a des élements fixes, il y a des ascenseurs dans certaines parties de la page et pas dans d'autres, et IE prend en compte la largeur de ces ascenseurs pour centrer la page, ce que j'ai été obligé de compenser en javascript.

Très mauvaise idée. Tu aurais mieux fait de suivre les tutoriels sur ce site avant de mettre des scripts partout.

Sinon je mettrais plus de hiérarchie avec des titres (h1, h2, etc), des paragraphes (<p>), etc. Bref, un peu plus de sémantique. Les tableaux pour la mise en page n'étaient pas nécessaires, tu pouvais facilement t'en passer.

Bonne continuation.

Bonjour,

et merci d'avoir pris le temps d'y regarder !
Effectivement, la lisibilité m'interpelle, et encore je viens d'augmenter un peu la taille, avant c'était pire. Je pensais être arrivé à un bon compromis

Pour les autres questions, c'est un peu plus compliqué qu'il n'y paraît.

D'abord, l'aspect sémantique et la mise en page par des tables : le gabarit de page, fait par moi, ne comporte pas de tables. Uniquement des div, flottantes ou fixes suivant les cas. Le "remplissage", le texte, les news, etc, c'est fait automatiquement par Joomla, et je n'ai que peu de contrôle dessus. C'est lui qui génère ces tables à l'intérieur de mes div. Il existe une version dite "accessible", mais c'est un fork et cela peut poser problème avec certains composants tiers, donc requiert beaucoup de test avant d'être mis en production.

Pour ce qui est du javascript, la façon dont IE calcule les dimensions des objets ne pose pas de problème. Là où c'est nécessaire, une feuille de style adaptée incluse par un <![if IE] prend en compte les différences.

Les deux problèmes que je n'ai pas réussi à résoudre sans passer par javascript sont liés au fait que j'ai des parties fixes sur la page (position: fixed dans FF, gros bazard dans FF - crois moi, j'y ai passé du temps sur les tutos, y compris ceux d'Alsacreations!)

Problème 1 : comme indiqué plus haut : tout le layout est centré. Les élements non fixes (corps du document) peuvent être plus long que la page, donc un ascenseur apparait automatiquement. Les éléments fixes (menu, news sur le côté, fil d'ariane en bas sur toutes les pages sauf accueil) par contre n'ont jamais besoin d'ascenseur. Comme IE prend en compte la largeur de l'ascenseur pour faire le centrage, le corps de page est centré differemment des éléments fixes (il est décalé vers la gauche).

Problème 2 : là le pb est visible dans FF. Le corps de la page est contenu dans un div qui a un fond blanc. La longueur de cette div doit être telle qu'elle se raccorde exactement avec le haut de la div du fil d'ariane. Cela se fait tout seul si le contenu est plus long que l'espace entre le menu du haut et la fil d'ariane en bas de la page, mais si le contenu est plus court, alors FF ne veut pas étendre cette div tout seul. A noter que je ne peux pas utiliser de truc genre min-height 100%: cela ne marche pas car l'élément parent du corps de texte n'est pas le bon

Cela dit, la javascript ça marche bien dans ce cas, mais c'est vrai qu'une solution pure CSS serait plus sympa

Salut,

Je trouve ça simple, sobre et efficace.

Je reproche les deux cadres à coins arrondis qui n'ont rien à voir avec le reste. Il pourraient être carrés çà serait mieux.

Il me gène qu'il n'y ait pas de majuscule au début des liens, et en l'absence de séparateurs clairement identifiables par l'oeil, c'est quand même le meilleur moyen pour l'oeil d'accrocher le début des liens et les parcourir rapidement.

En terme d'ergonomie, il y a une énorme aberration à corriger absolument concernant le menu déroulant. Il est très pénible à utiliser, surtout pour les liens "information" (au pluriel ça serait mieux d'ailleurs non ?) et "contact". Lors du survol d'un de ces deux liens, on doit faire une gymnastique adroite pour descendre dans la deuxième barre horizontale, avant d'aller à gauche sur le menu concerné.
Pour quelqu'un qui maîtrise parfaitement sa main c'est pas gênant, quoi que pénible, car on ne peux pas aller en diagonale sous peine de réveiller un autre sous menu, ce qui ralentit la navigation.
La solution est un sous menu vertical sous le lien concerné, ou en restant dans une version horizontale, que les liens de sous menu s'affichent au moins au niveau du lien concerné.

Bon sinon, toute la mise en forme du texte me semble à revoir.
C'est moche à lire, pardon du terme. La police utilisée, la mise en forme, la couleur quasi uniforme et austère...
Une typo plus simple, tout à la même taille mais avec des éléments en gras si nécessaire... Et surtout un peu de couleur. Je trouverai pas mal de réutiliser la couleur du lien de page active dans le contenu textuel.

Effectivement, je n'ai eu aucun retour sur ces problèmes de saccades. C'est bizarre, cela fait pourtant 3-4 mois que sa version de base est en ligne, et de nombreuses personnes des forums joomlafrance et joomla "monde" l'ont visité. Je n'ai pas de systèmes linux à ma disposition pour vérifier. L'affichage est fluide sous windows avec IE/FF, même sur des vieux Pentium III 800mhz.
Est-ce que d'autres personnes ayant la même config. peuvent me dire si elles rencontrent le même problème de saccade ?
Modifié par shumisha (25 Jan 2007 - 10:25)

Salut,

J'ai pas véritablement de saccades, mais j'ai juste trouvé hier que la page était un peu longue à charger. Et effectivement, quand je regarde d'un peu plus près :

a écrit :
Document Size - http://www.monteberiot.com/
Documents (1 file) 21 kb
Images (9 files) 71 kb
Style Sheets (8 files) 30 kb
Scripts (6 files) 43 kb
Total 165 kb

Ca fait beaucoup pour une site qui est aussi simple visuellement. Je pense que tu gagnerai à alléger tes scripts qui à mon avis semblent inutiles.

Autre chose, j'ai vu çà hier mais j'ai oublié de le dire : Le défilement du contenu sur la page d'accueil fait qu'on voit la photo de la page d'accueil à travers la bannière lorsqu'on descend vers le bas de la page... C'est pas terrible.
Modifié par Mikachu (25 Jan 2007 - 11:32)

Malheureusement les scripts sont indispensables. Le plus gros est celui des slideshows, qui occupe 28Ko à lui-tout seul, avec les librairies moo.fx et prototypelite.js (je ne voulais pas de slideshow en flash, donc j'utilise un module en javascript).
Je peux le réduire un peux je pense, mais son plus gros inconvénient est de ne pas charger les images à la volée, en ajax; Elles sont chargées toutes au début, ce qui fait que le poids le plus important (sur la page d'accueil) est 71Ko pour les images.
Le transformer pour passer à l'ajax est un très gros travail, peut-être que quelqu'un fera un module de ce type pour Joomla, mais pour l'instant il n'y en pas (le mien est GPL bien sur).

Pour le défilement au travers du header, c'est voulu bien sur. Cela plait pas mal à un certain nombre de gens, dont les propriétaires....

Pour info, je suis en train de revoir le javascript qui gère le menu, afin de d'ajuster la position du sous-menu et de le placer sous l'élement de menu principal auquel il se rapporte...

Oui, effectivement c'est une question de référentiel, y compris pour ce qu'on appelle l'information. Dans ce cas de figure, ce sont les webdesigners anglo-saxons, et nord-américains en particulier qui m'ont réclamé ces photos (sur les forums sur lesquels j'ai demandé quelques avis, de la même manière qu'ici), afin de jouer sur le côté Frenchie, "rentrer dans la maison des viticulteurs". Bien entendu, il était prévu d'en mettre dés le départ, mais cela nous a orienté pour mettre les photos choisies, plus que des photos de bouteilles, de verres de vins ou similaire.
Le script fait 28Ko, il fait tourner 3 photos sur la page d'accueil, quelques autres sur les autres pages, je suis conscient qu'il faut optimiser le temps de chargement (y compris peut-être réduire à nouveau la taille des images), mais je ne crois pas que l'on augmenterait l'attractivé du site en supprimant les photos!

Je suppose que c'est toujours un compromis : 28Ko de plus, mais pas besoin de scroller. Ou alors il faut mettre des vues réduites et la version "normale" en popup (voire en lightbox, mais alors là c'est carrément plus lourd!). C'est ce que je fait dans le blog.
Allez on verra demain !