3241 sujets

Critiques de vos sites: code et design

[Amateur] diogenes.webou.net

Bonjour !
Alors alors...
je ne suis pas pro mais j'ai quelques critiques (constructives !) à t'apporter.

Commençons par une étude visuelle de ton site, sans rentrer dans le code :
(c'est à dire on pointe ici les défauts classiquement remarqués par le visiteur lambda).

Ton menu de navigation est-il uniquement en HTML/CSS ou tu as fait le choix d'utiliser du JS quelque-part ? Car quand mon addon anti-script (noscript en l'occurrence) bloque le JS et les Script de ton site, ton menu est "déformé" (la mention "contacter" passe sous accueil, à moitié hors champ, à cause de la taille des polices).
Quand je désactive mon addon (ce que je ne fais que rarement au passage), les polices du menu changent, et tout "rentre dans l'ordre". Mais visuellement je trouve ces polices disproportionnées voir même "agressives". Idem pour leur effet de survol particulièrement "violent" visuellement, surtout au vu du ton globalement sombre de ton site, c'est "trop".
je suppose que tu aime cette police d'écriture, mais elle me parait trop grosse, trop "tassée" et relativement inadaptée à un menu...désolé.

Pour le menu :
Je suis un poil troublé par sa disposition, le bas du menu apparait tronqué sur mon navigateur, et seul le haut est arrondi.
Ne serait-il pas préférable de "retourner horizontalement" le menu ?
Ainsi l'arrondi serait vers le bas, et tu collerai le haut de ton menu orange clair, contre la div de titre, donnant l'impression que le menu est consécutif au bloc contenant ta bannière. Tu comprend ?

Concernant la div de titre :
Ta gif animée est mal découpée, d'ailleurs ce découpage varie fonction de la tête que tire le perso : on voit que le plus petit crénelage (néanmoins très visible déjà) est visible lorsque ton personnage sourit, et le plus gros crénelage blanc apparait lorsqu'il à une mine neutre. Aussi cette aura blanche qui varie en taille est un peu "crade" si tu veux aller au bout des choses.
De plus, ton titre n'est fait que d'une seule image (!!!).
Tu pourrais être amené à changer des composants de ta bannière, et il te faudrait alors tout refaire à chaque fois...

Diogenes doit être placé dans un H1.
La citation doit être placé par exemple dans un <p class=citation> stylé via css.
Et l'auteur doit être placé (toujours par exemple) dans un <p class=auteur> (etc, css).
Recrée un gif avec ta bouille, sur fond TRANSPARENT cette fois, (par exemple avec photofiltre, met un fond rose très flashy et définit ce rose comme couleur de transparence avant de refondre ton gif).
Pour finir ce gif étant en fond transparent, tu pourra mettre en propriété Background-image le fond orange clair/foncé en vague.

Les avantages :
Si tu décide de mettre du php dans ton site (ça viendra j'en suis sur) tu pourra placer des citations aléatoires par exemple, ce que tu ne peux pas faire avec une image.
Si tu décide en hiver d'ajouter un chapeau de noël à ton perso, tu n'auras pas besoin de refaire toute la bannière, juste de changer l'image présente dans le div de titre.
D'autre part, le référencement est nettement amélioré via le H1 plutôt qu'une image.
N'hésite pas à coller la div de titre au haut de page avec la propriété margin-top:0px; dans le body de ton css.

Pour le fond :
Ton image est pas mal mais le dégradé est très (trop ?) visible.
Sur les navigateurs récents tu peux utiliser la propriété CSS3 qui permet de faire de très bô dégradés. Et coller un fix pour les navigateurs "dinosauresques".
Ce fixe reprendrait le principe de l'image de fond actuelle.
Ainsi les navigateur récents bénéficieront d'un avantage visuel sympa. Plus de fluidité au niveau esthétique. C'est une forme de valorisation pour les personnes qui font l'effort de se tenir à jour au niveau des standards et des navigateurs, qui est assez pratiquée.

Passons à la navigation du "menu" latéral (mes amis):
Le placer à droite est-il un choix ?
Si oui, pourquoi ?
Classiquement, les menus sont traditionnellement placés à gauche...même sans être important, ce détail m'a barbouillé.
Autre chose : tu devrais l'adapter à ta longueur de page ou le cas échéant, placer dessous un autre div qui, lui, couvrira la longueur de page.
Car quand on regarde la div de contenu deux (condimentum tincidunt id venenati) un grand vide réside à droite, et semble casser l'aspect "centré" de ton site, ce qui est dommage. De plus, tu pourrais mettre dans cette deuxième colonne des liens vers d'autres sites, infos, etc. Ça peut-être utile.

Bon, du coup j'en ai déjà beaucoup dit, j'espère un retour de ta part sur mes réflexions, qui ne t'ont pas blessées je l'espère.
Je pense qu'après ces quelques modifs tu auras beaucoup gagné en flexibilité ! Tu ne le regretteras pas, à mon avis.

A très bientôt, je garde quelques améliorations dans mon sac, je ne t'ai pas tout dit !
Bonne soirée.
Bonjour.

Commence par corriger les erreurs de validation dans ta page : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.diogenes.webou.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Premièrement, ta ligne de Doctype n'est pas correctement écrite, ce qui cause des erreurs de validation

Voici ce que je vois : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Alors que sur mon site où il n'y a aucune erreur de validation, j'ai ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Il faut donc écrire html en minuscules.

Même si ce n'est pas invalide en tant que telle, tu n'as aucune langue définie dans ta balise <html> ouvrante. Or, les lecteurs d'écran ont besoin de cette information pour savoir dans quelle langue ils doivent lire la page, car sinon, ils la liront en anglais.

Dans ton cas, je ne vois que
<html xmlns="http://www.w3.org/1999/xhtml">


alors que l'on doit normalement faire comme ceci :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


Dans ton menu latéral, tu as des <br> entre les puces alors que c'est invalide, ce qui cause une cascade d'erreurs, d'autant plus que cette balise n'est même pas fermée. Si tu voulais espacer tes puces, utilises plutôt la propriété line-height pour régler la hauteur des lignes.

Si tu dois écrire le code HTML des caractères accentués, finis toujours ce caractère avec un deux-point !, ce qui signifie que tu dois faire ça :
<h3>Les br&#232;ves </h3>


au lieu de
<h3>Les br&#232ves </h3>


Une autre erreur bête de débutant : Tu utilises des id là où tu aurais dû utiliser des class. Une id ne doit apparaître qu'une seule fois dans la page alors qu'une class peut être utilisée plusieurs fois. Remplace donc tes id par des class, là où ils apparaissent plusieurs fois.

Et pour finir, ton <div> regroupant les articles n'est pas fermé.

Et comme le dit Wu Xiang, teste ton menu avec l'extension Noscript, car il a un bug d'affichage quand JS est désactivé, puisque Contacter se retrouve en dessous, ce qui rend "Accueil" difficilement survolable et cliquable.
Essaie aussi de quand même paramétrer une ensemble de polices de remplacement, justement pour ceux qui ont désactivé JS, car en ce moment sur mon poste Ubuntu sur lequel je n'ai pas encore installé les polices Microsift, tout s'affiche en sérif générique quand JS est désactivé, tandis que chez les windowsiens, ça doit sûrement s'afficher en Times. Définis-le dans les propriétés CSS pour body.
Plus d'infos sur les polices : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html

Il ne faut donc pas non plus négliger cette frange d'internautes chez qui, par choix ou par obligation, le JS est désactivé.
Tu as bien utilisé FLIR pour tes textes ? Car il y a bien une couche Javascript dans la gestion des polices.

Teste-le en installant l'extension Noscript sur Firefox, tu verras de quoi je parle.
Bonsoir,

Je viens me joindre tout comme vous pour partager mes avis sur ce site.

Tout d'abord un point sur lequel je voulais en venir, il disait:

a écrit :
Brièvement,je viens de créer mon blog, amateur bien sur...


Franchement au lieu de faire ceux qui farfouille et décortique mettez vous dans la tête que le gars vous a signaler que c'est un blog amateur.

Pourquoi insister sur la validation au W3C alors que le code est déjà pas mal et bien propre. Pour moi le W3C est une note personnel pas besoin d'en faire un plat. Et comme le disais un ami, "je préfère passer du temps sur le contenu que sur le contenant."

----------- -------------- --------------- --------------

Bon pour commencer à donner une note pour ton site je choisis 9/10. J'aime bien les couleurs, la bannière et les emplacements des menus. Sinon les couleurs son bien assortis, j'aime.

Ah oui, bien vu pour la GIF dans la bannière ^^
Salut,

le petit marocain a écrit :
Pourquoi insister sur la validation au W3C alors que le code est déjà pas mal et bien propre. Pour moi le W3C est une note personnel pas besoin d'en faire un plat. Et comme le disais un ami, "je préfère passer du temps sur le contenu que sur le contenant."

Je tiens à rappeler que l'intérêt de la critique, n'est pas de dire "c'est bien" pour contenter la personne, ce qui est bon pour l'égo mais ne sert à pas grand chose.
Par contre, même quand le boulot est pas mal, il est toujours bon de chercher à l'améliorer, et c'est à mon sens l'intérêt de présenter son travail à la critique, pour recueillir des avis pour aller plus loin et faire mieux. Smiley cligne
Bonjour Diognes,
Sans vouloir être présomtueux, prétentieux
j'ai moi même gravement souffert de Divite lorsque j'ai fait mes premiers pas dans le monde de la syntaxe HTML.

HTML contient de nombreuses balises qui ont chacune leur signification, utilié, comportement par défaut (au niveau du style et du positionnement)

Dites-moi, lorsque vous écrivez votre nom, est-ce que vous l'entourer d'une boite rectangulaire? Cette logique "simpliste" se transpose facilement avec le HTML.

Il est erroné de croire que vous devez utiliser des <div> partout,et inutile de chercher à délimiter dans votre code les balises HTML par des <div>. Cela ne fait qu'accroitre la loudeur de votre page HTML.

Le div est un bloc, une boite, une section
Les <div> sont comme les rectangles dans la rubrique "petites annonces clasées", ils délimitent les différents annonceurs.

A cet effet, pour savoir quand est-ce qu'il est nécessaire d'utiliser le <div>
Est-ce que je cherche à déclarer une zone "conteneur" dans ma page?
Grossièrement, le <div> sert la pluspart du temps a délimiter dans l'espace une "zone" remplise par certain type de contenu.

Tel que:

A) Haut de page / HEADER - Pied de page / FOOTER
B) Barre lattéral - SIDEBAR
C) Conteneur GLOBAL du contenu -
D) Sous-conteneur - Pour chaque articles d'un fil de blog par exemble
E) Liste non-exhaustive Smiley cligne

H) Le monde est remplis d'exceptions, Certains comportements dans le positionnement nécessitent l'ajout de <div> supplémentaires pour contrer des bugs, néamoins ces exceptions sont rares.
----------------------------------------------------------------------

La différence entre une CLASS et un ID: Lorsqu'on attribue un ID a un élément html(balise) c'est essentiellement parcequ'il a un comportement spéciale, , Un "style" unique par rapport aux autres. Dans votre code, il ne devrait jamais y avoir deux fois le même ID,

Utiliser CLASS si vous souhaitez appliquer le même comportement à plusieurs éléments(balises).
Lorsque vous avez plusieurs éléments avec des propriétés "homologues"
(même positionnement, & ou couleur, & ou police, ect)

------------------------------------------------------------------------
Qu'est-ce est un titre qu'est-ce qui ne l'est pas, un titre de quoi?

La syntaxe pour un titre selon l'importance de celui-ci ,gérérallement relatif au positionnement dans la page
<h1><h2><h3><h4><h5><h6>



<div id="titre">
	<h3>Les brèves </h3>
</div>

deviens

<h3>Les brèves </h3>

&
<div id="billet">

deviens
<div class="billet">

&

<div id="titr">
	<h3>Mes amis</h3>
</div>
<div id="article">
	<ul class="ami">
		<li><a href="#">Le petit Marocain</a></li><br>
		<li><a href="#">Le Hollandais volant </a></li>
	</ul> 
</div>

deviens

<div id="sidebar">
           <h3>Mes amis</h3>
	<ul class="ami">
		<li><a href="#">Le petit Marocain</a></li><br>
		<li><a href="#">Le Hollandais volant </a></li>
	</ul> 
</div>

&
<div id="articles">

L'utilisation d'un ID est correcte puisque c'est un conteneur globale unique
&
<div id="title"><h3>Lorem ipsum dolor sit amet</h3></div>

deviens
<h4>Lorem ipsum dolor sit amet</h4>

&
<div id="billet">

deviens
<div class="billet">


J'ai supprimé le div id="contenu", je l'ai remplacé simplement par un <p> ( <p> signifie paragrhape donc, un paragraphe contient par définition un contenu, générallement du texte, des images. Par conséquent, il se délimite tout seul dans le flux du positionnement)
Modifié par simon.bdard (03 Aug 2010 - 07:03)
Voilà la syntèse finale de la page

<div id="header"> <--! Haut de page -->
	<h1>Diogenes</h1> <!-- Titre -->
	<h2>Sous titre - "Description du site" </h2> <!-- Sous-titre -->
	<!--
    	<q>Si tu dois insérer une citation elle devrait être dans cette balise; Q comme dans quote (citation en anglais)</q>
	 -->
	<ul class="men"> <!-- Menu -->
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Divers</a></li>
	<li><a href="#">Livre d'or</a></li>
	<li><a href="#">Contacter</a></li>
	</ul>
</div>
<div id="sidebar">
	<h3>Mes amis</h3>
	<ul class="ami">
		<li><a href="#">Le petit Marocain</a></li><br>
		<li><a href="#">Le Hollandais volant </a></li>
	</ul> 
</div> 
<div id="articles"><!-- Conteneur GLOBAL du contenu  -->
	<h3>Les brèves</h3> 
	<div class="billet> <!-- Sous-conteneur -->
	<h4>Titre du billet</h4>
		<p> <!-- Paragraphe -->
		Etiam aliquam nisl at mauris condimentum tincidunt id venenatis turpis. 
		</p>
	</div>
</div>
<div id=footer"> <!-- Pied de page -->
Pied de page
<div>

Modifié par simon.bdard (03 Aug 2010 - 06:43)
Bien entendu ma réponse s'avère être incomplète et je te suggère fortement de relires les tutoriaux présents sur le site.

Le livre CSS 2, pratique du design web par Raphaël Goetter avec la contribution de Sébastien Blondeel des éditions EYROLLES est égallement un très bon complément pour une bonne initiation.
Modifié par simon.bdard (03 Aug 2010 - 15:33)
Administrateur
simon.bdard a écrit :
Bien entendu ma réponse s'avère être incomplète et je te suggère fortement de relires les tutoriaux présents sur le site.

Le livre CSS 2, pratique du design web par Raphaël Goette avec la contribution de Sébastien Blondeel des éditions EYROLLES est égallement un très bon complément pour une bonne initiation.

Merci, c'est sympa Smiley smile
Je me permets juste de corriger le nom : c'est "Goetter" Smiley cligne
Je suis désolé pour la faute de frappe Raphaël. J'ai tendance a trop réiditer mes réponses et a supprimer par mégarde une lettre ou deux. Smiley rolleyes

Cordialement.
Modifié par simon.bdard (03 Aug 2010 - 15:53)
Re bonjour Diogenes. Je souhaite ajouter un complément d'information.

Au lieu de créer un ID ou un CLASS pour chaque balises qui sont déjà dans un bloc "conteneur"
afin de leurs attribuer des propriétés CSS. Il est possible de spécifier des "conditions" parents-enfants dans le code CSS.

Dans le cas ou nous avons 

<div class="billet">
 <h4>Titre du billet<h4>
 <p>Lorem ipsum </p>
</div>



.billet p {color:red;}

Seul l'élément <p> à l'intérieur du <div class="billet"> sera influencé par la propriété CSS color.
Les autres <p> qui ne sont pas dans le "conteneur" billet ne seront pas affectés par le code CSS ci-dessus.
Modifié par simon.bdard (03 Aug 2010 - 16:52)
Sujet clos
Aller à