3244 sujets

Critiques de vos sites: code et design

[Amateur] Lockheart.fr - Premier portfolio !

Bonjour à tous ! Je me présente donc avant tout, je suis un ex-étudiant en attente d'un entretien pour une formation par alternance plutôt (très) sélective d'infographiste multimédia. Ayant appris qu'il était indispensable de "toucher" déjà un peu, j'ai pris les devants sur le contenu du programme en réalisant mon premier site web en autodidacte, le thème du portfolio étant le mieux approprié dans mon objectif. J'ai donc conçu celui-ci sur ces deux dernières semaines (au-delà, je n'avais qu'une vague idée de ce que pouvait être le HTML !). Le site web est tout fraichement uploadé, et ayant découvert Alsacréations dans mon bref apprentissage des standards, je tenais absolument à avoir l'avis de votre communauté Smiley smile

Bien, trêve de bavardages, voici mon site web ! Je suis donc prêt à recevoir toutes vos critiques, mais soyez indulgent avec moi svp Smiley ravi Alors si je puis me permettre, je tiens à signaler les 2-3 soucis que j'ai rencontré durant la réalisation de mon projet, en espérant que vous puissiez m'apporter réponse :
- Tout d'abord, il existe un décalage du footer sur la page Galerie, sous IE 7 & 6. Le code étant généré sous Bridge CS4 et étant d'un niveau encore trop complexe pour moi, je n'y trouve guère de solution... Ce décalage est survenu quand j'ai rédigé la class .texte sur base.css.
- Dans un soucis du détail, le HTML validator m'a signaler l'utilisation inappropriée de l'id #bloc-lien sur ma page ressources.html. J'ai regler ce soucis pour d'autres id en les changeant en class, mais cet id là dispose lui meme de class imbriquées, quelle solution adoptée ?
- Pour finir, j'ai donc dû uploadé mon portfolio pour attaquer la partie PHP du formulaire, j'aimerais de surcroit y ajouter des captcha, pourrait-on m'éclairer sur la direction à prendre ? Sinon, je m'en tiendrais de suivre les cours du zero Smiley smile

Dans l'attente de vos impressions, je vous remercie par avance !
Bonjour,

Je tiens tout d'abord à te féliciter, il est rare qu'un débutant arrive à produire un site qui passe bien sous IE6. Bon bravo et merci.

Ensuite (parce que faut pas rêver, une critique, c'est fait pour mettre en avant les points à améliorer Smiley cligne ), visuellement il y a un problème majeur : le contraste entre les fond et les textes sont trop faibles pour une lecture confortable. Le fond vert quadrillé est également problématique, même avec un contraste suffisant, les textes qui apparaissent dessus vont, à l'œil avoir un effet crénelé (à cause des deux couleurs du quadrillage).

Pour le code :

* Il manque une meta description. Le contenu de cette meta est utilisé par les principaux moteurs de recherche pour afficher un peu de contenu sous le titre du site dans les pages de résultat. Si elle n'est pas présente, le moteur de recherche met ce qu'il peut comme texte (généralement, les N premier caractères de la page). Cette balise peut faire la différence entre deux site et inciter le visiteur potentiel à cliquer, il est donc important de la spécifier et de la rendre "sexy".

* Ton menu est relativement bien construit, mais : 1. onmouseover/onmouseout ne fonctionne (et c'est logique) que lorsque l'on utilise la souris, si l'on utilise le clavier pour naviguer dans la page, l'effet de survol ne se fait pas, il serait donc préférable d'utiliser onfocus/onfocusout à la place. 2. Il pourrait être intéressant pour toi de te renseigner sur la technique des portes coulissantes qui évite d'avoir un léger décalage (du au chargement de l'image) lors du premier survol d'un élément.

* Gros point négatif en termes d'accessibilité : les images porteuses de contenu (du texte pour faire simple) DOIVENT se trouver dans le code HTML avec un attribut alt contenant le même contenu (le même texte) (comme pour ton menu). Sinon, ces images sont transparente pour les robots, les utilisateurs de lecteur d'écran, et les gens chez qui l'image ou les CSS n'ont pas pu se charger (problème de quota, de connexion...).

Bon courage pour ton entretient.
Salut,

Au niveau du code, une chose me dérange. Tes deux divs vides nommées "signature" et "top -contenu" me semblent superflue. Ta signature est soit un élément d'information et doit se trouver en image dans le code html avec un attribut alt renseigné, et positionné en css comme bon te semble, soit un élément de décoration, et à ce moment là il vaut mieux utiliser l'image en fond d'un élément existant plutôt qu'en ajouter un dans le code html. Dans ton cas il pourrait être intégré à ton fond gris.

Sinon ca a l'air à peu près propre.
Je m'interroge juste sur l'intérêt d'utiliser un titre pour la date du message, car ça ne me semble pas être une information suffisamment importante pour le justifier, mais c'est un choix de ta part.

Niveau design, j'aime bien cet effait carton découpé qui laisse apparaitre un contenu, un peu à la manière des livres pour enfants ou tu tire une languette ou tu tire une roulette, pour changer une image.
Mais je trouve le tout quand même très terne, il manque une couleur de contraste qui illumine un peu le tout car c'est quand même très austère.

Niveau contraste, il y a des choses à revoir, par exemple le vert utilisé pour les 4 liens du menu devrait être un peu plus clair que le vert global du contenu, car vu la fine surface de vert de chaque lien, avec en plus l'effet d'ombrage, les liens semblent du coup très sombres et sont peu contrastés par rapport au fond. Ou alors il faut qu'ils soient beaucoup plus sombre.

La lisibilité du texte en serif est loin d'être idéale sur un écran, mais lorsque tu es sur une matière tramée, même aussi fine que celle utilisée, la lecture en est pénibilisée. De plus le contraste est un peu limite vis à vis du fond, il faudrait éclaircir la couleur de typo, sans être non plus parfaitement blanc. Tes titres quand à eux devraient être un peu plus sombres.

La lisibilité du bouton "poster le message" n'est pas non plus géniale, il s'agit de quelque chose qui se doit avant tout être fonctionnel, et cette typo relativement peu esthétique, passe dans l'entête du site par sa discrétion, la elle tue un peu l'élégance du reste.

A propos de titres, pourquoi sur la page d'accueil ils n'ont aucune décoration, alors que sur la page ressources tu leur a mis des chevrons devant ? En étant logique, il faudrait les mettre partout ou nulle part (en l'occurence nulle part, cela nuit un peu à ton design).

Le truc qui casse tout dans ta page d'accueil, sont ces affreux logos W3C en bas de page. Même s'il est une fierté de ta part d'avoir un code html et css valide, dis toi que globalement tes visiteurs s'en moquent royalement. La mention pour la galerie indiquant qu'elle a été réalisée sous Bridge CS4 N'apporte pas grand chose non plus à ton visiteur, mais elle a au moins le mérite d'être discrète.

Edit: Ah j'allais ajouter un truc oublié (images porteuses de sens dans le contenu), mais Laurie-Anne l'a dit entre temps Smiley smile
Modifié par Mikachu (25 Feb 2010 - 14:14)
Bonsoir à vous, et merci de m'avoir apporter conseil si rapidement ! J'ai bien lu vos critiques et commencer à modifier tout cela, mais j'ai malheureusement rencontré quelques difficultés par-ci et là.


Alors tout d'abord, Laurie-Anne, je te remercie pour ton compliment Smiley ravi Pour te répondre, je prend bien en compte tes conseils sur le design, mais je me fixe la priorité de peaufiner mon code et bien entendu de m'en sortir dans le php.

* J'ai donc ajouter la meta description et même la meta keywords, en prenant soin d'éclaircir ce <head>.

* C'est là que les choses se complique dans ma petite tête ^^ : sur notepad, onfocus marche correctement, mais onfocusout reste de marbre. J'ai donc présumer que la syntaxte des ces éléments était différentes mais je n'ai pas réussi à mettre la main dessus sur google...

* Pour ce qui est de l'astuce des portes coulissante, c'est un très bon conseil merci ! Je l'ai d’ores et déjà appliqué à mon bouton de formulaire, mais je n'arrive pas à la visualiser sur le menu, là où mes images sont appelés directement sur mon html...

*Dernier point juste pour être sûr de bien avoir compris : pour les "images porteuses de contenu", tu sous-entend celles de la page ressources ?


Je passe maintenant à toi Mikachu Smiley ravi

* J'ai donc supprimer ma div #signature, incorporant (et re-design-ant au passage) celle-ci au background. L'idée était bien trouver mais, malheureusement, la page galerie n'a pas l'air de l'apprécier, avec un "bug" d'affichage plutôt étonnant à mon goût, que ce soit sur IE ou firefox d'ailleurs. Trouvant malgré tout ton idée intéressante, je laisse donc ce soucis en ligne en espérant que l'on y trouve une solution. Quant à ma div #top-contenu, je ne vois pas en quoi elle est superflue, tu sous-entend que je pourrais appeler directement top-box.png dans le html ? J'ai du mal à discerner là où telle ou telle image doit être appelée, entre le css et le html.

* L'utilisation des titres h3 & h4 était injustifiée, ceci est corrigé ! Smiley smile

* Comme je disais à Laurie-Anne, je me concentrerais sur la partie design un peu plus tard. J'ai néanmoins éclairci mes paragraphes, ainsi que la signature désormais fondu dans le background, changé la couleur des h1 et changé de police pour le bouton de soumission, restant dans le handwriting mais dans une touche plus sobre. Pour ce qui est des chevrons présent sur la pages ressources, je les trouves appropriés pour une mise en page sous forme de "liste" (j'ai essayer sans, mais je les trouves très bien là à mon goût Smiley ravi ). Quant à leur absence sur la page d'accueil, je trouve le rendu plus "actualités", news.

* Mais oui, j'en était fier de ces logos w3c Smiley bawling , mais le design avant tout, ils ont été bannis un bon coup ! La note à propos de Bridge n'apporte pas grand-chose au visiteur certes, mais j'avoue m'être plus projeté en vue d'une présentation au jury de mon futur entretien.


Merci pour vos précieux conseils Smiley smile
Salutations,

ma participation ne sera pas très constructive, juste pour dire que j'aime beaucoup ^^

les seules choses que j'aurais soulevée ayant déjà été dite, je m'en tiendrai là, bon courage pour ta sélection.
Petis a écrit :
Pour te répondre, je prend bien en compte tes conseils sur le design, mais je me fixe la priorité de peaufiner mon code et bien entendu de m'en sortir dans le php.
Malheureusement, le design est ton problème principal, car il rend ton site en partie illisible. Modifier les contrastes de certains éléments ne prendra pas beaucoup de temps et apportera énormement à la qualité de ton site.

Petis a écrit :
J'ai donc ajouter la meta description et même la meta keywords, en prenant soin d'éclaircir ce <head>.
Oui, mais non, keyword, il fallait pas ^^; elle ne sert absolument à rien cette meta là ^^;

Petis a écrit :
Dernier point juste pour être sûr de bien avoir compris : pour les "images porteuses de contenu", tu sous-entend celles de la page ressources ?
Euh non, je parle de toute image qui soit à du texte dessus (ton header en particulier) ou est support de lien.
Bonjour, & merci beaucoup à toi maosalia, ça me fait plaisir ! Smiley ravi


Pour te répondre Laurie-Anne

* Comme je disais à Mikachu j'ai retoucher le contraste des quelques éléments, mais si tu sous-entend par là le background du contenu, je pense faire une refonte graphique prochainement, c'est promis ! ^^

* Je me souviens maintenant avoir lu quelque part que la meta keywords était devenu obsolète suite à un abus de celle-ci... Eh prout hein, j'ai voulu bien faire, j'ai copier sur le code source de cette page même ^^

* D'accord, c'est donc la définition qui doit amener une image à être appelée dans le html ou non ? Dans mon cas précis, toutes les images de la page ressources sont porteuses de lien, donc celles-ci + le header à inclure dans le html ? + le bouton de soumission du formulaire ?
Je me suis fait silencieuse jusqu'à maintenant, mais j'aime bien le concept!

Petis a écrit :

* D'accord, c'est donc la définition qui doit amener une image à être appelée dans le html ou non ? Dans mon cas précis, toutes les images de la page ressources sont porteuses de lien, donc celles-ci + le header à inclure dans le html ? + le bouton de soumission du formulaire ?

Euh pas sûr d'avoir tout compris ce que tu as dis, mais en gros toutes images qui contient du texte et donc porteuses de contenu doit être appelé directement via le html. Donc oui.

Je suis aller faire un tour sur la dite page ressource... quelque petites corrections serait à faire pour simplifier le code... là il y a trop de div. (un cas de divite aigü?)
Ton div "bloc-lien" suffirait à lui seul en y plaçant l'image avec un float. Voir même directement dans ta div "contenu"?
ton div "separation", pas sûr... surtout qu'il est vide. Utiser un <hr> à la place?

Bonne continuation! Smiley cligne
Modifié par juliesunset (03 Mar 2010 - 21:03)
Sujet clos
Aller à