Radium

Bonjour,

J’ai récemment refait complètement le site de l’entreprise pour laquelle je travaille depuis plusieurs années. Je l’ai fait surtout pour le plaisir durant mes temps libres. Je suis avant tout Développeur Web / Programmeur, mais j’avais envie de voir ce que j’étais capable de faire graphiquement. Le graphiste de l’équipe m’a donc laissé le champ libre. J’ai créé cette interface graphique à partir de zéro. Même si le graphisme n’est pas mon domaine, je pense avoir bien réussi. Ce sera à vous de me le dire.

Je me suis occupé de tous les aspects du site, de la programmation jusqu’à la rédaction des textes, de la réalisation graphique jusqu’à la découpe et l’intégration HTML/CSS. La charge de travail était plutôt importante. Après toutes ces heures passées sur cette refonte, je crois qu’il m’est difficile d’avoir une vision claire et objective. J’ai révisé entièrement le site et effectué une démarche qualité Opquast pour m’assurer que je n’avais pas oublié de points essentiels. Toutefois, je pense que des avis extérieurs me seraient utiles pour m’en assurer.

Vous pouvez me donner vos avis sur tous les aspects concernant le site, et soyez assuré que je vous répondrai avec plaisir.

Merci!
Modifié par Tony Monast (24 Feb 2009 - 19:26)

Hello Tony,

Wôw ! Du beau boulot ! Qu'est-ce que ça serait si tu étais graphiste ?

Alors juste histoire de dire quelque chose :

* tu déclares de l'iso-8859-1 dans ta <meta> alors que c'est de l'utf-8 qui est envoyé dans les headers.

* En désactivant les images les libellés du menu sont collés. Dans ces cas-là (mais je ne suis pas sûr que ce soit la meilleure solution) je fais alt="Accueil&nbsp;"
Modifié par Heyoan (24 Feb 2009 - 21:32)

Bonjour Heyoan,

Je viens de régler les deux problèmes. Merci de tes commentaires. Si tu vois autre chose, n'hésite surtout pas!

Salut Tony, ça faisait un bail

Juste une petite critique rapide avant d'aller au lit (à presque 3h ) Pourquoi utiliser JS pour faire tes effets de hover sur ton menu ? Car j'avais désactivé le JS sur un autre site tout à l'heure, et en voyant le tiens, je me disait, tiens, c'est bizarre, sur le menu, aucun effet au survol ... enfin vais pas raconter ma vie non plus

En tout cas, c'est agréable à regarder, mais le site est ... un peu vide ? Aucune images de présentation, pas de vidéos c'est ce que je m'attendrais à voir en allant voir ton site spécialisé).

Bonne continuation

Bonjour Super_baloo8,

Pour le menu, j'utilise le Javascript, car je trouve cette technologie adaptée pour ce type d'interaction. De plus, comme le menu est en images (typographie particulière), je ne vois pas comment j'aurais pu faire ce menu en CSS, sans avoir de problème d'accessibilité. Si tu connais une façon de le faire sans Javascript, dis m'en plus!

Nous plaidons coupables pour l'absence de contenu. Le manque de temps en est principalement la cause. Au programme, nous voulons mettre une brève animation/vidéo dans le téléviseur de l'entête, qui changera évidemment d'une section à l'autre. Il y a tout de même quelques vidéos dans le portfolio des effets spéciaux et 3D, mais c'est tout. Je vais essayer de pousser les autres membres de l'équipe à prendre quelques heures pour me fournir des vidéos intéressants. Je vais en faire autant pour la division Graphisme.

D'ailleurs, ta critique m'a fait remarquer qu'il n'y a pas de lien direct vers les différents portfolios à partir des détails des services. Je vais y remédier demain.

Merci de tes commentaires!
Au plaisir!
Modifié par Tony Monast (25 Feb 2009 - 02:58)

Salut,

J'ai parcouru ton site, déjà design agréable et code HTML propre et indenté .

Mes critiques seraient plutôt d'un odre de référencement, dans certaines pages tu as jusque 5-6 h2 ce qui est beaucoup trop 2 est un maximum. Sinon tu as une balise h1 dans les contacts mais pas dans les autres, dommage parce que ça donne une grosse importance à ce qui est compris dedans.

Pense a changer le contenu de la meta description en fonction de la page où tu es comem tu l'as fait pour le title.

Et finalement les attributs title de tes liens ne sont pas remplis ^^

Bye bye

N-J a écrit :
dans certaines pages tu as jusque 5-6 h2 ce qui est beaucoup trop 2 est un maximum.

Ah ? Pourquoi ça ?

N-J a écrit :
les attributs title de tes liens ne sont pas remplis

Ah ? Et il faudrait ?

@Tony > je pense que Super_baloo8 faisait référence au rollover CSS (ce qui malheureusement ne fonctionne pas avec un élément IMG). Pour ma part c'est l'un des rares cas où JavaScript même "intrusif" ne me gène pas.
Modifié par Heyoan (25 Feb 2009 - 09:35)

Non, je parlais plutôt avec le système de porte coulissante où tu mets l'image en background css, puis tu fais bouger l'image en utilisant la règle "position" de background.

Pour permettre d'avoir un titre même si tu as mis les images en background css, voici une petite astuce.

Créer un fichier de 1px x 1px en Gif avec le fond transparent.

Ensuite, tu le place dans ton code comme ceci :

<a href="accueil/index.html"><img src="1px.gif" alt="Accueil" /></a>

Et voilà, tu as le contenu alternatif quand tu désactive les images (ça ne change en rien ton graphisme !

Je l'utilise en ce moment sur mon site en dev pour le menu (sans JS)
Modifié par Super_baloo8 (25 Feb 2009 - 10:36)

N-J a écrit :
dans certaines pages tu as jusque 5-6 h2 ce qui est beaucoup trop 2 est un maximum.

Heyoan a écrit :
Ah ? Pourquoi ça ?

Oui, pourquoi ça ?

N-J a écrit :
Et finalement les attributs title de tes liens ne sont pas remplis ^^

Heyoan a écrit :
Ah ? Et il faudrait ?

Non, surtout pas, sauf si le contenu du title apporte une information utile.

Bonjour,

Super_baloo8 a écrit :
Non, je parlais plutôt avec le système de porte coulissante où tu mets l'image en background css, puis tu fais bouger l'image en utilisant la règle "position" de background.

Pour permettre d'avoir un titre même si tu as mis les images en background css, voici une petite astuce.

Créer un fichier de 1px x 1px en Gif avec le fond transparent.

Ensuite, tu le place dans ton code comme ceci :

<a href="accueil/index.html"><img src="1px.gif" alt="Accueil" /></a>

Et voilà, tu as le contenu alternatif quand tu désactive les images (ça ne change en rien ton graphisme !

Je l'utilise en ce moment sur mon site en dev pour le menu (sans JS)

Ceci à déjà été discuté ici.

Laurent Denis a écrit :
Pour l'accessibilité: perdu

La désactivation des couleurs (Options d'accessibilité dans IE) fait disparaître l'image CSS sans restituer le texte masqué.

(Je sais bien que la découverte et l'appropriation d'une technologie est presque toujours un mouvement de balancier - pas de CSS, puis trop de CSS - Mais cette rage à vouloir utiliser des pseudos-contenus est tout de même curieuse )

Ma conclusion personnelle et que aucun bidouillage en CSS ne fonctionne. La seule vraie solution est celle des rollover en javascript.

Sinon, très joli et plutôt original comme graphisme, j'adhère.
Modifié par bzh (25 Feb 2009 - 13:28)

Merci pour les détails, je vais revoir ma copie moi aussi du coup

Hébien oui, les h2 sont à utiliser avec parcimonie, ainsi que LE H1. Si tu mets trop d'informations au même niveau sémantique, ils en perdent leur sens pour les moteurs...

Les attributs title des liens doivent être remplis, ça donne plus d'infos aux visiteurs -.-, on peut toujours les remplir avec une information pertinente.

Salut,

Super_baloo8 a écrit :
Merci pour les détails, je vais revoir ma copie moi aussi du coup

Y en a qu'ont essayé.

N-J a écrit :
Hébien oui, les h2 sont à utiliser avec parcimonie, ainsi que LE H1. Si tu mets trop d'informations au même niveau sémantique, ils en perdent leur sens pour les moteurs...

Les niveaux de titre servent à hiérarchiser et structurer le texte / la page. Si on commence à compter le nombre de niveau de titre pour jouer sur la pertinence des pages au détriment du sens. Exemple :

<h1>Véhicules</h1>
<h2>moto</h2>
<h2>voiture</h2>
<h2>camion</h2>
<!-- mince j'ai trop de h2 -->
<!-- système D -->
<h3>tracteur</h3>

On voit bien que ça n'a aucun sens.

Aussi, rien ne dit que h1 doit être unique même si ça à tendance à l'être pour des même questions de référencement.

N-J a écrit :
Hébien oui, les h2 sont à utiliser avec parcimonie, ainsi que LE H1. Si tu mets trop d'informations au même niveau sémantique, ils en perdent leur sens pour les moteurs...

Hum... pas convainque... à partir du moment ou le h2 est du même niveau que ces congérènes, y a pas de problème. Toute est une question de rédaction. Et d'après mes lectures, à part le H1, les autres Hn ne sont pas des plus pertinents pour google&co.

Parfois (et même souvent) le meilleur des référencement se fait en étant naturel, en faisant les choses logiquement.

N-J a écrit :
Les attributs title des liens doivent être remplis, ça donne plus d'infos aux visiteurs -.-, on peut toujours les remplir avec une information pertinente.

Haha... désolée v_v

Mais bon, pour la plupart des liens, le texte du lien est bien suffisant et DEVRAIT se suffire. Les title "Aller à la page sur la reproduction des moules" sur le lien "reproduction des moules", c'est totalement inutile, complêtement redondant et particulièrement énervant (oui, je l'ai déjà dis, je m'énerve vite).

Bonjour N-J,

N-J a écrit :

Mes critiques seraient plutôt d'un odre de référencement, dans certaines pages tu as jusque 5-6 h2 ce qui est beaucoup trop 2 est un maximum.

J'ai un certain doute sur cette affirmation. Je suis d'accord que si un développeur place trente h1 non significatifs sur une page, il y a des risques pour le référencement. Par contre, limiter une page à deux h2, c'est plutôt impensable. J'utilise les balises pour leur sens avant tout. Dans ma page Services par exemple, j'ai quatre services différents qui sont au même niveau. Je dois donc utiliser quatre h2. Je briserais déjà cette étrange règle sur le référencement. Pour la colonne de droite et la signature, je pourrais certes mettre des h3, mais si aucun h2 ne se trouve dans la page (ça peut arriver), je me retrouverais à casser la hiérarchie (h1 -> h3), ce qui n'est pas une bonne chose.

N-J a écrit :

Sinon tu as une balise h1 dans les contacts mais pas dans les autres, dommage parce que ça donne une grosse importance à ce qui est compris dedans.

En fait, j'utilise un h1 dans toutes les pages pour définir le titre de la section. Je ne comprends pas cette remarque.

N-J a écrit :

Pense a changer le contenu de la meta description en fonction de la page où tu es comem tu l'as fait pour le title.

Oui, bonne idée.

N-J a écrit :

Et finalement les attributs title de tes liens ne sont pas remplis ^^

J'alimente l'attribut title seulement là où c'est pertinent de le faire, et lorsque le texte du lien est insuffisant. Par exemple :

<a href="production-montage-video/" title="En savoir plus sur la production et montage vidéo">En savoir plus</a>

Bref, je ne crois pas que c'est obligatoire de remplir systématiquement tous les titles, mais ce n'est pas non plus une mauvaise chose de le faire, si c'est bien fait.

Merci de tes commentaires.
Modifié par Tony Monast (25 Feb 2009 - 15:12)

Tony Monast a écrit :
Bonjour N-J,
En fait, j'utilise un h1 dans toutes les pages pour définir le titre de la section. Je ne comprends pas cette remarque.

J'ai pas dû avoir les yeux en face des trous à ce moment là ^^, j'ai cru voir une balise h1 que dans la page contacts ^^. Désolé !

N-J a écrit :


J'ai pas dû avoir les yeux en face des trous à ce moment là ^^, j'ai cru voir une balise h1 que dans la page contacts ^^. Désolé !

C'est ce que je m'étais dit!

Bonjour,

Je viens de corriger quelques petits détails et j'ai ajouté un lien pour aller aux portfolios directement à partir des détails d'un service. J'en ai aussi profité pour changer, comme proposé par N-J, la meta description sur chaque page.

J'apprécie beaucoup vos remarques, n'arrêtez surtout pas!

Plop !

En repassant par là je m'aperçois que le rollover JavaScript ne fonctionne pas si on navigue au clavier. Si ça peut te dépanner j'avais fait un petit script pour faire ça (comme je ne suis pas un foudre de guerre en JavaScript il faudra peut-être le remanier ).
Modifié par Heyoan (25 Feb 2009 - 22:58)

Bonjour Heyoan,

Merci pour ton script, je me suis fortement basé dessus pour en écrire un nouveau, un peu mieux adapté à ce dont j'avais besoin, et à ce que j'utilisais déjà. Les rollovers devraient maintenant fonctionner au clavier.

Au plaisir d'entendre d'autres commentaires!