3244 sujets

Critiques de vos sites: code et design

[Intermédiaire] www.handilabel-conseil.fr

Pages :
Merci à Mikachu pour la suggestion d'ouvrir un deuxième fil pour ce deuxième site que je soumets à vos regards experts... Smiley cligne

Vous l'avez peut-être lu sur cet autre fil, je me suis récemment lancé à mon compte dans le domaine de la rédaction et de la conception multimédia "de bas niveau".

Et comme une aventure ne se lance jamais seul, ma femme, handicapée et au chômage depuis 8 ans, a elle aussi lancé son activité dans le conseil aux entreprises en politique de handicap.

Voici l'URL du site que je lui ai fait rapidement : www.handilabel-conseil.fr
Je suis déjà conscient d'un certain nombre de lacunes / bugs (genre pas encore de META keywords et description...), mais j'apprécierai grandement votre coup d'oeil et votre avis.

Fond, forme : lâchez-vous, je suis ouvert à toutes les critiques et tous les commentaires, pourvu qu'ils soient constructifs !

Merci d'avance,

David
Salut,

La page d'accueil du site a mis du temps à se charger.

Il manque des bribes à ton doctype, dont la syntaxe exacte est la suivante, pour mémoire :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Même motif, même punition pour la valeur de l'attribut xmlns :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">

Cela t'évitera les erreurs constatées par le validateur du W3C (à vérifier aussi sur les autres pages).

En ce qui concerne la méta keywords, tu peux l'enlever : les moteurs de recherche n'en tiennent plus compte. Quant à la méta Content-Language, tu peux supprimer l'attribut name="language" : l'attribut http-equiv suffit dans ce cas-là.

Vu que le site en question parle de handicap, j'ai plusieurs remarques concernant l'accessibilité.

Lorsque les images sont désactivées et que les CSS sont prises en charge, je n'ai plus le logo du site et le texte « Handilabel Conseil | Une Politique Handicap Globale® au service de la performance » n'est pas visible. Le mieux est d'insérer le logo dans un élément img :
<h1><a href="/"><img src="/images/logo.gif" alt="Handilabel Conseil | Une Politique Handicap Globale® au service de la performance" width="200" height="98" /></a></h1>

Lorsque JavaScript est activé, il serait mieux d'expliciter les loupes et leur rôle d'affichage / masquage du texte, en affichant ces loupes dans un élément img (et non en arrière-plan) et en ajoutant un alt (au niveau d'img) et un title (au niveau du lien) comportant un texte de type « Afficher / masquer les détails pour Santé, sécurité, bien-être », par exemple.

Quant au titre de section « Vous avez des besoins spécifiques ? », je le mettrais en h2.

Quant aux liens d'évitement, évite de les mettre en display : none : les lecteurs d'écran n'y auront pas accès.

Quand je navigue au clavier, je ne sais pas quel lien reçoit le focus lorsque j'appuie sur la touche de tabulation, parce que tu as mis un outline: none. Autrement dit, la bordure affichée avec outline est une aide précieuse pour se repérer dans le dédale des liens lorsqu'on a une vue suffisante et qu'on ne peut se servir d'une souris.
Modifié par Victor BRITO (06 Mar 2010 - 16:03)
Merci Victor pour tous ces conseils.

Je pense avoir corrigé l'ensemble des points que tu avais (très justement, merci à toi) identifiés.
J'espère n'avoir rien oublié, et avoir fait les choses "comme il faut" : n'hésite pas à me faire signe si ce n'est pas le cas Smiley cligne

Et si d'autres veulent bien me donner leur avis, ce sera avec plaisir... Merci d'avance !

Juste une question subsidiaire : les URL type http://www.handilabel-conseil.fr/la-demarche-handilabel-conseil.html sont-elles suffisamment "SEO friendly", où devrais-je les réécrire en http://www.handilabel-conseil.fr/la-demarche-handilabel-conseil (sans l'extension de fichier), ou en http://www.handilabel-conseil.fr/la-demarche-handilabel-conseil/ (sans l'extension et avec un slash) ?
Si oui, quelle est la syntaxe de la règle à intégrer au .htaccess ? J'en ai essayé plusieurs dénichées ça et là, mais je n'arrive à en faire fonctionner aucune (sans parler du fait qu'il faudra que je modifie tous mes liens internes) Smiley confus
Voici le contenu actuel de mon fichier .htaccess :
# Activer URL Rewriting
Options +FollowSymLinks
RewriteEngine On
RewriteBase /

# Rediriger le site sans www vers le site avec www pour éviter le duplicate content
RewriteCond %{HTTP_HOST} ^handilabel-conseil.fr$
RewriteRule ^(.*)  http://www.handilabel-conseil.fr/$  [QSA,L,R=301]

# Supprimer les extensions.html
#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteCond %{REQUEST_FILENAME}\.html -f
#RewriteRule ^([^/]+)/$ $1.html

# Interdire l'affichage des répertoires sans index
Options -Indexes

# Page d'erreurs personnalisées
ErrorDocument 404 /erreurs/403.html
ErrorDocument 404 /erreurs/404.html

# Lancer directement les téléchargements sans confirmation
AddType application/octet-stream .pdf
AddType application/octet-stream .zip

# Forcer la mise en cache pour accélérer l'affichage
FileETag MTime Size
ExpiresActive on
ExpiresDefault "access plus 86400 seconds"

# Désactiver la navigation à travers les répertoires
Options All -Indexes
Bonjour,

Je viens d'arriver sur ce forum (d'ailleurs je suis friande de vos retour, voir mon sujet:) )

Pour ce qui est de votre site (je suis infographiste ce sera donc un avis sur l'ergonomie et l'esthétisme dont je vais faire part) je dirais:

ERGONOMIE
Le contenu d'information est assez clair, les infos principales sont toutes sur la même page et les textes sont concis. Bien que la phrase d'accroche en gris clair soit ments (sujet/objet) un peu trop longue, elle serait plus percutante avec une forme plus succinte.
Le logo et la photo de la page d'accueil ça fait carré et pro.

En navigation je trouve que le lien gris prette à confusion (il est de la meme couleur que la phrase d'accroche, alors qu'il ne représente pas le m^me type d'info) et il attérit un peu comme un cheveu au milieu de la soupe, cassant quelque peu le rythme de navigation. En effet, son contenu se trouve en fait dans le menu "démarche". Du coup c'est un peu redondant et désarçonnant. C'est dommage la page d'accuil est si claire au départ:)
Pour y remédier je vous conseillerais de valoriser le menu, par une couleur autre que gris clair, ou encore une calligraphie en majuscule, à moins que les petites barres bleues intéractives aient une couleur plus chaude, pour plus d'impact visuel.
Aussi, comme il s'agit de conseil en matière de personnes et de spécificités au handicap, je remplacerais certaines photos, certes graphiques mais froides, pour des images illustrant des gens en conversation, des sourires, des bureaux (lieu de travail et d'échange), pour mettre en lumière le coté humain du sujet que vous abordez et qui constitue la préoccupation de votre activité professionnelle.
Il est vrai que le bleu est une couleur "rassurante", c'est la couleur de l'eau, du ciel, de la terre, de laa sérénité et de la cérébralité. Mais c'est froid! Certes le conseil est une information objective, mais ici il est lié aux relations humaines et à leur gestion. Pourquoi ne pas ajouter un soupçon de sympathie la dedans (du fushia ou encore du orange, une teinte chaleureuse)

Voila pour mon point de vue
Victor BRITO a écrit :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">


Salut, je ne sais plus pour quelle raison mais j'avais finis par ne plus être convaincu que le -FR était nécessaire. A-t-il une réelle utilité?

Désolé pour cette petite aparté.
Je m'excuse d'avance de ce petit "up", mais j'ai deux choses à vous demander :
- des utilisateurs d'IE 6 ou 7 pourraient-ils me donner leur feedback ?
- quelqu'un(e) aurait-il la réponse à ma question concernant l'URL rewriting ?

D'avance merci...
Bonjour,
davidgmmartin a écrit :
des utilisateurs d'IE 6 ou 7 pourraient-ils me donner leur feedback ?
C'est un peu la pagaille sous IE6, le menu n'est partiellement plus stylé (et j'avoue ne pas voir d'où vient le problème), il y a des blancs, et la sidebar est repoussée en fin de page. Il va falloir sortir les commentaires conditionnels Smiley cligne
Bon, après quelques heures de bataille, je pense que je suis parvenu à un résultat plus qu'honorable sous IE6... Smiley langue
Laurie-Anne, peux-tu me le confirmer (ou quelqu'un d'autre) ?

Sinon, toujours personne pour mon souci d'URL Rewriting via htaccess ? Smiley confus

Merci à tous !
Bonsoir,

davidgmmartin a écrit :
après quelques heures de bataille, je pense que je suis parvenu à un résultat plus qu'honorable sous IE6... Smiley langue

Effectivement, c'est plus qu'honorable.
Il y a bien quelques "erreurs" d'affichage mais globalement c'est très bien.
Peu de professionnels en font autant Smiley cligne

Testé sous Windows Xp / IE6.
Modifié par Ericf (11 Mar 2010 - 01:13)
Salut,
davidgmmartin a écrit :
Sinon, toujours personne pour mon souci d'URL Rewriting via htaccess ? Smiley confus

En ce qui concerne les trois types d'URL que tu mentionnes, ils sont tous « SEO-friendly ».

Pour ta réécriture d'URL, peux-tu nous dire de quoi tu pars ? De fichiers HTML statiques ? d'un seul fichier PHP utilisant un paramètre d'URL pour afficher telle ou telle page ? Si tes pages sont des fichiers HTML statiques (par exemple un fichier formations.html), tu n'as pas besoin d'URL rewriting.
Effectivement, je pars pour le moment de fichiers HTML statiques type formations.html : l'URL rewriting (pour retirer le ".html") n'est pas nécessaire, dis-tu ? Smiley confused
davidgmmartin a écrit :
Effectivement, je pars pour le moment de fichiers HTML statiques type formations.html : l'URL rewriting (pour retirer le ".html") n'est pas nécessaire, dis-tu ? Smiley confused

Il n'est pas nécessaire.
Victor BRITO a écrit :

Il n'est pas nécessaire.

Je le note, et je m'en félicite... et je te remercie. Smiley biggrin
En fait j'imaginais le mettre en oeuvre pour faciliter la mémorisation des URL - une chose on ne peut plus dispensable...
Je me permets donc de te poser la question quand même, au cas où : si je tenais vraiment à supprimer les extensions dans les URL, quelle serait la marche à suivre et la syntaxe à adopter (histoire d'apprendre quelque chose) ?

FranZz a écrit :
Salut,

Le carractère "|" en haut à gauche sert-il à quelque chose? Smiley eek

upload/14508-barre.jpg

Du tout, merci de me l'avoir signalé (une balise title incorrecte sur la page d'accueil), c'est corrigé. Smiley cligne
davidgmmartin a écrit :
Je me permets donc de te poser la question quand même, au cas où : si je tenais vraiment à supprimer les extensions dans les URL, quelle serait la marche à suivre et la syntaxe à adopter (histoire d'apprendre quelque chose) ?

Si tu pars de tes fichiers HTML statiques et que tu souhaites juste supprimer l'extension, tu ajoutes la règle de réécriture suivante dans ton .htaccess :
RewriteEngine on
Options +FollowSymlinks
RewriteBase /
RewriteRule ^([-a-z]+)$ /$1.html [L]

Et si tu veux remplacer l'extension .html par un /, voici la variante :
RewriteEngine on
Options +FollowSymlinks
RewriteBase /
RewriteRule ^([-a-z]+)/$ /$1.html [L]

Cela dit, comme je te l'ai donné à entendre, la réécriture d'URL concerne surtout les URLs avec paramètres. Par exemple, partons d'un fichier index.php utilisant le paramètre d'URL page pour afficher telle ou telle page ; on aura la réécriture d'URL suivante, par exemple :
RewriteEngine on
Options +FollowSymlinks
RewriteBase /
RewriteRule ^([-a-z]+)$ /?page=$1 [L]

Une variante avec un / à la fin de l'URL réécrite.
RewriteEngine on
Options +FollowSymlinks
RewriteBase /
RewriteRule ^([-a-z]+)/$ /?page=$1 [L]

Une autre variante qui consiste à donner l'illusion qu'on a des pages HTML statiques (ce qui revient à faire ce que tu fais déjà avec tes fichiers HTML statiques).
RewriteEngine on
Options +FollowSymlinks
RewriteBase /
RewriteRule ^([-a-z]+)\.html$ /?page=$1 [L]
Ericf a écrit :
Il y a bien quelques "erreurs" d'affichage mais globalement c'est très bien.
Peu de professionnels en font autant Smiley cligne

D'abord, merci pour les compliments Smiley confused

Juste, parce que je suis perfectionniste - et que, s'agissant du site de ma femme, j'aimerais qu'il soit (aussi) parfait (que possible) -, peux-tu me dire quelles sont les erreurs d'affichage que tu rencontres encore ?

Merci !
Bon, obnubilé par le rendu sous IE6, je n'avais même pas pris la peine de vérifier que c'était toujours bon sur les autres navigateurs... Et... Ben c'est plus bon du tout Smiley decu

Sur www.handilabel-conseil.fr/index.html :
- j'ai intégré une CSS IE 6 et une CSS IE 7 pour régler certains bugs d'affichage
- étant donné qu'ils sont incompatibles avec ces versions, j'ai tenté de cacher au moyen de commentaires conditionnels <!--[if lte IE 7]>...<![endif]--> les éléments javascript liés au menu LavaLamp et à l'accordéon
Résultat des courses : l'affichage est OK (mes CSS spécifiques fonctionnent donc), mais mes commentaires conditionnels ne sont reconnus par aucune des deux versions, les javascript sont donc chargé et... ça plante Smiley biggol
Voici la portion de code concernée :
<!--[if lte IE 7]>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#menu").lavaLamp({
			fx: "backout",
			speed: 700,
		});
	});
	$(document).ready(function() {
		$("#menu li:has(a)").click(function() {
			window.location = $("a:first",this).attr("href");
		});
	});
</script>
<![endif]-->
<!-- Accordéon -->
<!--[if lte IE 7]>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript"> 
	jQuery().ready(function(){
		jQuery('#services').accordion({
			header: 'h3',
			autoheight: false,
			alwaysOpen: false,
			active: '.current'
		});
	});
</script>
<![endif]-->

Quelqu'un(e) peut-il me dire pourquoi ces commentaires conditionnels (qui ont pourtant la même syntaxe que ceux intégrés pour les CSS spécifiques (et qui eux, fonctionnent !), ne sont pas reconnus / interprétés correctement ? Une grossière erreur de ma part, une subtilité qui m'échappe ?

En outre (tant qu'à faire), l'intégration de ces commentaires conditionnels qui ne sont pas interprétés par IE 6/7 fait que mes autres navigateurs (FF 2.0.0.20, Safari 4.0.4, IE 8.0.6) ne chargent plus non plus les javascript du menu et de l'accordéon (re- Smiley biggol )...
La preuve : si je supprime les commentaires conditionnels (www.handilabel-conseil.fr/index2.html), ça remarche sous ces autres navigateurs Smiley eek

Si une bonne âme pouvait m'aider, là j'avoue que j'ai essayé des dizaines de trucs ces dernières heures, sans trouver la solution... Et je ne peux me résoudre à sacrifier IE 6/7 pour les autres navigateurs - mais je ne voudrais pas devoir faire l'inverse non plus...

A L'AIDE, M'SIEURS-DAMES Smiley sweatdrop
J'oublais : j'ai aussi visiblement un souci avec l'encodage des caractères sur FF 2 : "é" devient "é", etc.
Pourtant je suis en UTF-8 et ça marche sous tous les autres navigateurs... Smiley ohwell
Pages :
Sujet clos
Aller à