3246 sujets

Critiques de vos sites: code et design

Pecvd.com, demande d'avis sur le site d'une entreprise

Bonjour à tous,

Tout d'abord merci pour vos tutoriels qui m'ont bien aidé ainsi que vos nombreux conseils et astuces que j'ai trouvés sur le forum.

Pour préciser les choses je suis en master de management et par le hasard de la vie, je me retrouve à devoir créer un site web pour une entreprise de A à Z. Donc depuis octobre je lis les forums, les tutos...etc

Et voilà nous arrivons en février et je me retrouve à avoir réalisé 60% du futur site web.

Le problème est que je suis sûr d'avoir fait des erreurs. Donc j'ai mis en ligne sur mon serveur une page, et j'ai bien dit une seule page..., du site quasiment terminée afin que vous pussiez tous m'assassiner de critiques, pour que je corriges la quasi totalité de mes erreurs avant de présenter le site au boss de l'entreprise. ( eh oui je voudrez quelque chose de correct pas une page bourrée d'erreurs! Smiley lol )

Donc c'est avec impatience que j'attends toutes vos critiques. Smiley sweatdrop

Voici le lien du site test: http://www.animenglish.com/plassys/pagefr/machines/PECVD/pevcd.html

MERCI à VOUS et bravo pour le nouveau design d'Alsacréations!!

ps: pour ce qui est du design du site, j'ai utilisé photoshop et j'ai essayé de trouver des couleurs qui allaient avec le rose-violet du logo de l'entreprise, et mon but était d'obtenir quelque chose de sobre, clair et correct.

- je sais que mon menu n'est pas correct car il est en background mais je ne sais pas comment faire autrement! Smiley confused
Bonjour, cette rubrique est destinée aux projets finalisés donc tu risques peut-être de te faire taper sur les doigts (mais d'autres s'en occuperont) Smiley cligne

Plusieurs problème d'ordre sémantique tout d'abord, tu utilises la déclaration de doctype 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ligne 58 ("- Couches tribologiques [..]"), ton texte n'es pas entouré des balises <p></p> qui permettent de délimiter un paragraphe.

Ligne 63, présence d'un </td> sorti de nulle part.

Nota : un petit tour du côté du validateur W3C aurait déjà pu te permettre d'éviter ces erreurs.

Concernant ton menu vertical, il faut privilégier quand cela est possible - et c'est le cas - des menus en texte (référencement et accessibilité), je te renvoie à ce tuto afin d'en apprendre plus.

D'un point de vue esthétique les différentes couleurs au survol ne se justifient pas dans la mesure où cela n'est pas répercuté de façon notable dans le design du contenu par exemple, ce qui ne sera vraisemblablement pas le cas. Il sera intéressant par la suite d'envisager un système permettant de mettre en exergue le lien de la page actuellement visitée.

Concernant ton menu horizontal, les liens sont mal dimensionnés (tu trouveras la solution dans le lien que je te donne plus haut).

Pour terminer, l'animation flash ne se justifie pas ici étant donné sa non-exploitation : elle n'apporte rien d'un point de vue interactivité ou animation, tu gagnerais en lisibilité et en accessibilité à mettre les images directement dans la page grâce à des <img /> (ou alors, jette un œil du côté du slider d'alsacréationS).

Indépendamment des problèmes que je soulèves (j'en ai certainement loupé), ton code est relativement propre, tu gagnerais cependant en clarté en t'inspirant des gabarits disponibles dans la partie outils, cela règlerait le problème de l'utilisation abusive des <div> notamment.

* Enfer et damnation, j'avais oublié le S
Modifié par Akhilleus (03 Feb 2009 - 14:33)
Bonjour,

Je vais commencer par le code.

Tu as un trou dans ta hiérarchie. Tu passe de h1 à h3 sans h2, c'est problématique, d'un point de vue à la fois logique, mais aussi accessible. Il ne faut pas utiliser les éléments pour leur rendu, surtout si tu les style en CSS. D'ailleurs toujours concernant les h3 : le footer, c'est clairement pas un élément titre, ce n'est pas approprié de le mettre dans un h3.

La façon dont tu créé ton menu est en effet maladroite : 
<li> <a class="menu1" href="#" title="aller &agrave; evaporation"><span class="cache">evaporation</span></a></li>

Dans ton cas il serait plus logique et pratique d'utiliser une image dans le HTML plutôt que dans le CSS : 
<li> <a href="#" title="aller &agrave; [b]la page[/b]evaporation">[b]<img src="evaporation.gif" alt="évaporation" />[/b]</a></li>

Ton code pose un problème important, si l'utilisateur décide de désactiver les images, mais pas le CSS, il n'aura plus de menu. Alors qu'avec une image dans le HTML accompagné d'un texte alternatif, si les images sont désativée, c'est le contenu du alt qui prendra le relais.

Dans le cas particulier de ton menu, il serait également possible de gérer le fond de l'élément du menu avec un image de background CSS et du texte en dur dans le HTML pour rajouter l'effet de survol (qui est plutôt maladroit actuellement). Ou, en gardant les images, utiliser la technique des portes coulissantes. Ces deux méthodes combinées seraient surement la meilleure solution pour ton menu.

Toujours à propos des images et de leurs textes alternatifs, celui-ci peut être vide quand l'image n'apporte qucun contenu : 
<p><img src="../../../imagesdesign/horizon.jpg" alt="Horizon" width="600" height="3" /></p>

C'est le cas ici, il faut mettre alt="" ou insérer cette image avec du CSS.


Je trouve les title de tes liens, particulièrement redondant. Ils n'apportent aucune information puisqu'ils reprennent l'intitulé du lien (qui est la plupart du temps en dur).


Ce morceau de code : 
- Couches tribologiques (DLC, ...)<br />
      - Dépôts de polymères<br />
      - Dépôts de silice froide<br />
      - Porte-substrats simples, chauffants, refroidis, tournants, oscillants, LN2<br />
      - Croissance de nanotubes simples ou multi parois par PECVD, CVD, filament chaud <br />

Devrait être remplacé par une liste : 
<ul>
   <li>Couches tribologiques (DLC, ...)</li>
   <li>Dépôts de polymères</li>
   <li>Dépôts de silice froide</li>
   <li>Porte-substrats simples, chauffants, refroidis, tournants, oscillants, LN2</li>
   <li>Croissance de nanotubes simples ou multi parois par PECVD, CVD, filament chaud </li>
</ul>


Et pour terminer avec le code, n'oublie par de rajouter une balise meta description (pour chaque page, avec de préférence, une description différente pour chaque page, décrivant le contenu de celle-ci).


Pour ce qui est du design... Il ne fait pas très actuel. Les couleurs sont bien choisie (à part pour le menu comme l'a signalé Akhilleus), mais le tout (grosse bordures, tout carré...) me donne l'impression d'un windows 3.11.
Je laisse la cavalerie t'étriper sur le code Smiley cligne
Question design c'est plutôt faiblard... tu aurais sorti ce site en 1998 que ça ne m'aurait pas étonné ! Smiley smile En quelques mots :

- une seule couleur : c'est triste, sans relief
- abus de biseautages bruts de fonderie : un côté très "je découvre Photoshop"
- les polices à empattement de base (Times New Roman) sont à éviter, ça fait très amateur et c'est peu lisible
- ton diaporama Flash est parachuté en plein centre de ta zone de contenu et n'apporte pas grand chose... (pourquoi du Flash ?)

Pour les points positifs :

- ton zoning est plutôt bon
- les 3 navigations sont plutôt bien placées et assez claires, par contre celle de droite est beaucoup trop haute, réduis les espaces verticaux entre les items

Evidemment un master un management ne te forme pas forcément au webdesign... Graphiste, c'est un métier !

EDIT : chouette redesign Alsa, bravo-chapeau !
Modifié par STPo (03 Feb 2009 - 11:01)
En priorité je changerais le logo, je retravaillerais l'image, et de préférence en demandant à des connaissances à l'aise avec photoshop.
Et puis je rapprocherais les boutons du mene vertical de gauche.

Bon courage !
Tout d'abord merci d'avoir pris le temps d'analyser le site.

Quelques précisions, l'entreprise pour laquelle je fais le site web à environ 20ans. Elle travaille dans la physique du vide pour de grands groupes internationaux.

Donc je ne peux pas me permettre de modifier leur logo!! et je dois à partir du rose-violet pour trouver une charte graphique qui soit correct. Alors je suis bien d'accord que le site fait un peu "vieillot" mais pour un manager et non un graphiste ce n'est pas évident!

Autre précision, pas la peine de me répondre que l'entreprise devrait payer une autre entreprise compétente pour réaliser son site...car le sujet de préoccupation pour le boss c'est la création de ces machines et non le web. Je le fais pour lui rendre service à titre bénévole!

Pour ce qui est de l'utilisation de flash pour les photos, évidemment vous n'avez pas les autres pages du site mais sur chaque page j'ai pas mal de photos des machines, donc il m'est utile de les rassembler comme je l'ai fait, et c'est plus facile pour moi.

Enfin, encore merci à vous car j'ai quand même pas mal d'erreur, je vais commencer par corriger le code puis pour le design je vais essayer d'arrondir un peu le tout!

Le site fait environ 40 pages, car il est aussi en anglais! et j'ai presque tout fait! ça me fait quand même un peu suer de me retaper l'essentiel du design à refaire! sauf si vous avez une solution rapide peut-être?

Encore merci
Sujet clos
Aller à