3246 sujets

Critiques de vos sites: code et design

Site de philo

Bonjour.

Je cherche des critiques et des pistes pour ce site réalisé sans aucun framework ni template (from scratch donc).

Site de Philo

Je sais que le validateur du W3C renvoie encore des erreurs (15 sur l'index), j'y travaille actuellement. Même si je ne comprends pas trop certaines comme " Line 16, Column 7: end tag for element "HEAD" which is not open" alors que j'ai bien <head>.....</head>.

Bref, merci de vos critiques et pistes !
Bonjour,

Tu n'as pas de signalement de langue sur ta balise <html>

La meta...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


... se place immédiatement après la balise <head>, pour informer le navigateur que tout ce qui suit est de l'UTF-8. Dans le cas contraire, tu pourrais avoir des caractères bizarres dans le contenu de tes balises <title></title>

Cette méthode d'appel de feuille de style...

<style type="text/css" media="screen">@import url( style.css );</style>


... peut générer des FOUCs (flashes of unstyled content). Je ne sais pas si c'est encore le cas.

Dans l'affirmative, préférer l'appel suivant :

<link href="style.css" rel="stylesheet" type="text/css" media="screen">



Sinon, pour l'essentiel, ton balisage est... heuu... pas très sémantique.

Tu as un h2 pour ça... :

<h2><a href="/pg/coms.php" style="text-decoration:none">Commentaires</a></h2>


... et à part ça, aucune balise Hn pour tes titres. Tu as des titres comme ceci... :

<b>QUI SOMMES-NOUS ?</b><br /><br />


... et tout le texte de ta colonne de contenu est inclus dans un div sans autre subdivision HTML ; tes "paragraphes", qui n'en sont pas en HTML et sont purement visuels, sont créées par de multiples <br />.

Pourquoi diable n'utilises-tu pas les balises adéquates pour structurer ton contenu : les balises <Hn> pour tes titres, des balises <p> pour tes paragraphes et des <ul> et <li> pour tes listes à puces ?

De plus, des titres correctement balisés permettent une meilleure identification du contenu par les moteurs de recherche (ils se basent sur les titres pour déterminer le contenu des pages).

Le JavaScript pour agrandir/réduire le texte n'est plus utile : les navigateurs disposent de fonctions de zoom et d'agrandissement/réduction du texte.

Les menus fixed, j'aime bien, mais ils ne doivent pas être trop longs. Celui de ta page est trop long (j'ai un écran 1600 x 900). Il dépasse en bas et est de surcroît masqué par ton footer.

L'orthographe :

"Les pistes ouvertes par Cosmas Koronéos peuvent éventuellement le permettrent" > le permettre

C'est tout pour le moment.

Bonne continuation.
Modifié par thierry (15 Oct 2012 - 17:33)
Merci de ces réponses !

Toutes vos critiques ont été prises en compte et j'ai opéré les modifications ad-hoc (seulement sur index.php pour le moment, que je prendrai ensuite comme modèle pour refaire les autres).

Donc :

- <html> contient désormais la langue (j'ai rajouté au passage un <meta http-equiv="Content-Language" content="fr-fr" />) ;
- l'appel de la feuille de style a été modifié ;
- les titres utilisent désormais <h7> pour le titre principal et <h8> pour les sous-titres ;
- Les <br /> inutiles ont été remplacés par des <p> ;
- les listes à puce utilisent désormais <ul> et <li> ;
- le container "Actualité" a désormais une hauteur maximum de 68%;
- la faute d'orthographe a été corrigée.

Par contre, le bouton pour agrandir le texte m'a été demandé, car certains membres sont âgés et ne connaissent pas ctrl +/- ni de passer par un menu.
Rebonjour,

cosimo
a écrit :
les titres utilisent désormais <h7> pour le titre principal et <h8> pour les sous-titres

Heuu... il n'y a que 6 niveaux de titres en (X)HTML.

Sinon, c'est toujours bizarre. Pourquoi pas un <h1> pour le titre principal, puis des <h2>, des <h3>... ?
Modifié par thierry (15 Oct 2012 - 20:37)
hum bonne question. J'ai incrémenté car dans mon code css j'ai trouvé : h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal; } Bon <h1> et <h2> sont utilisés, je les ai trouvés. Mais je n'ai pas trouvé le reste. Je vais essayer de remettre de l'ordre là-dedans.

Merci en tout cas pour l'information sur le plafonnement des niveaux.
Modifié par cosimo (15 Oct 2012 - 21:02)
C'est peut être juste moi, mais je trouve le texte principal trop gros pour être lu confortablement : Je préfèrerais que la taille actuelle soit celle obtenue en cliquant pour augmenter la taille et que la taille par défaut soit plus petite.
Le problème n'est pas tellement que le texte soit trop gros, c'est surtout que l'interlignage est trop faible.

D'ailleurs le manque "d'espace" est un problème général pour le site.
Pour un site informatif, littéraire, à contenu principalement texte, je le trouve très bien ! Une bonne idée d'utiliser toute la largeur de l'écran. Le site est sombre ce qui facilite l'accès aux différentes informations et facilite la lecture des textes.
Oui comme il est dit, la police est peut etre un peu trop grosse. Peut être en choisir une plus fine afin d'alléger les blocs textes.
J'ai légèrement augmenté l'interlignage.

Je ne suis pas expert en police. Sous Firefox / ubuntu en 1920*1080, la police ne fait pas trop pâteuse. Peut-être un peu en 1280*800 sur la même machine.

Pour le texte j'ai choisi: font-family: Helvetica, Arial, sans-serif.
Pour les titres : font: small-caps 36px "Century Schoolbook", Georgia, Times, serif.

Que suggéreriez-vous ?

Je pense que c'est surtout le bloc Actualité qui pose problème. Quand on descend en résolution, on est confronté à des dépassements du texte des publications récentes. Je ne sais pas trop quoi faire vis-à-vis de ce problème.
Modifié par cosimo (16 Oct 2012 - 22:45)
C'est beaucoup mieux.

Pour ton bloc actualité, il faut enlever le positionnement fixe. Il n'apporte rien et est très gênant sur petit écran ou (comme dans mon cas) quand on ne navige pas en plein écran.
Je suis passé en position : absolute pour le bloc actualité. Mais je ne peux pas faire ça pour les pages de texte elle-même, où ce bloc sert à afficher un menu de navigation du texte (sorte de sommaire ou de table des matières) qui m'a été demandé par commodité de lecture.

J'ai donc séparer les deux conteneurs, l'un pour le bloc actualité avec une position : absolute et l'autre pour le bloc de navigation dans les textes, avec une position : fixed.

Il est certain que l'affichage du texte dans ce bloc est problématique, dès que l'on passe en mode fenêtré de petite taille ou dans de très basse résolution, le texte s'écrase sur la droite et dépasse par le bas. Il faudrait peut-être que je trouve autre chose...

Je vous remercie pour toutes ces remarques. Je vais maintenant m'atteler à nettoyer les autres pages à partir d'index.php qui me sert de modèle.

Si vous avez d'autres suggestions, n'hésitez pas !
Modifié par cosimo (17 Oct 2012 - 21:52)
Bonsoir,
Je suis allé voir votre site très riche en contenu texte.

Mais, je suis un peu gêné et vite fatigué par le fait de lire un texte clair sur un fond sombre.


Sinon bravo pour le travail déjà effectué et bon courage pour la suite.
Sujet clos
Aller à