3240 sujets
Critiques de vos sites: code et design
Bonsoir Antoine,
Visuellement, ya un truc qui cloche,
- Le logo, le rapport de contraste est très faible, j'estime avoir une bonne vue, et je ne l'avais pas remarqué.
- Le design, j'accroche pas du tout avec ta barre latérale effet dentelé, on dirait qu'elle est pas à sa place, comme s'il y avait un positionnement douteux derrière.
- Tes textes supporteraient une petite augmentation et un interlignage en conséquence.
- Penses à ta Baseline aussi dans ta page profil, le texte à droite de ton avatar est a vue de nez 20px trop bas, alors qu'il est correct dans ta page "compétences".
Dans tes compétences, ton image de "niveaux" est semble t'il en background alors qu'elle est porteuse d'informations.
Sinon, tes effets sont légers, tes pages sont claires, on sait qui tu es et ce que tu vends.
Bon courage pour la suite.
EDIT : Je viens de voir ce genre de chose
Du coup toute ton accroche n'est absolument pas vue par les moteurs de recherche.
Pourquoi ne pas utiliser une balise H1 avec un text-indend à -9999px ou même mettre une image dans ton H1 avec un Alt reprenant ton argumentaire ?
Modifié par fufu (22 Jan 2012 - 02:37)
Visuellement, ya un truc qui cloche,
- Le logo, le rapport de contraste est très faible, j'estime avoir une bonne vue, et je ne l'avais pas remarqué.
- Le design, j'accroche pas du tout avec ta barre latérale effet dentelé, on dirait qu'elle est pas à sa place, comme s'il y avait un positionnement douteux derrière.
- Tes textes supporteraient une petite augmentation et un interlignage en conséquence.
- Penses à ta Baseline aussi dans ta page profil, le texte à droite de ton avatar est a vue de nez 20px trop bas, alors qu'il est correct dans ta page "compétences".
Dans tes compétences, ton image de "niveaux" est semble t'il en background alors qu'elle est porteuse d'informations.
Sinon, tes effets sont légers, tes pages sont claires, on sait qui tu es et ce que tu vends.
Bon courage pour la suite.
EDIT : Je viens de voir ce genre de chose
<div id="intro">
<div id="hey"></div>
</div>Du coup toute ton accroche n'est absolument pas vue par les moteurs de recherche.
Pourquoi ne pas utiliser une balise H1 avec un text-indend à -9999px ou même mettre une image dans ton H1 avec un Alt reprenant ton argumentaire ?
Modifié par fufu (22 Jan 2012 - 02:37)
Salut Yvan !
- Pour le logo je vais essayer de faire quelque chose, même si moi je le vois très bien
- Pour la barre latéral soit on aime soit on aime pas.
- Pour ce qui est des textes et des images en background qui contiennent du contenu, je vais arranger ça très vite !
Bonne continuation à toi aussi
- Pour le logo je vais essayer de faire quelque chose, même si moi je le vois très bien
- Pour la barre latéral soit on aime soit on aime pas.
- Pour ce qui est des textes et des images en background qui contiennent du contenu, je vais arranger ça très vite !
Bonne continuation à toi aussi
salut,
c'est plutôt clair et propre. je partage l'avis de "fufu" concernant la barre 'dentelée', on a vraiment le sentiment qu'elle n'est pas à sa place dans l'interface.
par contre ce qui me gène c'est le formulaire.
- trop de champs je trouve : prénom, bof quel intérêt ? et peut être que nom et société sont redondants. tu pourrais mettre 'nom du contact ou de la société'. je pense que l'adresse éventuelle du site internet n'est pas non plus nécessaire. tu retrouveras le domaine certainement dans l'adresse mail si le contact en possède un, ou il mettra cette dernière dans le message s'il désire que tu le consultes. comme ça moins de champs, formulaire remplit plus facilement.
ensuite, pour les erreurs de saisies tu devrais mieux définir le processus. après validation et si problème on ne sait pas quel(s) est (sont) le(s) problème(s) et surtout on perd la saisie après le reload de la page. pas bon du tout ça.
voilà sinon bon travail, et bonne continuation.
c'est plutôt clair et propre. je partage l'avis de "fufu" concernant la barre 'dentelée', on a vraiment le sentiment qu'elle n'est pas à sa place dans l'interface.
par contre ce qui me gène c'est le formulaire.
- trop de champs je trouve : prénom, bof quel intérêt ? et peut être que nom et société sont redondants. tu pourrais mettre 'nom du contact ou de la société'. je pense que l'adresse éventuelle du site internet n'est pas non plus nécessaire. tu retrouveras le domaine certainement dans l'adresse mail si le contact en possède un, ou il mettra cette dernière dans le message s'il désire que tu le consultes. comme ça moins de champs, formulaire remplit plus facilement.
ensuite, pour les erreurs de saisies tu devrais mieux définir le processus. après validation et si problème on ne sait pas quel(s) est (sont) le(s) problème(s) et surtout on perd la saisie après le reload de la page. pas bon du tout ça.
voilà sinon bon travail, et bonne continuation.
Bonjour,
Visuellement, pourquoi pas, ce n'est pas très original, mais c'est réalisé proprement.
Pour le code... C'est une autre affaire. Tu fais clairement de la divite aigüe :
Dans ton head, tu as de nombreuses méta inutiles : keywords, robots (valeurs par défaut); author, rating, refresh (pour perdre des visiteurs, c'est le top) et les og. Ça prend de la place pour rien.
Il serait préférable de combiner tes scripts JS au possible, afin de limiter le nombre d'appel serveur ; et de les placer en fin de document, afin de laisser le contenu se charger en premier.
Comme déjà dit, pour ton image d'intro, il est inutile d'utiliser les deux techniques évoquées par fufu. L'image et son alt sont suffisants. Accessoirement, il est tour à fait possible d'encadrer une image d'un Hn, afin de donner à son alt le "poids" du Hn. Même si, ici, le h1 ne se justifie pas. Le contenu de l'image n'étant pas un titre de section (ton logo_header, pourrait l'être par contre, pour la page d'accueil). EDIT : le font-size:0 utilisé sur logo_header, c'est tout aussi débile que le reste comme technique.
Le reste de ta hiérarchie des titres n'est pas tout à fait correcte, elle devrait être diminuée d'une niveau (les h1 sont des h2).
Le target blank, c'est le meilleurs moyen de perdre des visiteurs, qui n'apprécieront pas l'ouverture intempestive de fenêtre/onglet et qui risquent fort de fermer le site d'origine (et donc de perdre l'historique de navigation). Les gens savent se servir du bouton retour et du clic molette. Laisse leur gérer leur navigation comme ils l'entendent.
Dans l'ensemble, niveau code, j'ai une impression de bidouillage sans prise en compte de l'accessibilité, ni du référencement (que les les robots ne voient pas, ils ne l'indexent pas). Il faut vraiment que tu évites de masquer des contenu en CSS comme tu le fais actuellement.
fufu a écrit :Surtout ne pas utiliser la première solution qui pose tout autant de problème aux humains (si l'image ne s'affiche pas, le contenu est innaccessible ; et une image qui ne s'affiche pas, ça frappe tout le monde, à l'improviste). La seconde solution est effectivement à mettre en place.
Pourquoi ne pas utiliser une balise H1 avec un text-indend à -9999px ou même mettre une image dans ton H1 avec un Alt reprenant ton argumentaire ?
Visuellement, pourquoi pas, ce n'est pas très original, mais c'est réalisé proprement.
Pour le code... C'est une autre affaire. Tu fais clairement de la divite aigüe :
<div id="wrapper">
<div id="header">
<div class="wrap">
<a href="http://www.antoine-courtin.fr/" class="logo_header">Antoine Courtin</a>
<div id="nav">
<ul class="nav">
<li><a href="index.php" class="active">portfolio</a></li>
<li><a href="competences/">compétences</a></li>
<li><a href="profil/">profil</a></li>
<li><a href="contact/">contact</a></li>
</ul>
</div>
</div>
</div>
Dans ton head, tu as de nombreuses méta inutiles : keywords, robots (valeurs par défaut); author, rating, refresh (pour perdre des visiteurs, c'est le top) et les og. Ça prend de la place pour rien.
Il serait préférable de combiner tes scripts JS au possible, afin de limiter le nombre d'appel serveur ; et de les placer en fin de document, afin de laisser le contenu se charger en premier.
Comme déjà dit, pour ton image d'intro, il est inutile d'utiliser les deux techniques évoquées par fufu. L'image et son alt sont suffisants. Accessoirement, il est tour à fait possible d'encadrer une image d'un Hn, afin de donner à son alt le "poids" du Hn. Même si, ici, le h1 ne se justifie pas. Le contenu de l'image n'étant pas un titre de section (ton logo_header, pourrait l'être par contre, pour la page d'accueil). EDIT : le font-size:0 utilisé sur logo_header, c'est tout aussi débile que le reste comme technique.
Le reste de ta hiérarchie des titres n'est pas tout à fait correcte, elle devrait être diminuée d'une niveau (les h1 sont des h2).
Le target blank, c'est le meilleurs moyen de perdre des visiteurs, qui n'apprécieront pas l'ouverture intempestive de fenêtre/onglet et qui risquent fort de fermer le site d'origine (et donc de perdre l'historique de navigation). Les gens savent se servir du bouton retour et du clic molette. Laisse leur gérer leur navigation comme ils l'entendent.
Dans l'ensemble, niveau code, j'ai une impression de bidouillage sans prise en compte de l'accessibilité, ni du référencement (que les les robots ne voient pas, ils ne l'indexent pas). Il faut vraiment que tu évites de masquer des contenu en CSS comme tu le fais actuellement.