3246 sujets

Critiques de vos sites: code et design

[intermédiaire]Mag la Grenouille

Bonsoir à tous,

Anciennement Le Carton à Dollz, j'ai relooké totalement mon site, l'ai changé de nom également et tâché de coller au plus près des standards du web, bien que n'ayant pas encore fait de validation W3C.
Je n'ai pas réalisé de feuille CSS exprès pour IE6, je n'y songe que très moyennement très franchement. En revanche, je ne sais pas du tout à quoi mon site ressemble sous IE7, car je n'ai pas pu le tester en ligne, et l'émulateur (je ne sais plus si c'est le terme exact) semblait avoir des ratés donc je l'ai viré et n'ai pas revérifié depuis.
Merci d'avance pour le temps passé à scruter mon site Smiley smile

Mag la Grenouille
Bonsoir,

J'aime beaucoup ta grenouille ! Tu devrais d'ailleurs peut-être la réutiliser comme identité visuelle, la décliner en favicon également.

Concernant le contenu :

* Style assez dépouillé, j'aime bien. Par contre, l'utilisation d'une couleur très dominante le rend monotone. Tu pourrais essayer de reprendre une ou deux couleurs du nénuphar pour l'égayer davantage.

* Les rubriques : l'ordre dans lequel elles sont affichées sur la page d'accueil n'est pas respecté dans le menu latéral. De plus, il y a des incohérences dans l'intitulé de certaines rubriques : il faut conserver le nom des rubriques d'une page à l'autre, et dans le titre de la page visualisée (exemples : About me/Qui suis-je? ; Infographie web/Infographie et web/Créations infographiques).

* Le titre du site, s'il est cliquable, devrait permettre de revenir à la page d'accueil. Ce même titre devrait d'ailleurs être disponible dans toutes les pages de ton site. Tu pourrais par exemple l'associer à l'image de la grenouille, laquelle ferait office d'identité visuelle (que tu pourrais par exemple décliner en favicon).

* Pour revenir sur l'image de la grenouille située en haut à gauche de chacune de tes pages, et suite à ma remarque précédente, il serait plus judicieux qu'un clic ramène l'utilisateur sur la page d'accueil.

* L'aide à la navigation de la page d'accueil est inutile présentée sous cette forme. j'ai d'abord cru à un lien, et il m'a fallut inspecter le code pour me rendre compte que le texte comportait un titre. Elle n'est de plus disponible que sur cette page, donc difficilement accessible après avoir parcouru quelques rubriques.

* Il serait appréciable que l'aperçu des photos puisse être fermé à l'aide d'un bouton.

* Le lien vers les dessins traditionnels depuis la page d'accueil ne fonctionne pas.

* Les liens situés dans une page, à droite du menu de navigation, ne sont pas toujours cliquables (le menu les recouvre totalement ou en partie).


Pour ce qui est du code :

* Le doctype est erroné, la validation est donc impossible.

* Les liens vers les différentes rubriques depuis la page d'accueil devraient faire parti une liste, et non d'un tableau.

* Les miniatures d'images/photos devraient également faire parti de listes, plutôt que de n'être que des suites de liens dans un paragraphe. Tu pourrais même vouloir utiliser des listes de définition (il y a un très bon exemple de galerie photos).

* Il y a quelques balises vides (j'ai remarqué deux div en fin de document).

* L'utilisation de <br> pour de la mise en page est à proscrire !


La compatibilité avec IE (versions 6 à 8) est très bonne, il y a juste un décalage avec les versions d'IE<8 au niveau du titre des pages, lequel se trouve sous la grenouille.

Coââ-coââ !
Modifié par octopus984 (30 Apr 2010 - 23:49)
octopus984 a écrit :
Bonsoir,

J'aime beaucoup ta grenouille ! Tu devrais d'ailleurs peut-être la réutiliser comme identité visuelle, la décliner en favicon également.


Merci beaucoup Smiley smile J'y songe fortement, mais n'ai pas eu l'occasion de m'en occuper.

octopus984 a écrit :

Concernant le contenu :

* Style assez dépouillé, j'aime bien. Par contre, l'utilisation d'une couleur très dominante le rend monotone. Tu pourrais essayer de reprendre une ou deux couleurs du nénuphar pour l'égayer davantage.


C'est noté, je vais y réfléchir mais je ne veux cependant pas saturer le visiteur de couleurs.

octopus984 a écrit :

* Les rubriques : l'ordre dans lequel elles sont affichées sur la page d'accueil n'est pas respecté dans le menu latéral. De plus, il y a des incohérences dans l'intitulé de certaines rubriques : il faut conserver le nom des rubriques d'une page à l'autre, et dans le titre de la page visualisée (exemples : About me/Qui suis-je? ; Infographie web/Infographie et web/Créations infographiques).


Alors, en fait, j'ai placé mes rubriques sur la page d'accueil par ordre d'importance, avec le plus "important" au milieu, et en attribuant l'ordre qui me définit le mieux en tant que personne.
En revanche, pour le menu latéral, j'ai fonctionné avec une logique qui rejoint mon projet professionnel, car c'est aussi lui qui justifie aujourd'hui l'existence même du site, en tâchant de mettre en avant ce que mes passions peuvent y apporter. Je ne sais pas si je suis claire. En effet, le tout manque de cohérence, je vais y réfléchir à nouveau. Merci pour les remarques sur les titres.

octopus984 a écrit :

* Le titre du site, s'il est cliquable, devrait permettre de revenir à la page d'accueil. Ce même titre devrait d'ailleurs être disponible dans toutes les pages de ton site. Tu pourrais par exemple l'associer à l'image de la grenouille, laquelle ferait office d'identité visuelle (que tu pourrais par exemple décliner en favicon).

* Pour revenir sur l'image de la grenouille située en haut à gauche de chacune de tes pages, et suite à ma remarque précédente, il serait plus judicieux qu'un clic ramène l'utilisateur sur la page d'accueil.


Quand tu parles du titre du site, je suppose que tu veux dire le titre de la page, qui est dans le div <h1>?
J'hésitais à remettre le nom de mon site sur toutes les pages, mais à la place j'ai préféré laisser la grenouille, icône emblématique et le roseau pour la cohérence graphique et qui montre bien que l'on est toujours sur le même site.
Pour le clic sur la grenouille qui ramènerait sur la page d'accueil, ce n'est pas que je ne veux pas, mais je n'en vois pas l'intérêt. La page d'accueil ne reflétant que le menu global sous forme de tableau, et le menu latéral donnant tous les liens vers toutes les pages, j'ai estimé que ce n'était pas utile.

octopus984 a écrit :

* L'aide à la navigation de la page d'accueil est inutile présentée sous cette forme. j'ai d'abord cru à un lien, et il m'a fallut inspecter le code pour me rendre compte que le texte comportait un titre. Elle n'est de plus disponible que sur cette page, donc difficilement accessible après avoir parcouru quelques rubriques.


Je suis d'accord avec toi, je compte m'en occuper en utilisant une commande javascript et un effet scriptaculous. Mais mon cher mari est plus doué que moi pour ça, et n'est pas toujours dispo au moment où mes géniales idées viennent envahir mon cerveau toutes en même temps.

octopus984 a écrit :

* Il serait appréciable que l'aperçu des photos puisse être fermé à l'aide d'un bouton.

Normalement c'est le cas, mais j'ai un souci avec mon script lightbox, tous mes boutons ne s'affichent pas correctement et je n'ai pas trouvé pourquoi.

octopus984 a écrit :

* Le lien vers les dessins traditionnels depuis la page d'accueil ne fonctionne pas.

Oups, ce sera réglé dans le quart d'heure qui vient.

octopus984 a écrit :

* Les liens situés dans une page, à droite du menu de navigation, ne sont pas toujours cliquables (le menu les recouvre totalement ou en partie).

Alors ça par contre ce n'est pas normal du tout! Peux-tu me donner un exemple précis ou une capture d'écran s'il te plaît? Cela m'aiderait aussi si tu m'indiquais quelle résolution tu utilises afin que je le corrige. Merci.

octopus984 a écrit :

Pour ce qui est du code :

* Le doctype est erroné, la validation est donc impossible.

Oui, alors le doctype, c'est mon gros souci, je n'y pige rien, j'ai beau lire tous les tutos, y'a pas moyen que je m'y retrouve. Smiley decu

octopus984 a écrit :

* Les liens vers les différentes rubriques depuis la page d'accueil devraient faire parti une liste, et non d'un tableau.

Si je fais une liste au lieu d'un tableau, je n'ai plus cette configuration particulière. Au départ, je voulais même faire un menu en map. C'est pas du français informatique ce que je dis là, mais je voulais avoir une image (de grenouille of course) et la découper selon les liens. Seulement ça non plus, je ne sais pas le faire et je n'ai pas encore eu le temps d'apprendre.

octopus984 a écrit :

* Les miniatures d'images/photos devraient également faire parti de listes, plutôt que de n'être que des suites de liens dans un paragraphe.

Ok, seulement si je les mets à la suite alors, parce que je ne veux pas les mettre en vertical Smiley smile

octopus984 a écrit :

* Il y a quelques balises vides (j'ai remarqué deux div en fin de document).

EDITAlors en fait, il s'agit de div dont les images sont placées sur la feuille CSS (j'ai vu au passage en lisant quelques posts que c'était fortement déconseillé). Ici, un des div contient mon roseau de droite (tu le vois au moins?) et l'autre ne contient rien, mais j'aime l'idée de pouvoir le remplir à n'importe quel moment. Oui, je sais, c'est n'importe quoi, je l'assume. Et je ne pense pas que cela gêne tant que ça la lisibilité du reste, donc je vais me permettre de le laisser.

octopus984 a écrit :

* L'utilisation de <br> pour de la mise en page est à proscrire !

Oui, ben on me l'a déjà dit, seulement comment je fais les retours à la ligne sans des espaces trop grands comme ce serait le cas si je mettais un nouveau paragraphe à chaque retour à la ligne? Je rajoute des classes de paragraphe exprès? (J'imagine que oui, j'ai juste peur d'être perdue avec davantage de classes, déjà que j'en ai une dizaine rien que pour l'indentation de mes textes)

octopus984 a écrit :

La compatibilité avec IE (versions 6 à 8) est très bonne, il y a juste un décalage avec les versions d'IE<8 au niveau du titre des pages, lequel se trouve sous la grenouille.

Merci Smiley smile C'est cool, ça me rassure.

octopus984 a écrit :
Coââ-coââ !

Coâââ Coâââ aussi et merci pour le temps passé.
Modifié par Mag (01 May 2010 - 22:55)
Mag a écrit :
C'est noté, je vais y réfléchir mais je ne veux cependant pas saturer le visiteur de couleurs.
Tu peux utiliser ces couleurs pour souligner certains détails ou ajouter de la décoration (pour surligner des liens ou créer des bordures par exemple). Ton design en sera égayé, et ces modifications resteront discrètes.

Mag a écrit :
Quand tu parles du titre du site, je suppose que tu veux dire le titre de la page, qui est dans le div <h1>?
Oui, j'ai manqué de précisions, mais tu as compris l'idée : conserver ce titre sur chacune des pages en l'associant à l'image de la grenouille, afin de conserver l'identité tout au long des pages.

Mag a écrit :
Normalement c'est le cas, mais j'ai un souci avec mon script lightbox, tous mes boutons ne s'affichent pas correctement et je n'ai pas trouvé pourquoi.
Il y a une erreur dans le chemin de l'image utilisée pour le bouton de fermeture.

Mag a écrit :
Alors ça par contre ce n'est pas normal du tout! Peux-tu me donner un exemple précis ou une capture d'écran s'il te plaît? Cela m'aiderait aussi si tu m'indiquais quelle résolution tu utilises afin que je le corrige. Merci.
Ma résolution d'écran est de 1920x1080. Je viens d'inspecter le code du menu, et j'ai remarqué plusieurs incohérence :
1. Ton menu (ul#menu_site) est positionné en absolu. Son élément parent direct (div#menu) n'étant pas positionné, il devient inutile, tout comme le br et le paragraphe qui constituent ses deux premiers enfants.
2. La largeur du menu (ul#menu_site) est inutile aussi, car le contenu de la page (div#main) possède une marge fixe à gauche (de 237.5px : 25% de marge multiplié par les 950px de l'élément parent div#maglagrenouille). C'est d'ailleurs la largeur du menu qui crée le problème que je t'ai rapporté ; la supprimer règle le problème.
Il te faut par contre comprendre pourquoi le problème existe : les 15% de largeur que tu as spécifiée pour ton menu correspondent à 15% du dernier élément parent positionné (car ton menu est positionné, en absolu même). Dans ton cas, ton menu (ul#menu_site) a 4 éléments parents :
* l'élément div#menu (appelé parent direct)
* puis l'élément div#maglagrenouille
* vient ensuite l'élément body
* et enfin l'élément html
Aucun de ces quatre éléments n'étant positionné, les 15% s'appliquent donc à la largeur de la zone d'affichage du navigateur web. Avec un écran de 1920px de large, cela fait 288px, auxquels il faut ajouter les marges intérieures (padding) de ton menu.

Mag a écrit :
Oui, alors le doctype, c'est mon gros souci, je n'y pige rien, j'ai beau lire tous les tutos, y'a pas moyen que je m'y retrouve. Smiley decu
Il y a un article très bien rédigé dans la section Tutoriels.

Mag a écrit :
Si je fais une liste au lieu d'un tableau, je n'ai plus cette configuration particulière
Si, tu peux l'avoir. Tu t'arrêtes ici au rendu par défaut d'une liste dans les navigateurs, alors que ce rendu peut être modifié via les CSS. Ces liens de la page d'accueil ne sont en fait que le menu de ton site disposé différemment.
Voici ce que j'ai pu réaliser :
<ul id="index">
<li><a title="Textes personnels à partager" href="textes/index.php" style="top: 40%;">Textes</a></li>
<li><a title="Créations de couture" href="couture/index.php" style="top: 40%;">Couture</a></li>
<li><a title="Dessins crayon, bic ou encre" href="dessins/index.php" style="top: 30%;">Dessins traditionnels</a></li>
<li><a title="Page en construction" href="formation_deco/index.php" style="top: 30%;">Formation<br>décoration</a></li>
<li><a title="Présentation personnelle et professionnelle" href="about_me/index.php" style="top: 40%;">About Me</a></li>
<li><a title="Infographie et Sites web" href="info_info/index.php" style="top: 30%;">Infographie <br> web</a></li>
<li><a title="Dictons personnels" href="maximes_detournees/index.php" style="top: 30%;">Maximes détournées</a></li>
<li><a title="Crédits et liens" href="credits_liens/index.php" style="top: 40%;">Liens et Crédits</a></li>
<li><a title="Dollz, pixels, infographie miniature" href="dollz_pixels/index.php" style="top: 40%;">Dollz et pixels</a></li>
</ul>
Et le CSS qui va avec :
#index{
  border: dotted 1px #000;
  height: 387px;
  list-style-type: none;
  margin: 0 auto;
  padding: 1px;
  width: 387px;
}
#index li{
  border: dotted 1px #000;
  float: left;
  height: 125px;
  margin: 1px;
  text-align: center;
  width: 125px;
}
#index li a{
  position: relative;
}


Mag a écrit :
Ok, seulement si je les mets à la suite alors, parce que je ne veux pas les mettre en vertical Smiley smile
Tu as à ta disposition des propriétés CSS comme float:left ou display:inline qui vont t'y aider.

Mag a écrit :
Alors en fait, il s'agit de div dont les images sont placées sur la feuille CSS (j'ai vu au passage en lisant quelques posts que c'était fortement déconseillé). Ici, un des div contient mon roseau de droite (tu le vois au moins?) et l'autre ne contient rien, mais j'aime l'idée de pouvoir le remplir à n'importe quel moment.
Je passerai sur ta dernière remarque, pour mettre au clair l'utilisation des images : la présence ou non d'images au sein du code HTML (via la balise img) dépend de leur importance. Pour une illustration, ou un logo (ta magnifique grenouille par exemple), il est plus judicieux d'utiliser une balise image (avec un texte alternatif correctement renseigné), plutôt que la propriété CSS background. A l'inverse, un élément purement décoratif (comme ton roseau), sera entièrement créé en CSS.
Dans ton cas, il est possible de supprimer ton élément vide (div#extraDiv2), et d'indiquer le roseau comme étant le fond du corps de la page (élément body). On procédera alors de cette façon :
body{
  background: url(../img/roseau.png) no-repeat right bottom fixed;
}
La valeur fixed indique que le fond doit être immobile (indépendant du défilement à la souris).

Mag a écrit :
Oui, ben on me l'a déjà dit, seulement comment je fais les retours à la ligne sans des espaces trop grands comme ce serait le cas si je mettais un nouveau paragraphe à chaque retour à la ligne?
Encore une fois, tu te réfère au rendu par défaut des éléments HTML, alors qu'ils sont complètement modifiables via les CSS. Il suffit pour tes paragraphes de préciser les marges ; on peut imaginer par exemple ceci :
p{
  margin: 0 0 1em;
}


Bon courage dans ton apprentissage !
Modifié par octopus984 (02 May 2010 - 17:35)
Bonjour,

Il y aura certainement quelques redites, mais ça veux dire que c'est important Smiley cligne

Visuellement, il ne faudrait pas grand chose pour que ton site soit agréable sous IE6.

Niveau code :
* Tu ne précise pas la langue du document, ni via une meta ni dans html.

* Par contre tu as des meta en trop (qui ne servent absolument à rien et prennent de la place pour rien) : generator, Author, keyword.

* Ton title (celui dans head) n'est pas consistant sur toute les pages, sur la page d'accueil, il est indiqué "Accueil Mag la Grenouille", sur la page textes, il est indiqué "Texte - accueil- Mag la Grenouille" ; il serait préférable d'utiliser des tirets pour toutes tes pages.

* La meta description doit être unique pour chaque page du site et décrire le contenu de la page en cours (sauf pour la page d'accueil, où elle peut décrire le site complet).

* Il est préférable d'inclure les scripts (JS) en fin de document, ainsi le contenu de la page peut se charger avant son comportement.

* Le lien vers la page de news sur "Mag la Grenouille" n'est pas logique, on ne s’attend pas à ce qu'il se trouve ici. Principalement parce que le lien n'a pas l'air d'en être un.

* L'utilisation des tableaux n'est effectivement ni appropriée, ni nécessaire.

* L'utilisation de title sur les liens n'est pas une obligation (au contraire, elle est rarement nécessaire). Title peut être utilisé sur les liens pour apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Ce n'est pas le cas des titles dans ton menu général (et certainement sur d'autres liens). L'utilisation inappropriée de title créé des redondances désagréables pour le visiteur.

* Le soulignement DOIT être réservé aux liens ! (j'augmenterais bien la taille aussi, mais c'est pas possible).

* Ta hiérarchie des titres est fausse, elle commence à h3 alors qu'elle devrait commencer à h1 et ne pas comporter de sauts.

* Ligne 61 de la page textes/index.php, tu as un </p> qui se balade.

* Une liste pourrait être utilisée pour lister tes textes.

* Effectivement <br> n'est pas fait pour positionner les éléments. Il est préférable d'utiliser les margin et padding en CSS.

* Le traget=_blank est rarement une bonne idée. Le visiteur ne l'apprécie pas vraiment. Il est préférable de laisser le visiteur choisir le comportement que son navigateur doit adopter. Si tu tiens à laisser le target=_blank (T_T) indique au moins qu'une nouvelle page/onglet s'ouvrira.

* npp_logo80x15.png n'a pas de alt.
Avec un train de retard, merci pour vos commentaires et vos conseils. Je me remets au boulot.
Sujet clos
Aller à