3246 sujets

Critiques de vos sites: code et design

Www.campinglesfloralies.com

Pages :
Bonjour

Je te conseille tout d'abord de vérifier la validité de ton code HTML et de corriger les erreurs présentes. Ton code manque de rigueur (en XHTML les nom de tag doivent être en minuscule et il faut faire attention à l'ordre d'ouverture et fermeture des tags (<p><span></span></p> et non <p><span></p></span>)

L'abus de CSS peut aussi être dangereux pour la santé de ton site. Si on les désactive, tout ce qui reste sur la page est :
a écrit :
*
Installé au cœur de la Provence sur la commune de Montauroux,
à deux pas du lac de Saint-Cassien et à 30 minutes des plages
de Cannes ou Saint-Raphaël. Le camping des floralies vous
accueille dans une ambiance familiale et décontractée...


Sur un fond bleu qui devrait d'ailleurs être blanc
<body bgcolor="#A7C3D8">

Est invalide en XHTML, la couleur de fond peut être définie en CSS via l'attribut background (ou background-color pour être plus spécifique).

Les images porteuse de contenu tel que les éléments de menu ou titres doivent ABSOLUMENT être présentes dans le HTML avec des textes alternatifs cohérents et porteurs de la même information.
Merci Yasashii

Pour l'ordre des balises je pensais avoir fait comme tu dis. Pourrais-tu me dire à quel endroit il y a une erreur?

Je comprends pourquoi tu veux me prévenir au sujet du CSS abusif mais un lien est pourtant accessible... non?
Modifié par campinglesfloralies (28 Oct 2008 - 07:32)
campinglesfloralies a écrit :
Pour l'ordre des balises je pensais avoir fait comme tu dis. Pourrais-tu me dire à quel endroit il y a une erreur?


Utilise le validateur du W3C : http://validator.w3.org/ il sera plus précis que moi.

campinglesfloralies a écrit :
Je comprends pourquoi tu veux me prévenir au sujet du CSS abusif mais un lien est pourtant accessible... non?


Dans ton cas ABSOLUMENT PAS ^^; Un lien sans texte n'est rien. Si tu utilise des images pour faire des liens, ce sont ces images qui doivent être dans les balises <a> sinon tu à des liens vides qui n'apparaitront pas sur la page si les CSS ou images sont désactivés.
Modérateur
Bonjour

campinglesfloralies a écrit :
Bon, j'imagine que tu as du regarder très vite. pô grave et merci quand même.


Que veux-tu dire par là?

Si tu veux constater la problématique avec ton site, je t'invite fortement à installer le navigateur Firefox et la Web Developer Toolbar.

Tu pourras ensuite Désactiver les CSS, puis les images, pour constater le grave problème d'accessibilité de ton site. Cet outil est un incontournable pour le développement Web. Smiley cligne
Merci Tony Monast de t'occuper de mon cas, je m'explique alors.

C'est vrai, les images n'ont pas les habituelles balises alt ou title, c'est un choix.

Toutefois je suis sensible aux problèmes d'accessibilité, c'est pourquoi chaque page contient un véritable accesskey (si je n'ai pas fait d'erreur)qui renvoie vers une page entièrement parametrable et contenant toutes les informations du site sans image. Cette page sera au fil du temps améliorée et contiendra également une version audio (j'ai essayé des logiciels qui transforment le texte en audio, de la rigolade... je ferai mon possible pour offir une écoute crédible par d'autres moyens)

Je ne dis pas que j'ai réussi, mais je fais de mon mieux.

Histoire de lancer une polémique qui m'intéresse, je pense que certaines obligations des standards XTHML sont inutiles et conduisent à une standardisation que je trouve parfois étrange.

Par exemple, plus haut on me dit que les tags doivent être absolument en majuscules pour être acceptés par le validateur, quelle importance... A moins que pour faire du web il faille devenir un mouton qui fait comme on lui dit et qui ne se pose pas de question.

...A moins qu'il y ait une véritable raison que je suis tout à fait disposé à comprendre...
Ah oui, un autre truc, j'ai installé firefox, google...

Post précédent: Je voulais dire minuscules, vous l'auriez compris...
Modifié par campinglesfloralies (28 Oct 2008 - 21:39)
Modérateur
campinglesfloralies a écrit :

C'est vrai, les images n'ont pas les habituelles balises alt ou title, c'est un choix.


Le grand problème de ton site actuel est qu'il est impossible de naviguer sans les images et/ou sans les CSS. Je t'invite à faire l'essai. S'il s'agit d'un choix, il s'agit d'un mauvais choix. J'insiste fortement pour que tu change ton menu en utilisant un code similaire au suivant :


<ul>
<li><a href="accueil.htm"><img src="btnAccueil.png" alt="Accueil" /></a></li>
<li><a href="locations.htm"><img src="btnLocations.png" alt="Locations" /></a></li>
</ul>


De cette façon, avec ou sans image, avec ou sans CSS, il est très facile de naviguer dans ton site. Si tu as décidé de faire ton menu autrement, sans image entre la balise <a> et des images de fond en CSS, j'imagine que c'est pour te faciliter la vie pour les effets de hover. J'ai un script qui permet de faire le hover très facilement en Javascript. Je peux te le montrer si cela t'intéresse.

Si tu es sensible aux problèmes d'accessibilité, je crois que tu devrais vraiment songer à refaire ton menu convenablement.

campinglesfloralies a écrit :

Par exemple, plus haut on me dit que les tags doivent être absolument en miniscules pour être acceptés par le validateur, quelle importance... A moins que pour faire du web il faille devenir un mouton qui fait comme on lui dit et qui ne se pose pas de question.


Écrire le code de façon conforme n'a rien à voir avec le fait d'être un mouton. Je t'invite à lire cet article sur les avantages des standards. Ce n'est pas en écrivant les balises comme ça : <TaBlE> que ça rend le codeur plus original pour autant. Smiley cligne Il y a d'autres moyens de se démarquer. Puis si chaque codeur n'en faisait qu'à sa tête, ce serait très difficile de s'y retrouver. Pour prendre un exemple très terre-à-terre, le français possède ses règles, ses normes, ses standards, pour que tout le monde se comprenne. sI Je M'exPRimAis AINsi, jE SuIS CONvaInCU Qu'À La loNGue tU AuRAiS dU mAL à ME liRE. Ceci n'est qu'un exemple parmi d'autres, le français regorge de règles qui facilitent la compréhension entre les individus.

En programmation, il y a souvent des normes (écrites et non-écrites) que les programmeurs suivent afin d'améliorer la lisibilité de leur code et faciliter la reprise du projet par d'autres programmeurs. Je pense notamment à l'indentation du code, l'utilisation d'un standard pour nommer les fonctions, les variables, les noms de table de base de données, etc...

Le XHTML est très strict. Il est basé sur le XML qui lui est sensible à la casse (majuscules et minuscules), c'est donc pourquoi les balises et attributs doivent être en minuscules. Bref, pour le XHTML, <p> est différent de <P>, ce qui n'est pas le cas pour le HTML de grand-mère. Puis ce n'est pas le seul langage qui est sensible à la casse. Il en existe plusieurs autres. J'imagine qu'à la base, c'est pour une question de rapidité de traitement (ne pas avoir à rechercher plusieurs formats du même mot) et aussi pour une question de constance dans le code (les mêmes fonctions, les mêmes codes toujours écris de la même façon, d'un fichier à l'autre). Il y a sans doute d'autres raisons plus techniques, mais je manque de temps en ce moment pour approfondir le sujet.
Modifié par Tony Monast (29 Oct 2008 - 02:04)
campinglesfloralies a écrit :
Merci Tony Monast de t'occuper de mon cas, je m'explique alors.

C'est vrai, les images n'ont pas les habituelles balises alt ou title, c'est un choix.

Toutefois je suis sensible aux problèmes d'accessibilité, c'est pourquoi chaque page contient un véritable accesskey (si je n'ai pas fait d'erreur)qui renvoie vers une page entièrement parametrable et contenant toutes les informations du site sans image. Cette page sera au fil du temps améliorée et contiendra également une version audio (j'ai essayé des logiciels qui transforment le texte en audio, de la rigolade... je ferai mon possible pour offir une écoute crédible par d'autres moyens)

Je ne dis pas que j'ai réussi, mais je fais de mon mieux.

Histoire de lancer une polémique qui m'intéresse, je pense que certaines obligations des standards XTHML sont inutiles et conduisent à une standardisation que je trouve parfois étrange.

Par exemple, plus haut on me dit que les tags doivent être absolument en majuscules pour être acceptés par le validateur, quelle importance... A moins que pour faire du web il faille devenir un mouton qui fait comme on lui dit et qui ne se pose pas de question.

...A moins qu'il y ait une véritable raison que je suis tout à fait disposé à comprendre...


Waou tous ces gens qui réfléchissent et pour qui faire des sites web est un métier auraient donc tous tort? Je l'savais.
campinglesfloralies a écrit :
Bon, j'imagine que tu as du regarder très vite. pô grave et merci quand même.


Effectivement, j'ai fais une évaluation rapide du site, en mettant en avant les problèmes principaux selon moi (après, on aura tous des critères différents). Pour moi l'accessibilité c'est primordial et ton site ne l'est absolument pas. TU parle de polémique "sur-standardisation", je peux faire de même avec ton "véritable accesskey" (rien que la dénomination...). Je ne suis pas pour les accesskey, je ne suis pas non plus pour proposer une version audio sur une page perdue au fin fond d'un site alors que les personnes qui nécessitent cette version audio ont généralement les outils pour transformer une page standard et bien construite en "son".

Si tu veux réellement implémenté une solution d'accessibilité à ton site, commence par faire des pages standard, mais surtout, renseigne toi un peu plus sur le sujet.
Programmeur ce n'est pas mon métier et pourtant j'ai fait l'effort de prendre du temps pour me renseigner sur l'accessibilité, un bon professeur aurait dit que c'est déjà ça...

Yasasshi

Je comprends ton point de vue mais pourquoi mon accesskey ne fonctionne pas? C'est une raison technique? (sans parler du parti pris)
Modifié par campinglesfloralies (29 Oct 2008 - 07:41)
Modérateur
campinglesfloralies a écrit :
Programmeur ce n'est pas mon métier et pourtant j'ai fait l'effort de prendre du temps pour me renseigner sur l'accessibilité, un bon professeur aurait dit que c'est déjà ça...


Je ne suis pas professeur non plus! Smiley cligne

Plus sérieusement, il n'est pas nécessaire d'être programmeur pour suivre les conseils pertinents qui te sont donné ici. Après tout, si tu es ici, c'est pour recevoir des conseils et recommandations de gens expérimentés dont le métier et/ou la passion est le développement Web, n'est-ce pas?

Tel que je te l'avais proposé, as-tu essayé de naviguer dans ton site sans CSS et sans image, grâce à la Web Developer Toolbar de Firefox? As-tu conscience de la problématique? J'aimerais que tu me répondre à ce propos.

L'idée des standards et du respect de l'accessibilité est aussi d'éviter d'avoir plusieurs versions d'un même contenu. Dans ton cas, tu as été obligé de créer une "Version accessible" de ton site qui reprend sensiblement le même contenu que la version normale. Si à la base tu mettais en place nos recommandations, tu aurais pu te passer allégrement de cette "Version accessible". De plus, le problème avec ces versions multiples est au point vue de la maintenance. Dès que tu met à jour une page dans la version normale, tu dois penser à le faire également dans la "Version accessible". Au fil du temps, le danger est que les deux versions ne soient pas identiques, que l'une ou l'autre présente une information dépassée.

La question à 100$ maintenant. Pourquoi tiens-tu absolument à conserver ton menu en image de fond (<a> vide)? Quel est ton intérêt? Quel avantage y retire-tu?

À bientôt!
Modérateur
Bonjour,

Un autre problème d'accessibilité de ton site. Lorsque je désactive mon Javascript et que je me rend à l'adresse : http://www.campinglesfloralies.com , il ne se passe rien. Je reste coinçé sur la page de préchargement. Tu devrais éliminer cette page de préchargement. Elle est à mon humble avis complètement inutile.

Les visiteurs sont souvent pressés et ne prennent pas le temps de lire. Ce fut mon cas et j'ai cru, l'espace d'un instant, que ton site était complètement innaccessible sans Javascript, alors que ce n'est pas le cas grâce au lien que tu as mis sur le message "Veuillez patienter [...]". Ce lien est toutefois très discret, difficile à repérer.

À la limite, si tu tiens vraiment à cette page de préchargement qui je le repète me semble inutile, je t'invite à mettre un lien avec un intitulé évident comme "Entrez" ou "Entrez ici". Un lien qui ressort du reste.

Je suis tout de même ouvert à entendre tes arguments à propos de cette page de préchargement, et aussi sur ton menu.
Modérateur
Un dernier point qui n'a pas de lien avec l'accessibilité, mais plutôt avec le référencement.

J'ai remarqué que tu as mis des mots clés sur cette page de préchargement. Le texte est blanc sur fond blanc, donc invisible aux visiteurs mais visible pour les moteurs de recherche. Je te met en garde sur cette pratique car les moteurs de recherche comme Google peuvent pénaliser les sites qui utilisent cette technique. Par pénaliser, cela peut aller jusqu'au retrait de ton site de son index. Informe-toi sur les forums de référencement pour obtenir l'avis d'un expert dans ce domaine.
Modifié par Tony Monast (29 Oct 2008 - 15:46)
Bonjour Tony Monast

Oui j'ai conscience de ce que donne la navigation sans CSS.
Histoire de montrer que je ne suis pas totalement ignare dans ce domaine voici l'ébauche d'un autre site que j'avais vaguement commencé:

http://www.campinglesfloralies.com/exemple/

En revanche, l'argument maintenance est pertinent, merci.

Pour la page d'index je reconnais que ce n'est pas le top mais en attendant mieux elle nourrira les moteurs et tant pis pour les dangers (si tu regardes de plus près tu verras que les risques ne sont pas si gros)

C'est vrai, le lien pour entrer dans le site est discret mais les internautes habituels ne désactivent pas le javascript et cette petite ligne focalise l'attention pour faire patienter 2 petites secondes (pendant ce temps la page suivante se place dans le cache), évidemment tu vas me dire qu'il y a d'autres moyens, moi j'aime bien celui là!
Les doués du web qui désactivent le javascript savent comment faire et il y a un accesskey.

a écrit :
Je ne suis pas professeur non plus!


Mais vous donnez des leçons Smiley rolleyes

Amicalement.
Ah oui au fait la question à 100$

Le site est fait à 80% d'images, je ne vois pas l'intérêt d'ennuyer quelqu'un handicapé visuellement à tourner les pages pour y trouver une phrase ou deux seulement.

C'est pour cela que j'ai préféré regrouper la totalité des information sous forme de texte parametrable sur une seule page.

Je te file mes coordonnées paypal? Smiley biggrin
Modérateur
campinglesfloralies a écrit :

Oui j'ai conscience de ce que donne la navigation sans CSS.


et sans image aussi. La problématique de la navigation sans image s'applique aussi au site que tu avais vaguement commencé.

campinglesfloralies a écrit :

En revanche, l'argument maintenance est pertinent, merci.


J'ai peur de trop insister, mais l'argument de la navigation sans image, sans CSS ou sans Javascript est également pertinent. Ce que je trouve dommage, c'est que tu semble avoir beaucoup de bonnes intentions à propos de l'accessibilité, mais j'ai l'impression que tu en oubli l'essentiel, c'est-à-dire pouvoir accéder à un site sans dépendre des images et/ou des CSS et/ou de Javascript. Tu investis de l'énergie pour rendre ton site accessible (version audio à venir, version accessible, accesskey), mais j'ai le sentiment que tu investis cet énergie au mauvais endroit. Si ton menu était réalisé de façon accessible, tu n'aurais pas besoin de cette "Version accessible" de ton contenu. Pour ce qui est de faire une version audio du site, les logiciels de lecteurs d'écran sont conçu pour ça. Si ton site est accessible et bien codé, les lecteurs d'écran seront en mesure de transformer ton site en audio. Tu n'auras donc pas à maintenir à jour la version audio. Après tout, l'argument de la maintenance s'applique aussi à la version audio que tu voudrais offrir.

Je ne comprend toujours pas pourquoi tu ne veux pas démordre de ton menu? Pourquoi ne veux-tu pas changer de technique pour ton menu? Le seul avantage avec ta technique est qu'il est facile de gérer les hover en CSS (ce qui peut être reproduit facilement en Javascript) ; tandis que la méthode que je te propose n'a que des avantages : accessible sans image et sans css.



campinglesfloralies a écrit :

Pour la page d'index je reconnais que ce n'est pas le top mais en attendant mieux elle nourrira les moteurs et tant pis pour les dangers (si tu regardes de plus près tu verras que les risques ne sont pas si gros)


C'est juste que cette technique de texte blanc sur fond blanc est connue de Google. Il est évident que le but est de cacher le texte aux visiteurs, et d'attirer les moteurs. Si tu considère que le risque en vaut le coup, c'est toi qui voit! Je n'insiste pas davantage.


campinglesfloralies a écrit :

C'est vrai, le lien pour entrer dans le site est discret mais les internautes habituels ne désactivent pas le javascript


Je t'invite à lire l'article Pourquoi certains n'activent pas le Javascript. Pour ma part, je me dis que si un seul visiteur désactive son Javascript et bloque à la page d'entrée d'un site, c'est un visiteur, voir un client potentiel de perdu. En plus, le correctif serait très facile à mettre en place.

campinglesfloralies a écrit :

et cette petite ligne focalise l'attention pour faire patienter 2 petites secondes (pendant ce temps la page suivante se place dans le cache), évidemment tu vas me dire qu'il y a d'autres moyens, moi j'aime bien celui là!


Je me questionne seulement sur la pertinence d'avoir une page de préchargement. Le site me semble plutôt léger, alors quel intérêt de précharger les images? Je t'avouerai que j'ai rarement vu des sites HTML/CSS avec un préchargement comme page d'entrée.

campinglesfloralies a écrit :

Les doués du web qui désactivent le javascript savent comment faire et il y a un accesskey.


Personnellement, je n'utilise jamais les Accesskey. Mettre des accesskey ne pardonne pas toutes les erreurs de conception.

campinglesfloralies a écrit :

Je ne suis pas professeur non plus!


Mais vous donnez des leçons Smiley rolleyes


Smiley biggrin Bien vu! Sache toutefois que mon intention n'est pas de te faire la morale ou te donner des leçons, mais simplement de faire des recommandations pertinentes. À toi de voir si tu veux t'entêter à ne pas les suivres. Smiley cligne

Puis je le demande une dernière fois avant d'abandonner le navire. Pourquoi tiens-tu absolument à ta technique actuelle de menu? (<a> vide et images en CSS)

En conclusion, si tu ne souhaite rien changé du tout, malgré les recommandations que j'ai fais, je préfère m'arrêter là. J'ai dis tout ce que j'avais à dire. Je vais laisser les autres membres essayer de ton convaincre, si c'est possible...

Amicalement aussi et bonne continuation.
a écrit :
La problématique de la navigation sans image s'applique aussi au site que tu avais vaguement commencé

C'est peut-être à partir de là que tu peux réussir à me convaincre, peux-tu m'expliquer pourquoi cette problématique?
Pages :
Sujet clos
Aller à