Bonjour tout le monde,

J'ai crée un site web que je devrais mettre en avant pour trouver un contrat pro, il est terminé à 70% on va dire, le formulaire ne fonctionne pas pour le moment et j'ai pas trop d'idée de mise en forme.

Donc je vous demande de critiquer mon site, code, design etc et soyez sévère s'il vous plait, toute les critiques seront constructives pour ma part Smiley smile

Mon site web
Modifié par xorcist (20 Jan 2012 - 15:39)
salut..

pas trop le temps pour le moment... mais au moins j'ai rapidement jeter un coup d'oeil...

La première chose.... il te faut des cours d'orthographe !!!!!

Pour le reste je reviendrai plus tard... Smiley cligne
Bonjour Mounir,

Rapidement aussi,
l'ensemble manque de peps, mais vraiment pas grand chose.
Tu es parti sur un système grille, je ne peux qu'approuver, pour une première réalisation en tout cas, tu abordes la chose avec les bons réflexes.

Coté Css, tu perds du temps, exemple ton menu :
<header id="nav_head" >
          <nav id="menu_top" class="grid_12">
            <ul class="nav">
              <li><a href="index.php">Accueil</a></li>
              <li><a href="index.php?p=formation">Formation</a></li>
              <li><a href="index.php?p=realisations">Réalisations</a></li>
              <li><a href="index.php?p=experience">Experience</a></li>
              <li><a href="index.php?p=contact">Contact</a></li>
              <li><a href="index.php?p=apropos">A propos</a></li>
            </ul>
          </nav>
          <hr>
        </header>


Pourrait aisément devenir
<header id="nav_head" >
          <nav class="grid_12">
            <ul>
              <li><a href="index.php">Accueil</a></li>
              <li><a href="index.php?p=formation">Formation</a></li>
           ...
            </ul>
          </nav>
          <hr>
        </header>


et tu attaques l'ensemble via ton id #nav_head
exemple :
#nav_head nav ul li a { pouetpouet: prout;}


Mais ce n'est que de l'optimisation.

je repasse plus tard pour le reste.
Salut,

Benh franchement ... pour un premier essai c'est plutôt réussi (je parle au niveau du code et du respect de la sémantique).

Au niveau design personnellement je n'accroche pas trop mais c'est une remarque tout à fait subjective. Ce qui l'est moins par contre c'est le rythme de ton texte. Ou plutôt l'absence de rythme.

Je m'explique; dans la page d'accueil par exemple, dans la partie « Parcours » il n'y a pas de partie qui ressort du lot. Je veux dire par là que le titre « Formation » aurait du se trouver plus près de son contenu. Là il est à égal distance de son contenu et du contenu du haut, résultat tout se mélange un peu. Tu m'as compris ? (Si oui félicitation !^^). Si tu veux une approche plus théorique de ce que je te raconte je te conseil d'aller te renseigner sur la loi de Gestalt et plus particulièrement la loi de la proximité. C'est fort pratique d'avoir ça en tête quand on conçoit des design et qu'on tend vers une approche un minimum ergonomique. De plus ça facilite la lecture. Ce problème revient ponctuellement sur le site.

Un autre problème visuel (et ergonomique) est que tes liens (par exemple « Lire la suite ») sont sur le même plan visuel que ton texte de labeur. Résultat quand on regarde la page on ne sait pas ce qui est cliquable et ce qui ne l'est pas. De plus il n'y a pas non plus de hover sur ceux-ci ce qui renforce ce manque d'affordance.

Pour continué sur la visibilité je vais faire une critique qui est totalement subjective mais qui me semble pertinente et qui n'est malheureusement pas pris en compte par les webdesigner (c'est tout à fait le contraire même).

Le corps de ta police est en 13px, je sais pas pourquoi mais les webdesigner trouvent que plus c'est petit, plus c'est classe. C'est à discuter. Mais ce que je me dis c'est que les résolutions sont de plus en plus grandes et la contrainte de mettre du texte en petite taille n'a plus lieu d'être aujourd'hui. Nous pouvons enfin faire des sites aérés et lisibles en profitant d'une police avec un corps un peu plus grand. D'une part ceux qui ont une petite résolutions pourront profiter d'une police pas trop dégueu, et les grandes résolutions ne devront plus plisser les yeux afin de déchiffrer ce qui est écris. Les périphériques évoluent et je pense que le design doit suivre la tendance. Enfin voilà pour la remarque totalement subjective.

Sinon au niveau du code, tu peux enlever :
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Plus besoin de ça en HTML5 de plus tu défini déjà ton charset la ligne plus haut. Google ne prend plus en compte les meta keywords mais je sais pas pour les autres moteur de recherche. Tu pourrais largement rassembler tout tes fichiers CSS en un seul ça t'éviterai des requêtes inutiles.

Si tu veux un référencement optimal tu dois mettre un title et une description différente à chaque page.

En espérant t'avoir fourni quelques pistes Smiley smile
Modifié par Gili (20 Jan 2012 - 12:55)
Sur FF, c'est pas mal =)
J'ai un petit souci sur IE8

upload/42565-Apercu.png

Dans Expérience > 2001-2004
Il y a trois puces pour une seule avec du contenu :o
@Laurie-Anne : désolé, je viens de corriger merci pour le rappel.

@Gothor merci bcp je vais regarder ce que je peu changer pour qu'IE veuille bien coopérer ^^

@Gili merci infiniment pour tes remarques et tes conseils, je vais justement aller me documenter sur la loi de Gestalt, la police est par défaut je ne trouve pas ça jolie non plus, il faudrait que je change de police.
J'ai flashé sur des polices style "mac" mais bon je trouve pas pour le moment l’équivalent pur windows.

@fufu big up à toi, merci pour ton conseil je vais l'utiliser et aérer tout ça.

gros gros merci à vous tous pour vos conseils et critiques grandement appréciés.

Smiley biggrin Smiley biggrin
Hello,

Je suis pas sûr que ce soit vraiment intéressant d'exposer tout le programme des cours que tu souhaite suivre. Ça fait beaucoup d'information, mais est-elle vraiment nécessaire?
Bonjour Anymah,
tu marque un point, d'autant plus que je me posais la question pas plus tard qu'hier, je trouve que la page est trop chargé d'informations pas nécessaires du tout.

Je vais faire, je penses, un lien vers cette page si l’intéressé désire les connaitre.

Merci de ton point de vue Smiley smile