[Inter] www.lesvoutes.com, vos commentaires svp

Salut

suite à un premier message ou je demandais de l'aide pour transformer un vieux site à base de tableaux en css, je vous soumet aujourd'hui mon travail.

Il ne s'agit pour l'instant que de la page index (le reste suivra), mais avant d'aller plus loin j'aimerais avoir vos remarques, critiques et suggestions, histoire de ne pas aller dans le mur.

http://www.lesvoutes.com

Merci d'avance
Modifié par Derby (18 Jan 2011 - 18:48)

Bonjour,

Merci d'éditer ton message afin d'ajouter dans son titre le nom de ton site ou son URL, comme cela est demandé dans les règles spécifiques de ce salon.

Bonjour, ma première réaction c'est de dire qu'il y a beaucoup d'informations dans un espace restreint. J'avais l'impression que mes yeux ne savaient pas où se poser. Bref, aérer ou mieux disposer la présentation du contenu aiderait sûrement.

Je trouve le fond rouge agressant mais c'est une remarque personnelle.

Pour le code, vite dit puisque je n'ai pas analysé en détail ce qui m'a sauté aux yeux c'est le manque d'utilisation de la balise <p> et les balises <br> inutiles. Avec l'utilisation de la balise <p>, il est possible d'utiliser des marges dans la feuille de styles css pour séparer les paragraphes d'où l'inutilité des <br>.

Aussi l'utilisation des titres est à améliorée.
Bien construire sa hiérarchie de titres

première chose: centrer le contenu
deuxième chose: aérer

code: un ch'tit problème au niveau des guillemets dans la description <META NAME="description" CONTENT="Hôtel Ardèche, l'auberge "Les Voûtes" un petit hôtel pas cher en Ardèche - 43€00 la 1/2 pension soit 280€ la semaine tout compris" />

sinon bcp de propriétés de styles qui pourraient être dans ton fichier css au lieu d'être définies à chaque fois

Sinon j'aime bien

Bonjour,

Globalement la base n'est pas mauvaise mais voici les choses que je te suggère vivement d'améliorer (sans rentrer dans des détails trop techniques ou d'optimisation) :

Visuellement d'abords :
- Centrer ton site
- Ton menu ne ressort pas assez alors que c'est un élément primordial
- Globalement, tes textes et images sont beaucoup trop serrés, la lisibilité devient alors assez catastrophique (attention, les internautes ne lisent pas, et ton site contient vraiment beaucoup trop de textes, je te dis pas comme l'internaute doit être motivé pour aller lire tout ça... Si tu peux, va à l'essentiel et essai encore de réduire la longueur de tes textes).
- Il faut donc que tu aère et travaille plus tes contenus.

Côté technique :
- Ton code comporte des erreurs xhtml :http://validator.w3.org/
- Tu utilises des scripts Javascript pour ton menu... Ta technique d'affichage de ton menu est vraiment pas bonne... Si l'internaute a désactivé Javascript sur son navigateur, il lui sera absolument impossible de naviguer sur ton site car il est tout simplement invisible ! C'est vraiment dommage vu la simplicité de l'effet que tu souhaites sur ton menu (ça aurait été beaucoup plus simple et léger de le gérer uniquement en HTML+CSS)
- Pourquoi utilises tu des formulaires en Flash ??? Dans ton cas je ne vois vraiment pas l'intérêt et c'est vraiment pas top pour l'accessibilité. (par exemple sur l'accueil "inscrivez vous")

D'autres points techniques seraient encore à aborder mais je vais m'arrêter là... Fais surtout attention à tes syntaxes HTML comme as dit "Mabelle" et essai de baliser correctement tes contenus.

Après ces corrections, cela devrait être beaucoup mieux pour les internautes et les moteurs de recherche (même si pour ces derniers pleins d'autres points seraient à voir et améliorer).
Modifié par Spacedementia (18 Jan 2011 - 18:54)

Laurie-Anne

désolé pour l'oubli dans le titre

Mabelle

-merci pour ces remarques. Je vais essayer d'aérer.
-la couleur rouge c'est provisoire (fêtes de fin d'année)
-je vais aussi jeter un oeil dans le code histoire de remplacer les </br> par des <p>
-quand à la structure des titres (h1, h2...etc) je ne vais pas trop y toucher pour l'instant car celle-ci est voulue dans le cadre du référencement. Mais merci quand même pour le tuyau.

ozili

merci aussi mais

-j'ai pas trop envie de centreer le site car j'ai lu que c'est l'emplacement le plus porteur et le plus regardé par les visiteurs. Y a t il un avantage a centrer ?
-aérer semble en effet d'actualité car tu est le 2éme à le signaler.
-Guillemets corrigés ty
-je comprend s pas quand tu dit :

a écrit :
sinon bcp de propriétés de styles qui pourraient être dans ton fichier css au lieu d'être définies à chaque fois

-Sinon j'aime bien = la je comprends
merci
Modifié par Derby (18 Jan 2011 - 19:11)

Bonjour Spacedementia et merci a toi aussi de te pencher sur mon cas.

Spacedementia a écrit :

Globalement la base n'est pas mauvaise mais voici les choses que je te suggère vivement d'améliorer (sans rentrer dans des détails trop techniques ou d'optimisation)

Pour l'instant ce sera mieux en effet car je suis encore loin d'avoir tout assimiler du couple html/css
Mais par la suite je serais preneur de conseils plus technique.

Aspects visuels

Spacedementia a écrit :
Centrer ton site

je repose la même question que ci-dessus : Pourquoi ? Quel intérêt ? Quels avantages ?

Spacedementia a écrit :
Ton menu ne ressort pas assez alors que c'est un élément primordial

je suis en train de travailler dessus via les css mais je galère.

Spacedementia a écrit :
Globalement, tes textes et images sont beaucoup trop serrés, la lisibilité devient alors assez catastrophique (attention, les internautes ne lisent pas, et ton site contient vraiment beaucoup trop de textes, je te dis pas comme l'internaute doit être motivé pour aller lire tout ça... Si tu peux, va à l'essentiel et essai encore de réduire la longueur de tes textes).

Aérer, aérer, aérer, aérer...quoi

Spacedementia a écrit :
Il faut donc que tu travaille plus tes contenus.

tu veut dire par là du texte plus succinct?

Côté technique :

Spacedementia a écrit :
Ton code comporte des erreurs xhtml

sauf erreur de ma part les seules erreurs que j'ai trouvé lors d'une soumission au W3C étaient celles générées par le code flash pour l'animation slider. De fait je ne sais pas comment les corriger. Il faut savoir qu'au départ je suis venu sur le forum car mon site été uniquement à base de tableaux html et comportait il me semble plus de 300 erreurs au W3C.

Spacedementia a écrit :
Tu utilises des scripts Javascript pour ton menu... Ta technique d'affichage de ton menu est vraiment pas bonne... Si l'internaute a désactivé Javascript sur son navigateur, il lui sera absolument impossible de naviguer sur ton site car il est tout simplement invisible ! C'est vraiment dommage vu la simplicité de l'effet que tu souhaites sur ton menu (ça aurait été beaucoup plus simple et léger de le gérer uniquement en HTML+CSS)

la aussi il s'agit de "résidus" de l'ancien site, et pour l'instant je ne sais pas faire pareil en css. Mais je suis sur le tuto alacreation ici : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html

Spacedementia a écrit :
Pourquoi utilises tu des formulaires en Flash ??? Dans ton cas je ne vois vraiment pas l'intérêt et c'est vraiment pas top pour l'accessibilité. (par exemple sur l'accueil inscrivez vous)

je suis preneur d'un code ou d'un tuto en remplacement.

D'autres points techniques seraient encore à aborder mais je vais m'arrêter là... Fais surtout attention à tes syntaxes HTML comme as dit Mabelle et essai de baliser correctement tes contenus.

Spacedementia a écrit :
Après ces corrections, cela devrait être beaucoup mieux pour les internautes

Ca commence a faire en effet, mais c'etait mon but en postant ici.

Spacedementia a écrit :
les moteurs de recherche (même si pour ces derniers pleins d'autres points seraient à voir et améliorer)

Niveau moteur de recherche même si je sais que rien n'est figé et que l'on doit rebondir sans cesse, pour l'instant je suis super bien placé

encore merci et au plaisir de te lire
Modifié par Derby (18 Jan 2011 - 20:01)

a écrit :
-quand à la structure des titres (h1, h2...etc) je ne vais pas trop y toucher pour l'instant car celle-ci est voulue dans le cadre du référencement. Mais merci quand même pour le tuyau.

C'est mieux de s'y prendre dès maintenant ! Il est justement recommandé d'avoir une hiérarchie des titres correcte pour le référencement, et surtout pour l'accessibilité. Les lecteurs d'écran des non-voyants ont un dispositif qui liste les titres de sections présents dans la page et qui leur permettent de passer directement à un titre de section en particulier ! En mettant des titres de section, ça ne fera que faciliter leur navigation ! Ce n'est pas parce qu'un non-voyant ne voit pas qu'il ne voyage pas ! Au contraire, ceux qui sont impliqués dans les assos doivent souvent voyager pour assister aux événements et ils aiment bien ça être capable de se renseigner sans trop de problème sur les tarifs pour le choix d'une chambre d'hôtel !

As-tu déjà essayé de désactiver le style de ta page ? Si non, sous Firefox, va dans Affichage > Style de la page > Aucun style. Dis-moi ensuite si tu arrives à distinguer tes titres de tes paragraphes !

a écrit :
-j'ai pas trop envie de centreer le site car j'ai lu que c'est l'emplacement le plus porteur et le plus regardé par les visiteurs. Y a t il un avantage a centrer ?

Personnellement ça me fatigue car j'ai une résolution de 1280*1024 et la page fait à peine la moitié de la largeur de mon écran et dans ce cas, j'aime bien mieux quand c'est centré ! De plus, j'ai déjà même vu mon père baisser la résolution de son écran à 800*600 parce qu'à l'époque, les pages du site Globetrotter.net étaient alignés à gauche, et le vide à droite le fatiguait trop ! J'ose donc pas imaginer ceux qui ont un grand écran large qui fait 1900px de large !


Sinon, pour revenir aux menus en Javascript et les formulaires en Flash, je confirme que c'est un gros problème d'accessibilité !
Au sujet du Flash : http://www.siteduzero.com/forum-83-266201-p1-les-raisons-pour-ne-pas-faire-de-menus-en-flash.html
Quant au Javascript, il y a plus de personnes que tu ne le pourrais croire, qui désactivent Javascript (moi y compris) ou qui n'ont tout simplement pas la possibilité de l'exécuter ! Donc reposer le fonctionnement du menu entièrement sur Javascript est une très mauvaise idée ! Celui-ci ne doit être utilisé qu'en surcouche pour agrémenter l'ergonomie d'une page, et non en remplacement pur et simple d'un contenu HTML ! D'ailleurs, même avec JS activé, je ne suis même pas sûre si le menu est navigable au clavier, il faudra que je vérifie.
[EDIT] Je viens de tester, et je remarque qu'une fois que mon curseur entre dans le menu et que je parcours les liens, impossible de sortir de l'étage du menu par la suite, que j'utilise les flèches ou la tabulation ! Il faudra qu'un habitué de la navigation au clavier me confirme ce que je crois être un piège à clavier !

Un peu de lecture : http://forum.alsacreations.com/topic.php?fid=6&tid=39428&s=javascript
Modifié par IshimaruChiaki (18 Jan 2011 - 20:10)

Je viens de faire (après 3 heures de boulot comme un nul) un menu css, et encore celui-ci est largement inspiré du tuto alsacreation. C'est dire

Plus gros et plus visible que le précédent mais surtout en css au lieu du javascript
Modifié par Derby (02 Feb 2011 - 15:11)

je teste aussi le centrage mais ma balise div PA ne suit pas.

J'ai ajouter ça :

.global {
width: 750px;
margin-right: auto;
margin-left: auto;
}

#apDiv1 {
position: relative;
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}
Modifié par Derby (02 Feb 2011 - 15:12)

Ton header est de 730px et ton img de 750px voilà pourquoi elle dépasse.

Bonjour, Passe le width de ton header à 750px et enlève ton border-left et border-right.
Pour le reste je te répondrais dès que j'ai un peu plus de temps .

1-j'ai volontairement mis une couleur flashy sur le header pour voir qu'après la modif la balise PA est ok en largeur pas moyen de la faire passer sur le texte du haut.

2-finalement ça me plaid bien centrer, du coup je pense que je vais élargir un peu le tout et me servir d'un modèle de grilles style : http://960.gs/ - Quelle largeur me conseille vous ?
Modifié par Derby (19 Jan 2011 - 18:20)

Bonsoir,

Pour répondre à ta dernière question, la largeur max pour une résolution 1024 c'est environ 980px mais la "norme" se situe à 960px (dans ces dimensions, la plupart des internautes à partir d'une résolution 1024 pourront voir au moins un minimum l'arrière plan de ton site).

Pour le reste :
- Le centrage de l'interface, IshimaruChiaki a bien donner son avis dessus. Je suis tout à fait d'accord avec elle. L'avantage est donc surtout esthétique pour ton type d'interface. Maintenant si le design d'un site a vraiment été travaillé graphiquement pour être aligné à gauche, dans ce cas l'alignement à gauche est justifié.

a écrit :
a écrit :
-j'ai pas trop envie de centrer le site car j'ai lu que c'est l'emplacement le plus porteur et le plus regardé par les visiteurs. Y a t il un avantage a centrer ?

Pour revenir ça, je ne suis pas un expert mais effectivement je pense que la première zone qui est observée par l'internaute "occidental" est en général le coin supérieur gauche (c'est un réflex nous sommes habitués à la lecture lecture gauche-droite).
Mais ce positionnement se fait par rapport aux bords de ton interface dans le cas d'un site centré.

a écrit :
Spacedementia a écrit :
Il faut donc que tu travaille plus tes contenus.

tu veut dire par là du texte plus succinct?

Oui
Et éventuellement faire ressortir certains mots clés ou phrases. Utiliser des listes avec des points clés. Essayer de s'immerger à la place de votre cible client pour mettre en avant les informations dont il aurait besoin d'une façon rapide et clair.

a écrit :
sauf erreur de ma part les seules erreurs que j'ai trouvé lors d'une soumission au W3C étaient celles générées par le code flash

Effectivement la plupart de tes erreurs sont lié à ton mode d'appel du flash (tu peux régler ça en utilisant "swfobject" pour charger ton flash) mais il y a d'autres erreurs comme des balises fermés et non ouvertes, des "id" dupliqués...

a écrit :
je suis preneur d'un code ou d'un tuto en remplacement

Google est ton ami !

a écrit :
Ca commence a faire en effet, mais c'etait mon but en postant ici.

Modifié par Spacedementia (20 Jan 2011 - 19:26)

Spacedementia a écrit :
Pour le reste :
- Le centrage de l'interface, IshimaruChiaki a bien donner son avis dessus. Je suis tout à fait d'accord avec lui. L'avantage est donc surtout esthétique pour ton type d'interface. Maintenant si le design d'un site a vraiment été travaillé graphiquement pour être aligné à gauche, dans ce cas l'alignement à gauche est justifié.

Je suis une fille en passant... d'où le féminin dans ma citation sous mon pseudo, puis mon pingouin rose.

Oups ! Vraiment désolé, je n'ai pas fait attention. J'espère que tu me le pardonnera !
Je modifie mon post de suite !

Me voici de retour après une semaine d'absence pour raison professionnelles.

Sur vos bons conseils je vais partir sur un site centrer et plus léger plus aérer et plus agréable.

Avant d'aller plus loin voici une première ébauche (manque encore la partie base (footer..etc)
J'aimerais avoir vos avis, remarques, conseils...

h**p://10lem.free.fr

Questions :

Vaut il mieux utiliser comme je l'ai fait la une div "conteneur qui englobe les autres div pour les centrer ou centrer chaque div individuellement ?

Mon site étant super bien positionner sur google notamment, si je bascule en css, certes le code sera plus clean et répondra aux attentes des bots, mais cella ne risque t il pas d'influer sur min référencement/positionnement ?

Dans la même optique, serait il judicieux de mettre le même texte dans le nouveau site que dans l'ancien, tout en rendant celui-ci plus aérer ?


à suivre...
http://www.getsmile.com/emoticons/funny-smileys-68129/sunglasses2.gif
Modifié par Derby (02 Feb 2011 - 15:12)

Pour répondre à ta première question, je préfère mieux utiliser un div global qui contient tous les blocs de la page, cela me permet notamment de contrôler la largeur du site sans multiplier le recours à la propriété width qui est bien souvent source de problèmes, notamment quand on veut utiliser aussi des padding, ou encore les cas de figure où le corps se retrouve décalé en bas sous IE.

Par exemple, pour un site standard ayant un header, un menu horizontal, un menu latéral, un corps et un pied de page, l'utilisation d'un div global fait qu'on n'a besoin de la propriété width que pour le div global (la largeur de la page) et pour le menu latéral (qui est flottant et qui a le plus souvent besoin d'une largeur fixe). Tous les autres blocs utilisent le rendu par défaut (un div prend toute la largeur de son élément parent) et dans ce cas, il n'aura besoin que d'utiliser les marges pour pousser les bords, notamment pour le corps qui doit donner une place au menu latéral (menu flottant à gauche = margin-left plus grand que la largeur du menu).

Ça fait longtemps que j'utilise un div global et je n'ai plus eu de problèmes de débordements dans les blocs internes depuis ce temps-là, car cette méthode est beaucoup plus flexible.

[Modération : inutile de remettre le lien]

vos avis ?
Modifié par Laurie-Anne (31 Jan 2011 - 09:04)

Bonjour, il y a une amélioration c'est certain. Je n'ai pas le temps d'en dire plus pour le moment.