Bonjour à tous,


Je suis en train de refaire le design de mon site. IL en sera à sa version 6 ! Et à cette occasion j'ai décidé de le rendre valide W3C. Ce qui est (en tous les cas pour la page d'accueil actuelle) le cas aussi bien au niveau du Code que de la feuille de Style.

Bon, je voudrais donc avoir votre avis aiguisé sur ce qui est du design actuel et des améliorations que je pourrais lui apporter.

Le site n'est malheureusement pas accessible sous IE6 pour le moment. Et je sens que des larmes de sangs ne vont pas tarder à couler car je craque.

Donc si vous aviez conseils à me donner à la lecture de mon code, je suis entièrement preneur !

Mon site est à l'adresse de dev suivante :

http://macbooster.kwint-spirit.com/

- Pour info, les articles actuellement en lignes sont des articles de test que j'ai simplement copiés/collés d'autres sites d'actu, en attendant la fin du dev.


Merci à tous ceux qui lirons et qui participerons à éloigner mon ulcère qui se rapproche...
(je suis à deux doigts de rediriger les utilisateurs d'IE6 vers http://www.isie6deadyet.info/... mais je préfère venir vous voir avant de commettre l'irréparable Smiley ravi )
Modifié par Archos (17 Nov 2009 - 17:03)
Archos a écrit :
Merci à tous ceux qui lirons et qui participerons à éloigner mon ulcère qui se rapproche...
(je suis à deux doigts de rediriger les utilisateurs d'IE6 vers http://www.isie6deadyet.info/... mais je préfère venir vous voir avant de commettre l'irréparable Smiley ravi )

À l'horizon je vois débouler la très furieuse Laurie-Anne...

Blague à part, le code et la CSS ont l'air bien faits, je n'ai pas tout vu en détails mais je ne vois aucune énormité évidente.

Pour le design j'aime beaucoup ! Sauf qu'avec de genre de design il faudrait se démarquer par une identité visuelle, un logo, etc. Mais je ne doute pas que ca va changer.

Pour le reste (accessibilité entre autres) je laisse le micro aux spécialistes Smiley smile
Modifié par darkstar2023 (17 Nov 2009 - 18:46)
Bonjour,

Alors, niveau accessibilité, on est pas loin du zéro.

Mettre des images porteuse de contenu en fond sans contenu alternatif, c'est mal.

Les textes sortent de leur contenus et se superposent, devenant impossibles à lire, lorsqu'on les agrandis, et vu qu'il sont très petits à la base...

Une partie des liens pointent ver localhost...

Les deux menu qui se répètent partiellement c'est génial pour perdre le visiteur.

Définir les polices en px c'est empêcher les utilisateurs d'IE6 et 7 d'agrandir les caractères. Il est préférable d'utiliser des em ou %.

Tu ne semble utiliser aucune hiérarchie de titre (les utilisateurs de lecteur d'écran utilisent les titres Hn pour naviguer plus facilement dans les page). La hiérarchie d'une page doit être complète et correcte (commencer par h1 et ne pas avoir de sauts).

La sémantique du site est... pas là. Les<p>aragraphes sont nos amis, il faut les aimer aussi !

Il est très difficile de repérer ce qui est cliquable.


Bref, plein de chose à voir pour l'accessibilité. Pour IE6, si t'es sage j'irais faire un tour demain au boulot Smiley cligne et je t'expliquerait pourquoi envoyer les utilisateurs vers un site débile est une très mauvaise idée.
Question qui n'a rien à voir : pourquoi n'as-tu pas monté ça avec Wordpress et consors plutôt que d'utiliser Spip ?
Ca m'aurait semblé plus logique vu la structure de ton site.
@Skoua : Simple, je n'ai aucune connaissance de Wordpress ou autre mais utilise SPIP depuis des années... on pourrait sûrement appeler ça de la flemme. Pour la peine et comme j'aime pas être traité de flemmard. Je vais regarder du côté de Wordpress ! Smiley langue

@Laurie-Anne : OH... bon ba y a encore du boulot quoi -_-'
Je ne serais pas contre un peu d'aide là. Je sais même plus par où commencer !

@darkstar : Oui je vais voir à peaufiner tout cet aspect graphique de la chose Smiley smile
Archos a écrit :
OH... bon ba y a encore du boulot quoi -_-'
Je ne serais pas contre un peu d'aide là. Je sais même plus par où commencer !
On va reprendre les points un par un:

Laurie-Anne a écrit :
Mettre des images porteuse de contenu en fond sans contenu alternatif, c'est mal.
Les images qui portent du contenu (pour faire simple : qui on du texte dessus) doivent TOUJOURS se trouver dans le code HTML et non dans le CSS. Ces images doivent également avoir un alt non nul, ce alt devra comporter au minimum la même information que celle portée par l'image.
La raison : si les images ne sont pas visible (utilisation de lecteur d'écran, problème serveur, navigateur ne supportant pas les images...) sans contenu alternatif (le alt) l'utilisateur pert une partie de l'information.

Laurie-Anne a écrit :
Les textes sortent de leur contenus et se superposent, devenant impossibles à lire, lorsqu'on les agrandis, et vu qu'il sont très petits à la base...
Le plus simple pour constater le problème est de toi-même faire le test en agrandissant les caractères (les caractères uniquement, pas toute la page) et de voir ce qui se passe. Tu constatera que les textes sortent de leur conteneur, pour éviter cela, il faut que tu fasse en sorte que les conteneur soient extenssibles en hauteur (il faut donc éviter de fixer la tailles des éléments en hauteur).

Laurie-Anne a écrit :
Une partie des liens pointent ver localhost...
ça je suppose que tu peu le corriger sans problème.

Laurie-Anne a écrit :
Les deux menu qui se répètent partiellement c'est génial pour perdre le visiteur.
Là, il va y avoir du boulot, il faut repenser la structure du site et de ses menus. Cela aurait du être réfléchit avant même le design du site (comme la prise en compte de l'accesibilité d'ailleurs). Le menu principal devrait toujours se trouver sur la barre sous le header, la barre de menu à droite devrait se contenter de menu contextuel (ou de rien) mais pas répeter les mêmes menus.

Laurie-Anne a écrit :
Définir les polices en px c'est empêcher les utilisateurs d'IE6 et 7 d'agrandir les caractères. Il est préférable d'utiliser des em ou %.
Il faut remplacer les font-size en px et les mettre en em ou %.

Laurie-Anne a écrit :
Tu ne semble utiliser aucune hiérarchie de titre (les utilisateurs de lecteur d'écran utilisent les titres Hn pour naviguer plus facilement dans les page). La hiérarchie d'une page doit être complète et correcte (commencer par h1 et ne pas avoir de sauts).
Il faut rajouter des titres (h1,h2, h3...)

Laurie-Anne a écrit :
La sémantique du site est... pas là. Les<p>aragraphes sont nos amis, il faut les aimer aussi !
Plutôt que de mettre le texte dirrectement dans les div et et jouer sur l'interlignage avec <br><br>, utilises des <p> pour baliser les paragraphes.

Laurie-Anne a écrit :
Il est très difficile de repérer ce qui est cliquable.
Souligner les éléments cliquables est en général un bon repère.


Laurie-Anne a écrit :
Bref, plein de chose à voir pour l'accessibilité. Pour IE6, si t'es sage j'irais faire un tour demain au boulot Smiley cligne et je t'expliquerait pourquoi envoyer les utilisateurs vers un site débile est une très mauvaise idée.
Pour ce qui est d'IE6. Envoyer les gens, sans leur accord, vers un site qui n'apporte rien au schmilblick, c'est être sûr de perdre environ 10% de tes visiteurs potentiels.

Le cœur du problème c'est que peu comprennent pourquoi il y a encore tant d'utilisateurs dIE6. Non, ce ne sont pas des utilisateurs débutants qui n'y connaissent absolument rien et à qui il faut expliquer qu'IE6 c'est de la daube ; ces utilisateurs là, il n'ont pas touché à la configuration de leur ordinateur en matière de mise à jours automatiques, la mise à jours vers IE7 puis IE8 c'est donc faite sans qu'il n'interviennent.

Les utilisateurs actuels d'IE6 sont des gens qui utilisent ce navigateur depuis leur lieu de travail et qui n'ont absolument aucun contrôle sur les mises à jours de leur machine. Leur dire de mettre à jour leur navigateur, que celui ci pue (déjà vu), que c'est vraiment trop domage qu'à cause d'eux IE6 vive toujours (...) c'est être sûr que lorsqu'ils rentreront chez eux ils ne reviendront pas non plus sur le site en question (sauf si celui est une référence incontournable, à un contenu du feu de dieu... soyons réaliste, c'est pas le cas pour beaucoup de sites) (du coup on dépasse les 10% de visiteurs potentiels perdu à mon avis).
Bonjour Laurie-Anne,

merci d'avoir pris le temps de me répondre.

Alors je vais reprendre les points que tu as abordé pour être certain d'avoir compris.

1) Les images : Les images porteuses de contenu, à mon sens il n'y à que deux. Les fond "actualités" et "dossiers", qui sont donc des background de DIV. Du coup je ne vois pas. Si je veux mettre du texte par dessus, comment je fais ? Tu suggères que je crée un <table> dans mon DIV ? Ou alors que je coupe la partie supérieure dans laquelle se trouve le Titre pour le mettre en dur et donc diviser chaque DIV en deux ?

2) Pour les DIV qui ne s'agrandissent pas. Mettre "min-height" pour la hauteur avec un fond alternatif devrait résoudre le problème ?

3) Le deuxième menu, tu veux parler du petit dans la colonne de droite ? Je n'ai pas encore mis le titre en haut de cette colonne, mais en fait, toute cette zone de droite est une zone "iphone", sur la home. Le préciser dans les titre résoudrait le problème.

4) JE viens de checker les typos. Elle étaient bien toutes en EM hormis 2 que j'ai corrigé.

5) Pourquoi utiliser H1-H2-H3 sur la home alors que j'ai pleins de variantes de textes ? N'est-ce pas un affichage valable uniquement sur la page ARTICLE ?

6) JE n'utilise que très peux de <BR />, en fait, c'est SPIP qui remplace automatiquement un saut de ligne par un BR... ce con.

7) Enfin pour IE6, quelle serait selon-toi la marche à suivre pour débugger tout ce bazard. Recréer une feuille de style entièrement pour cet âne bâté ?
J'ai installé Windows en machine virtuelle sur mon Mac, aurais-tu une idée de la manière dont je pourrais installer IE6 sans avoir à désinstaller IE8 (j'ai fais la connerie, j'ai installé windows 7... c'est peut être pas le meilleur choix...)
1) Dans ce cas, il doit bien y avoir un fond dans la div, mais la partie d'image qui porte le contenu doit être dans le code HTML. Ton logo est aussi dans ce cas. Si tu utilise FF, installe la webdevelopper toolbar et désactive les images, tu comprendras mieux pourquoi elles doivent se trouver dans le code HTML avec un alt cohérent.

2) oui

3) effectivement

5) Nope, l'important c'est de donner du sens à ton contenu. Par exemple, "Actualité" est un titre de section (la section étant la liste de lien en dessous).

6) bah là, faut brûler SPIP...

7) Une feuille de style corrective (donc juste les instruction qui doivent être modifiées) appellée grace à un commentaire conditionnel après la feuille de style normale est effectivement la meilleurs solution. Pour ce qui est des test, sur windows 7, il est impossible d'installer IE6. Mais tu peux installer une image de windows XP avec IE6 sur ta machine virtuelle.