3239 sujets

Critiques de vos sites: code et design

[Amateur] www.valentinpanisset.fr

Bonjour à toutes et à tous,

Grace à quelques bon tips que j'ai lus sur le site, j'ai pus obtenir un site qui tiens relativement bien debout. Il représente comme marqué dans le titre mon portfolio de l'année. (regroupant 3D, 2D photo etc... )
Je suis actuellement étudiant en CG. et compte me faire aider par un site internet agréable et qui puisse acceder à un statu de pro. Seulement je n'ais pas encore l'oeil d'un pro et je souhaiterais que vous m'aideriez ( via les remarques, on y vient ) à améliorer mon site web.

Il est a noté qu'il vient de naitre et que je compte plus sur vous pour me faire des remarques sur le visuel design du web plutot que de ce qu'il contient ( parsque ceci évoluera très rapidement, une base solide pour un beau batiment Smiley biggrin )

Voila, voici le lien :

www.valentinpanisset.fr

( merci et à bientot )

Valentin Panisset
Modifié par valentinpanisset (13 Jun 2012 - 12:08)
Salut,

Perso, je me suis arrêté au premier chargement...

le code HTML est servi en 235ms (très correct), mais pour ce qui est des ressources... 11.78s (onload: 11.78s)

en moyenne, tes images charge entre 1 et 5 secondes chacune, et ton image de fond 10 secondes Oo faut optimiser ça absolument!
Salut, quelques remarques rapidement :

La navigation n'est pas du tout intuitive, il faudrait la simplifier. Cliquer 2 fois pour changer de page, c'est une fois de trop.

Sur le code HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Pourquoi ce doctype ? Et l'attribut xmlns c'est seulement avec un doctype XHTML il me semble.

La meta keywords est inutile.

<p class="come">Valentin Panisset</p>

Un titre n'est pas un paragraphe. L'élément h1 serait plus approprié.


Sur le code CSS :

body {
  margin:0px;
  padding:0px;

L'unité est inutile quand la valeur est 0.


#header {
  position: absolute;

A mon avis la position absolute n'est pas nécessaire. Les éléments block prennent par défaut toute la largeur disponible.


#contentindex {
  display: block;

Pas besoin de préciser, l'élément div est block par défaut.
Modifié par maximemixam (13 Jun 2012 - 12:09)
Merci de vos réponses,

Le problème de doctype est résolus, j'ai choisit un xhtml1, ( je n'ai pas vraiment vu une différence variable avec le html4 )

j'ai pus changer quelques données sur le css ( enlever les "px" et les display:block inutiles, etc )
je vais aussi m'occuper de l'optimisation des images
( je pensais que l'optimisation était bonne, [j'ai une connection assez bien pour un chargement rapide] c'est bien de le savoir )

et mise a part la taille des images, y a t'il d'autres maneouvre a faire pour gagner en temps de chargement?

Je suis toujours ouvert à d'autres bonne remarques aussi Smiley biggrin
Il n'y avait aucun problème avec le doctype html4.01... C'est, je pense, le mode transitional qui était pointé du doigt. Si c'est bien ce qui était visé, la remarque était inapropriée, puisque pour garder un code valide en utilisant une iframe il faut, effectivement, un doctype transitionel. Si je me trompe et que c'était le HTML4 qui était pointé, la remarque est tout aussi inapropriée...


Passer en XHTML sans savoir quelle est la différence entre les deux n'est pas une bonne idée. D'autant que 
<meta http-equiv="Content-type" content="text.html; charset=utf-8" />
Indique que le code est en HTML et non en XHTML.


Visuellement, le site me rebute : sur petit écran (1024) le contenu au dessus du fold ne donne pas envie de scroller et la navigation est vraiment pas intuitive (et la première étape est sans grand intérêt). Tu va perdre des visiteurs avec elle. Il vaudrait mieux quelque chose de simple et efficace.


Pour le code :
* Comme déjà dit le doctype XHTML ne se justifie pas.

* Il manque la balise ouvrante de html. Et une déclaration de la langue de la page qui se fait sur cette balise.

* La meta keywords ne sert à rien (à part aider google à placer ses publicités contextuelles sur ton site, ce que tu n'as pas).

* L'auto citation dans la meta description c'est original, mais pas forcément une bonne idée. La seule utilité de cette meta est d'être affichée, si pertinente, dans les pages de résultats des moteurs de recherche. Cette meta doit décrire la page et être sexy.

* 6 scripts JS dans le header, c'est enorme. Ces scripts devraient être combinés dans un seul fichier et placés en fin de document.

* Ton utilisation de alt sur les images n'est pas correcte. alt doit retranscrire le contenu de l'image; quand l'image est décorative, le alt doit être laissé vide; mais quand l'image porte du contenu (textuel ou non) le alt doit reprendre le même contenu.
Merci Laurie-Anne, réponses très pertinente Smiley smile . Ce qui va m'aider a encore plus comprendre le web. Je ne suis pas un grand codeur mais je préfere qu'on m'en dise gros plutot que faire semblant.
Je sais qu'il y a pas mal de faux pas dans mon code et je me suis ouvert a la critique pour qu'on me remette à ma place.

( ps: j'avais justement choisis le xhtml parsqu'il m'avait l'air plus ouvert aux iframes, je vais donc rechanger en html4.01 parsque oui, j'ai une méta qui indique un html .... Smiley sweatdrop )

*Doctype en html corrigé.

*Balise html réintroduite.

*j'avais entendus qu'elle servait au référencement, et en effet, j'ai vus avec des recherches qu'elles servent à ciblé la pub, donc supprimées.

*pour la méta description, dans un sens, je ne pense pas que les visiteurs viendrons par hasard sur mon site, mais plus en ayant entendu parler de ce que je fais. amis, agences etc... je vais quand meme les repenser...

*Placer les js en fin de doc, je vais m'en occuper pour les mettres en fin de code.
une question: pour les combiner, j'imagine que je devrais les remaniés afin qu'elles soient compatible dans un seul fichier? ou idiliquement, je fais un copié collé de tous dans un seul...

*Je vais revoir tout mes alt à toutes mes images.

Quand à ma page index, je l'a redessinerais après avoir changé ces points important, mais merci de l'info.
ps: je vais alleger aussi la taille des images ..
valentinpanisset a écrit :
Placer les js en fin de doc, je vais m'en occuper pour les mettres en fin de code.
une question: pour les combiner, j'imagine que je devrais les remaniés afin qu'elles soient compatible dans un seul fichier? ou idiliquement, je fais un copié collé de tous dans un seul...
Nope, un bon vieux copier coller est suffisant ; la seule condition c'est qu'ils soient bien à la suite des autres et pas collés les uns dans les autres Smiley cligne
Merci Laurie-Anne (encore Smiley smile ), j'essarais de les regroupé un peu plus tard, en attendant je les ais placés à la fin du code, et j'ai également optimsé la taille de mes images.
Et je dois croire que maintenant, c'est plutot bon, non ?
valentinpanisset a écrit :
Et je dois croire que maintenant, c'est plutot bon, non ?


Tu peux tester avec des outils comme Page Speed (sur lequel tu obtiens une note de 73 sur 100, ce qui est plutôt mauvais).
Merci pour le tuyau jb,

J'ai réussi à faire monter la note à 94~95, J'imagine que maintenant c'est bien correcte non?
( Vous m'avez plutot bien aidé quand meme... et je dois encore remanier mon index je sais Smiley cligne )


Je suis tout ouïe à d'autres remarques Smiley smile
Sujet clos
Aller à