3241 sujets
Critiques de vos sites: code et design
Waw, comment dire...çà va pas du tout.
J'ai trop de chose à dire mais pour moi le principal, c'est pourquoi un aussi GRAND site alors qu'il y a rien dedans ?
C'est pas un reproche de pas avoir de contenu, mais tout doit être plus petit !
Voila pour toi mon kit spécial, tu as de quoi faire (ps : c'est pas sur smashing magazine qu'il faut aller)
http://skout.co.za/ (général)
http://www.typechart.com/ (typo)
http://960.gs/ (pour la grille)
Au fait, évite de passer par des générateurs en ligne ou je ne sais quoi, la meilleur solution, c'est le "enregistrer pour le web" sur Photoshop. Même ton image pour remonter en haut est dégueu...
Les arrondies sont affreux, beaucoup trop, çà coupe ta typo en plus.
Si tu t’intéresses au embriquement, va voir http://masonry.desandro.com/
Je j'étais toi, je reprendrai TOUT le contenu texte, je le mettrai sans mise en forme dans une nouvelle page html, et puis tu verras que c'est déjà plus lisible, et plus sérieux.
(je viens de le faire et je confirme)
J'ai trop de chose à dire mais pour moi le principal, c'est pourquoi un aussi GRAND site alors qu'il y a rien dedans ?
C'est pas un reproche de pas avoir de contenu, mais tout doit être plus petit !
Voila pour toi mon kit spécial, tu as de quoi faire (ps : c'est pas sur smashing magazine qu'il faut aller)
http://skout.co.za/ (général)
http://www.typechart.com/ (typo)
http://960.gs/ (pour la grille)
Au fait, évite de passer par des générateurs en ligne ou je ne sais quoi, la meilleur solution, c'est le "enregistrer pour le web" sur Photoshop. Même ton image pour remonter en haut est dégueu...
Les arrondies sont affreux, beaucoup trop, çà coupe ta typo en plus.
Si tu t’intéresses au embriquement, va voir http://masonry.desandro.com/
Je j'étais toi, je reprendrai TOUT le contenu texte, je le mettrai sans mise en forme dans une nouvelle page html, et puis tu verras que c'est déjà plus lisible, et plus sérieux.
(je viens de le faire et je confirme)
Salut,
Sur Firefox (V3.6), ton menu est buggé :
Je rejoins les critiques formelles de Oziris, notamment sur les images, sur les dégradés CSS3 et surtout sur la gestion des arrondis. CSS3 c'est sympa mais pour le coup on sent qu'il manque un vrai maquettage sur un outil de PAO. Il y a plein de choses pas cohérentes dans ton design, comme la gestion de la typo par rapport aux conteneurs : ça ne respire pas, parfois certains textes sont tout collés sur les bords des conteneurs ; voir même dès fois ils dépassent carrément, par exemple dans le menu de navigation (sur Safari et Firefox en tout cas).
On pourrait se poser la question de l'utilité de ton menu : en ergonomie,la logique voudrait que ce qui permet de naviguer dans ton document devrait être visible en permanence.
Ici le menu, on va l'utiliser une première fois, par exemple pour descendre au bloc « News » (qui au passage s'appelle comme ça dans le menu, mais pas dans son bloc…
), et comme on n'aura plus d'élément de navigation on sera obligé de scroller vers le haut ou le bas pour essayer de trouver ce qu'on cherche. Ou sinon on cliquera sur le droide (dont l'affordance est discutable) pour remonter et ensuite redescendre. Ergonomiquement c'est à revoir.
Parlons-en du droide : si je suis en haut de page et (disons que je suis pas trop paresseux) que je lis ton instruction, je devrais voir un droide sur le côté droit… Ben y a rien car il n'apparaît pas lorsqu'on est en haut ! …déjà qu'un droide c'est discutable en tant qu'élément de navigation, alors si en plus c'est un droide invisible !
Edit : en fait il ne disparaît que lorsque l'on remonte (sur Safari, pas sur FF), donc j'ai rien dit.
Donc autant visuellement qu'ergonomiquement, ta page ne fonctionne pas. Je te conseille de suivre ceux de Oziris pour le design, et de voir les bases théoriques de l'ergonomie des interfaces (c'est pas pour faire de la pub pour un fameux bouquin sur le sujet mais à mon avis tu gagnerais à le lire, surtout vu le cursus que tu suis
)
Maintenant côté technique, quelques petites babioles :
— ton <title> est vide et la <meta /> charset devrait arriver en premier ;
— les styles spécifiques en commentaires conditionnels devraient être externalisés ;
— en HTML5 on peut éventuellement trouver le menu de navigation dans l'élément <header> général (bien que je préfère qu'il soit en dehors…), mais avant tout, on devrait y trouver le titre du document ;
— quitte à être en HTML5, ce serait cool d'utiliser les roles, non
— les éléments textuels en blanc semblent constituer des portions de texte importantes. Il faudrait donc utiliser des balises HTML d'emphase et/ou de renforcement pour les baliser correctement ;
— plutôt qu'utiliser un <object> pour ta galerie, perso je verrais mieux un simple diaporama javascript qui aurait l'avantage (si bien fait) de bien se dégrader en cas de non présence de JS sur la machine ;
— dans la partie « Mes plus », je vois bien un lien de téléchargement (qui devrait être balisé dans un paragraphe) mais dans la liste ordonnée en dessous j'ai l'impression que je peux télécharger d'autres documents à cause de l'effet de survol (on revient à l'ergonomie avec la grosse affordance au clic des éléments qui sont différents lorsqu'on les survole…) ;
— ptit plus : ça aurait été cool de trouver des microformats sur tes coordonnées en bas de page
En espérant avoir été suffisamment constructif dans mes critiques, je te souhaite une bonne continuation
Modifié par audrasjb (15 Aug 2011 - 14:42)
Sur Firefox (V3.6), ton menu est buggé :
Je rejoins les critiques formelles de Oziris, notamment sur les images, sur les dégradés CSS3 et surtout sur la gestion des arrondis. CSS3 c'est sympa mais pour le coup on sent qu'il manque un vrai maquettage sur un outil de PAO. Il y a plein de choses pas cohérentes dans ton design, comme la gestion de la typo par rapport aux conteneurs : ça ne respire pas, parfois certains textes sont tout collés sur les bords des conteneurs ; voir même dès fois ils dépassent carrément, par exemple dans le menu de navigation (sur Safari et Firefox en tout cas).
On pourrait se poser la question de l'utilité de ton menu : en ergonomie,la logique voudrait que ce qui permet de naviguer dans ton document devrait être visible en permanence.
Ici le menu, on va l'utiliser une première fois, par exemple pour descendre au bloc « News » (qui au passage s'appelle comme ça dans le menu, mais pas dans son bloc…
), et comme on n'aura plus d'élément de navigation on sera obligé de scroller vers le haut ou le bas pour essayer de trouver ce qu'on cherche. Ou sinon on cliquera sur le droide (dont l'affordance est discutable) pour remonter et ensuite redescendre. Ergonomiquement c'est à revoir.Parlons-en du droide : si je suis en haut de page et (disons que je suis pas trop paresseux) que je lis ton instruction, je devrais voir un droide sur le côté droit… Ben y a rien car il n'apparaît pas lorsqu'on est en haut ! …déjà qu'un droide c'est discutable en tant qu'élément de navigation, alors si en plus c'est un droide invisible !
Edit : en fait il ne disparaît que lorsque l'on remonte (sur Safari, pas sur FF), donc j'ai rien dit.
Donc autant visuellement qu'ergonomiquement, ta page ne fonctionne pas. Je te conseille de suivre ceux de Oziris pour le design, et de voir les bases théoriques de l'ergonomie des interfaces (c'est pas pour faire de la pub pour un fameux bouquin sur le sujet mais à mon avis tu gagnerais à le lire, surtout vu le cursus que tu suis
)Maintenant côté technique, quelques petites babioles :
— ton <title> est vide et la <meta /> charset devrait arriver en premier ;
— les styles spécifiques en commentaires conditionnels devraient être externalisés ;
— en HTML5 on peut éventuellement trouver le menu de navigation dans l'élément <header> général (bien que je préfère qu'il soit en dehors…), mais avant tout, on devrait y trouver le titre du document ;
— quitte à être en HTML5, ce serait cool d'utiliser les roles, non
— les éléments textuels en blanc semblent constituer des portions de texte importantes. Il faudrait donc utiliser des balises HTML d'emphase et/ou de renforcement pour les baliser correctement ;
— plutôt qu'utiliser un <object> pour ta galerie, perso je verrais mieux un simple diaporama javascript qui aurait l'avantage (si bien fait) de bien se dégrader en cas de non présence de JS sur la machine ;
— dans la partie « Mes plus », je vois bien un lien de téléchargement (qui devrait être balisé dans un paragraphe) mais dans la liste ordonnée en dessous j'ai l'impression que je peux télécharger d'autres documents à cause de l'effet de survol (on revient à l'ergonomie avec la grosse affordance au clic des éléments qui sont différents lorsqu'on les survole…) ;
— ptit plus : ça aurait été cool de trouver des microformats sur tes coordonnées en bas de page
En espérant avoir été suffisamment constructif dans mes critiques, je te souhaite une bonne continuation
Modifié par audrasjb (15 Aug 2011 - 14:42)
Pour moi ton site est plutôt le travail d'une débutant ;
- pas de cohérence graphique, des images récupérées par ci par là sans rapport avec le contenu, pas le logo. N'utilises pas les images dont tu n'as pas les droits.
- un message trop vague et pas adapté commercialement. Si tu veux être chef de projet, explicites le directement et expliques quelles sont tes qualités pour parvenir à ton objectif. Un recruteur ne sera pas intéressé par tout ce qui vient parasiter ton site.
- les éléments sont disposés sans cohérence
- pas de cohérence graphique, des images récupérées par ci par là sans rapport avec le contenu, pas le logo. N'utilises pas les images dont tu n'as pas les droits.
- un message trop vague et pas adapté commercialement. Si tu veux être chef de projet, explicites le directement et expliques quelles sont tes qualités pour parvenir à ton objectif. Un recruteur ne sera pas intéressé par tout ce qui vient parasiter ton site.
- les éléments sont disposés sans cohérence
jmlapam a écrit :
Bah oui c moi ce bon vieux Walt.
Plus serieusement, j'ai reproduit une illustration a la plume toshop. Jai mis un sacré temps! Le reste des images sont soient créés soit libres.
reproduit ou pas, tu n'as aucun droit de mettre ce genre d'images sur ton site. Et ce n'est pas gage de sérieux.
Modifié par bzh (15 Aug 2011 - 19:33)
Laurie-Anne a écrit :
C'est sympa pour les gens qui étaient en week end de se retrouver devant une page quasi blanche.
Je ferme ou je ferme ?
Exact, toutes mes excuses, j'y ai pas pensé, jai déjà eu tellement de remarques justes, vraiment désolé, je comptais remettre un nouveau site utilisant le boilerplate mais d'ici là, y aura page blanche.
Jai que mon smartphone là. Libre a vous de fermer en effet, je reproposerai un vrai projet à la rentrée.
Bonjour,
J'ai jeté un coup d'oeil sur le site.
-Je comprend pas pourquoi il y a un scroll vertical sur toutes les pages, mêmes celle qui n'en ont pas besoin?(accueil notamment)
-Si j'ai bien compris, tu veux montrer ce que tu sais faire avec le site. Bah pour moi, c'est juste 4 pages html (avec un bout de php pour le formulaire), avec certaines pas valides W3C (contact). C'est pas bien épais tout ça...
-CSS pas valide, plus de 20 erreurs
-La police counter, déjà on s'en moque un peu, mais en plus ça fait pas du tout sérieux!
-Avoir le toeic, ça veut rien dire, c'est le résultat qui compte (supérieur à 800 sinon ça sert à rien).
-J'aurai plutôt mis deux versions différentes du site, une en anglais, une en français parce que les deux mélangées, c'est pas terrible.
Voilà pour mes remarques
J'ai jeté un coup d'oeil sur le site.
-Je comprend pas pourquoi il y a un scroll vertical sur toutes les pages, mêmes celle qui n'en ont pas besoin?(accueil notamment)
-Si j'ai bien compris, tu veux montrer ce que tu sais faire avec le site. Bah pour moi, c'est juste 4 pages html (avec un bout de php pour le formulaire), avec certaines pas valides W3C (contact). C'est pas bien épais tout ça...
-CSS pas valide, plus de 20 erreurs
-La police counter, déjà on s'en moque un peu, mais en plus ça fait pas du tout sérieux!
-Avoir le toeic, ça veut rien dire, c'est le résultat qui compte (supérieur à 800 sinon ça sert à rien).
-J'aurai plutôt mis deux versions différentes du site, une en anglais, une en français parce que les deux mélangées, c'est pas terrible.
Voilà pour mes remarques
Il me semble tout de même que border-radius est finalisée (en autres...)
J'ai bien compris que tu voulais faire simple mais bon, là franchement, tout le monde (ou presque) sait faire ce que tu as fait...Tu aurais pu mettre 2-3 trucs originaux (jquey, c'est la mode apparemment dans le domaine des web-designers
), histoire de prouver que tu pouvais être un peu original, je veux dire par là te démarquer un peu.
Et puis je pense que pour trouver un stage/emploi plus facilement, avoir quelques sites réaliser peut être vraiment bien, voir indispensable. Cherches un peu du côté des associations ou dans ton entourage, je suis sûr que certains seraient content d'avoir un site...
Pour le scroll, j'ai pas compris l'intérêt du tout, si tu souhaites le garder il doit y en avoir un. En tout cas je l'ai pas saisit.
J'ai bien compris que tu voulais faire simple mais bon, là franchement, tout le monde (ou presque) sait faire ce que tu as fait...Tu aurais pu mettre 2-3 trucs originaux (jquey, c'est la mode apparemment dans le domaine des web-designers
), histoire de prouver que tu pouvais être un peu original, je veux dire par là te démarquer un peu.Et puis je pense que pour trouver un stage/emploi plus facilement, avoir quelques sites réaliser peut être vraiment bien, voir indispensable. Cherches un peu du côté des associations ou dans ton entourage, je suis sûr que certains seraient content d'avoir un site...
Pour le scroll, j'ai pas compris l'intérêt du tout, si tu souhaites le garder il doit y en avoir un. En tout cas je l'ai pas saisit.