Refonte de page d'accueil

[20cent]

Bonjour à tous,

Ayant découvert les standards il y a peu de temps, je me suis lancé dans un petit exercice à titre personnel :

la refonte de la page d'accueil d'un site professionnel connu.

Je ne diffuse pas directement l'adresse de mon travail car je doute de la légalité de ma démarche () mais j'aimerais un maximum de retours sur le code afin de corriger mes erreurs au mieux et améliorer ma technique. Merci donc de mon contacter par message privé si vous désirez en savoir plus.

Merci mille fois d'avance aux courageux qui feront cette démarche.

Et pardon d'avance pour les erreurs de débutant que j'ai pus commettre.

EDIT : J'oubliais de préciser qu'il reste encore quelques tableaux utilisés à des fins de présentation. J'y vais petit à petit...

Nota : J'ai hésité à placer ce sujet dans la rubrique 'Accessibilité'. Mais ma question est plus généraliste je pense.

Modifié 27 Avril 2004 par 20cent

[Monique]

Bonjour 20cent,

Je suis repassée plusieurs fois d'une page à l'autre... avec l'impression de jouer au jeu des 7 erreurs

Le résultant est bluffant

La page résiste bien à l'augmentation de la taille de police.

Un point noir cependant, le texte des liens/boutons est une image... on ne peut donc l'agrandir à moins de disposer d'une fonction loupe.

Je n'ai pas passé le code au crible mais je profite de l'occasion pour attirer l'attention vers l'utilisation des commentaires conditionnels, notamment pour ceux qui souhaitent jouer sur les couleurs de l'ascenceur et garder leur code valide :

<!-- Conditional Comments hack -->
  <!--[if IE]>
 	 <style type="text/css">
    .encart
    {
   	 width: 100%;
    }
    #boutons li
    {
   	 margin-bottom:-3px;
    }
    body
    {
   	 scrollbar-face-color:#EEEEEE;
   	 scrollbar-shadow-color:#FFFFFF;
   	 scrollbar-highlight-color:#FFFFFF;
   	 scrollbar-3dlight-color:#F2732E;
   	 scrollbar-darkshadow-color:#F2732E;
   	 scrollbar-track-color:#DDDDDD;
   	 scrollbar-arrow-color:#F2732E;
    }
 	 </style>
  <![endif]-->

à placer dans l'en-tête.

[Denis]

Monique... je m'incline devant ta sagesse.

En ce moment même, je suis au bureau en train de faire une analyse de site à des fins de mise en conformité et tu viens tout juste de répondre sans le savoir à un truc qui me dérangeait. J'ai, dans le site dudit client, le même cas de figure que 20cent, c'est-à-dire des règles CSS pour un scrollbar qui invalident leur feuille de style. J'en étais à soupeser l'intérêt de relever le problème parce qu'il ne cause pas de réels torts aux autres agents utilisateurs et ta solution de commentaires conditionnels arrive juste à point pour me libérer de ma tourmente. En effet, je n,y avais pas du tout pensé, moi qui utilise déjà les CC dans plusieurs autres circonstances.

En les cantonnant ainsi, on parvient effectivement à tout conserver : le client est content car il gardera ses petites couleurs et moi je suis content parce que son document sera valide. C'est quand même beau la vie.

Il en irait de même pour toutes les autres règles propriétaires à MSIE en terme de CSS, pas simplement les différences de valeurs (comme pour contrôler le box model par exemple). Donc merci. C'est un bel exemple de l'intérêt des forums comme le Hub.

20cent, dès que j'ai un peu de temps, j'essaierai d'aller y faire un tour aussi. Mais à priori, c'est valide, c'est déjà un grand pas ! Reste à vérifier la sémantique des pages et l'organisation logique des éléments.

<chapeaudemoderateur>
Pour l'accessibilité, on poura y revenir, mais dans le forum approprié.;)
</chapeaudemoderateur>

[20cent]

Monique :

Merci pour ton retour tout d'abord.

Je suis tout à fait d'accord avec toi quand aux boutons qui ne s'adaptent pas, mais je me devais de respecter aux mieux les contraintes graphiques déjà imposées.

Je pourrais par contre peut-être définir leurs tailles en unités relatives ?

Denis :

Merci également.

Je suis heureux de voir que la technique que j'ai employée te plaise et t'aide.

J'attends avec impatience ton retour, j'espère que tu trouveras le temps.

En réponse à ta remarque sur l'accessibilité, que veux tu que je fasse ?

Je doute de l'intérêt de poster mon message dans les deux rubriques.

[Denis]

Je suis heureux de voir que la technique que j'ai employée te plaise et t'aide. En réponse à ta remarque sur l'accessibilité, que veux tu que je fasse ? Je doute de l'intérêt de poster mon message dans les deux rubriques.

Salut 20cent

Tout d'abord, même si cela revêt bien peu d'importance de le spécifier, je faisais mention de l'utilisation des commentaires conditionnels proposés par Monique dans ce contexte précis comme étant l'élément innovateur, pas le CSS propriétaire à MSIE pour habiller le scrolbar. Mais qu'importe, tu peux te sentir heureux quand même puisque tu livres un code conforme qui démontre clairement ton intérêt à bien faire ton boulot. C'est tout à ton honneur et ça donne envie de te filer un coup de main... ce que je serai en mesure de faire, je l'espère, ce soir.

Pour ce qui est de traiter du sujet de l'accessibilité, je ne vois pas pourquoi on ne pourrait pas le traiter en parallèle dans deux forums. Ce seront clairement des sujets dfférents et la connaissance qui émergera de nos discussions communes ne seront que mieux servies si elles sont séparées par thématique.

Je te propose donc de lancer un deuxième avis dans le forum d'accessibilté à ce sujet si tu en as envie. Après bien sûr, que tu aies fait le travail initial de validation pour corriger les trucs les plus faciles.

Pour t'aider à relancer la validation de l'accessibilité, il existe plusieurs outils automatisés. Personnellement j'ai une préférence pour celui d'accès-pour-tous (parce que c'est en français) et Cynthia Says, parce qu'il figure sur ma web developper toolbar avec firefox.

http://www.acces-pour-tous.net/validateur/validateur.php

http://www.cynthiasays.com/

[20cent]

Je faisais mention de l'utilisation des commentaires conditionnels proposés par Monique dans ce contexte précis comme étant l'élément innovateur, pas le CSS propriétaire à MSIE pour habiller le scrollbar.

Je l'avais bien compris ainsi.

Je te propose donc de lancer un deuxième avis dans le forum d'accessibilté à ce sujet si tu en as envie.

Et bien d'accord !

J'ai déjà parcourus les deux liens que tu m'indiques (parmis d'autres) et je me suis efforcé de suivre leurs conseils, je pars donc de ce pas, vérifier tout cela auprès des membres du HUB.

[Denis]

Je l'avais bien compris ainsi.

OK... Alors comme je disais, c'est peu important pour moi de le spécifier.

Je surveillerai le prochain thread avec intérêt :!: