[Amateur] Crunchbang Linux Fr

Bonjour à tous,

J'ai réalisé un site pour la communauté francophone Crunchbang Linux et j'aurais aimé avoir vos retours.
Donc pour le détail:
- Accueil et Téléchargement j'ai utilisé CMS Made Simple (j'aurais du coder les gestions de news moi même mais bon je manquais de temps)
- Wiki j'ai utilisé DokuWiki
- Forum j'ai utilisé FluxBB
- Tchat j'ai utilisé Jappix.

Le thème à été crée par un ami du forum et moi même et je me suis occupé de l'intégration du thème sur toutes les pages ainsi que la configuration complète de ces différents éléments.

Voila si vous avez des critiques (positives ou négatives) je suis preneur. Si il y en a qui peuvent tester sur IE ça m'intéresse aussi car j'ai un peu fait l'impasse sur ce navigateur vu le public majoritairement Linuxien qui visite ce site.

Merci d'avance !
Modifié par Raphi (31 Aug 2011 - 14:38)

J'aime beaucoup la sobriété du site. Il est bien aéré, les couleurs sont dans l'air du temps, et les ombres sont discrètes mais soulignent bien les cadres. J'essaierais peut-être bien cette distrib que je ne connaissais pas.
J'ai essayé avec ie, et il n'y a pas de problème

Du négatif, du positif, je commence par le négatif:

C'est gris, trop, mais c'est peut-être voulu, en tout cas c'est triste . Cela manque de lisibilité parfois, on étouffe un peu. Y a des décalages entre les titres de chaque colonne, c'est pas au même niveau alors cela fait tout de suite moins clean.

Mets un

text-decoration: underline;

(c'est une convention) sur tes titres de menus parce que l'effet lumineux ne suffit pas à mon sens.

Je mettrais un

 body {background-color:#EEEEEE;}

à ta place.


Le diaporama est joli. Le forum est conçu sur la même base que celui-ci non? Moi j'aime bien. La rubrique "télécharger" est vraiment sympa.

Le code passe bien au validateur W3C (même si c'est vrai que t'es en transitional).



En bref:


Les design minimalistes n'ont rien à envier aux design très graphiques, c'est un choix, ici c'est plutôt heureux si ce n'est l'aspect très terne du à ce fond gris.
Pour un site amateur, je trouve cela pas mal.

Merci pour vos retours !

@jmlapam: J'avais complètement oublié de modifier le doctype pour le passer en strict. Mais je viens de tester il reste tout de même valide en strict (ouff ).

Pour le fait que le site soit (trop ?) gris c'est voulu. Regarde le site officiel uk de crunchbang. Tu verras que nous de notre coté on a réussi a sortir quelque chose de très "coloré" comparé à l'original.
Je prend en note vos réponses en tout cas. Même si je ne ferait pas les modifs du site actuellement ça sera à prévoir pour une future mise à jour graphique /refonte (?).

Bonjour d'une Linuxienne.

Déjà, le site est valide, ce qui est très bien.
- Mais par contre, pourquoi xml:lang="en" alors que le site est en français ?

- tu as trois scripts externes que tu aurais pu réunir en un seul fichier pour ensuite les positionner en fin de document (avant </body>) pour pouvoir laisser le contenu se charger avant son comportement.

- Au sujet du logo : <a id="logo" href="index.php"></a>
C'est comme si elle n'existait pas pour les robots et ceux qui ne peuvent pas le voir ou le charger (moteurs de recherche, non-voyants, serveur qui déconne, images bloquées, config type "contraste élevé"). Du texte, aussi fourni comme dans ton cas, est une très mauvaise pratique. Remets donc ton texte en vrai texte brut pour la rendre lisible quel que soit le média, tandis que pour le logo #!, tu pourras garder le background si l'image ne contient que ça. Pour mieux comprendre, désactive les images (faisable avec Web Developer), tu verras de quoi je parle.

- Même constat avec le menu en haut à droite ! tu aurais dû garder les textes bruts d'autant plus que la police a l'air pas mal générique. Pour des images porteuses de contenu ou servant de support de lien, les mettre en fond pour ensuite cacher le texte avec du CSS, c'est un gros FAIL en accessibilité et de l'excès de SEO !
À lire : http://www.alsacreations.com/astuce/lire/62-balise-ltimggt-ou-feuille-de-style-css.html

- Ta hiérarchie des titres est fausse. je vois des h2 sans voir de h1... que j'aurais vu justement pour entourer le nom du site dans le header. L'utilisation du h4 pour des dates, ce n'est pas approprié.
Regarde ce que ça donne comme plan de page : http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fcrunchbanglinux-fr.org%2F
Je t'invite donc à lire ceci : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html


Jusqu'ici je n'ai examiné que la page d'accueil, mais déjà je peux te dire qu'il y a des points à revoir, car il y a des problèmes d'accessibilité. Si tu veux tester avec un lecteur d'écran, il y a Orca, qui est dispo par défaut sur certaines distributions utilisant GNOME, dont Ubuntu.
Je te conseille aussi la barre d'outils Web Developer (dispo pour Firefox et pour Chrome/Chromium), qui inclut plusieurs outils pour tester l'accessibilité d'un site.
Modifié par IshimaruChiaki (02 Sep 2011 - 01:05)

Bonjour @IshimaruChiaki
Merci beaucoup pour ta réponse très intéressante.

Donc je vais essayer de te répondre dans l'ordre:

a écrit :
- Mais par contre, pourquoi xml:lang="en" alors que le site est en français ?

J'ai oublié de modifier les paramètres du CMS concernant le doctype (c'est pour ça qu'il est encore en transitional entre autre).

a écrit :
- tu as trois scripts externes que tu aurais pu réunir en un seul fichier pour ensuite les positionner en fin de document (avant </body>) pour pouvoir laisser le contenu se charger avant son comportement.

C'est pas faux...

a écrit :
- Au sujet du logo : <a id="logo" href="index.php"></a>
[...]

Il est vrai que j'ai fait mon flemmard sur ce coup là en faisant une image...

a écrit :
- Même constat avec le menu en haut à droite ! tu aurais dû garder les textes bruts d'autant plus que la police a l'air pas mal générique. Pour des images porteuses de contenu ou servant de support de lien, les mettre en fond pour ensuite cacher le texte avec du CSS, c'est un gros FAIL en accessibilité et de l'excès de SEO !

Hummm... lapin compris sur ce coup là... J'ai écris le texte en dur avec Arial comme police...
Tu peux vérifier dans le code html.

a écrit :
- Ta hiérarchie des titres est fausse. je vois des h2 sans voir de h1... que j'aurais vu justement pour entourer le nom du site dans le header. L'utilisation du h4 pour des dates, ce n'est pas approprié.[...]

Si si j'utilise des h1 pour les gros titres du site:
- À propos de Crunchbang Linux
- Les Actualités
- Les bases
- En direct du Forum
Par contre je te l'accorde j'ai oublié de remplacer h4 par h3 (qui était à la base attribué pour l'auteur de la news).
Je vais allez voir la doc merci beaucoup du lien.

a écrit :
Je te conseille aussi la barre d'outils Web Developer (dispo pour Firefox et pour Chrome/Chromium), qui inclut plusieurs outils pour tester l'accessibilité d'un site.

Merci de l'info, je l'ai déjà mais je m'en était jamais vraiment servit en effet.

edit: en effet mon utilisation des titres h1 / h2 etc... à l'air bien moisie...
Modifié par Raphi (02 Sep 2011 - 01:34)

Au temps pour moi pour le menu, la mise en surbrillance avait fait vraiment bizarre avec la hauteur des lignes, ça faisait vraiment comme si je mettais des images en surbrillance. Et comme la surbrillance contrastait très peu avec le fond, c'était difficile de bien voir.

jmlapam a écrit :
Mets un

text-decoration: underline;

(c'est une convention) sur tes titres de menus parce que l'effet lumineux ne suffit pas à mon sens.

Par titre de menu, tu veux dire : "Les bases" et "En direct du Forum" ? Si c'est le cas, surtout pas de soulignement sur un élément qui n'est pas un lien !



Sinon, je confirme l'impression de tristesse, ce site m'a tout l'air dépressif... Il faut rajouter de la couleur et réduire les gris. Le manque d'alignement des éléments sous l'image est aussi perturbant. Accessoirement, plus on a une grande résolution moins c'est aligné. Et plus les lignes de contenu sont difficiles à lire. Une largeur de site fixe serait préférable.

Niveau accessibilité : le site est totalement inavigable au clavier, la faute à l'outline none (ou 0)...

Pour le logo (puisqu'on est dans l'accessibilité), le problème n'est pas l'image, mais le fait de la placer dans le CSS au lieu du HTML. Un image assortie d'un alt bien rempli est tout à fait accessible (et référençable).

Pour la hiérarchie des titres : elle doit toujours commencer par h1 et je jamais comporter de sauts (jamais de h1 directement suivi de h3). Les hn ne doivent pas être donnés en fonction de "l'importance" d'un texte, mais en fonction de son caractère de titre de section et de sa position dans la hiérarchie globale de la page (du coup, t'est h4, n'ont pas besoin d'être remplacé par des h3, ce ne sont pas des titres de section).

Il serait bien d'utiliser systématiquement des <p> pour tes paragraphes.

Pour les scripts JS, il serait bien de les placer en fin de document.
Modifié par Laurie-Anne (02 Sep 2011 - 08:52)

a écrit :
Sinon, je confirme l'impression de tristesse, ce site m'a tout l'air dépressif... Il faut rajouter de la couleur et réduire les gris.

Ça ne dépend pas de moi ça. Si je rajoute trop de couleur ça ne collerais plus vraiment avec l'état d'esprit de la distribution.
Personnellement j'ai toujours trouvé le thème du bureau Crunchbang hideux (noir / blanc) mais bon c'est pas moi qui gère ça.

a écrit :
Le manque d'alignement des éléments sous l'image est aussi perturbant. Accessoirement, plus on a une grande résolution moins c'est aligné. Et plus les lignes de contenu sont difficiles à lire. Une largeur de site fixe serait préférable.

Ou spécifier des max-width pour limiter ça sinon? Par contre au point de vue de l'alignement des différents "blocs" de contenus, quelle est la meilleure méthode à employer pour aligner mes éléments? Parce que je vois bien comment le faire en tableau... mais sinon autrement je vois pas trop comment faire sans rajouter des divs supplémentaires?

a écrit :
Pour la hiérarchie des titres : elle doit toujours commencer par h1 et je jamais comporter de sauts (jamais de h1 directement suivi de h3).[...]

Merci pour ces précisions.

Merci en tout cas de ta réponse.