Menu en images

Bonjour,

Je suis nouveau sur ce forum et j'aimerai savoir quelles sont les bonnes pratiques à utiliser lorsqu'on désire faire un menu "design" avec des polices de caractères bien spécifiques. Il existe bien des méthodes récentes permettant de "charger" les polices spéciales sur son site, mais le plus courant semble d'utiliser des images, c'est en tout cas ce que je souhaiterai faire, avec également effet au survol.
J'ai bien lu le tuto de Thomas D, très clair (merci). D'après ce que j'ai pu lire, mieux vaut intégrer les images directement dans le code html, plutôt que dans les feuilles de style; faut-il également inclure dans les li des span et écrire le texte en dur, avec text-indent pour le faire disparaître de l'écran? Pour l'effet au survol, il préconise d'utiliser du javascript. J'ai trouvé un tuto (en anglais) présentant une méthode sans js, mais avec les images en CSS. Dans ce tuto, il est mentionné que les images sont "préloadées", est-ce possible sans JS ? Que pensez-vous de cette méthode ? Je vous remercie par avance et vous souhaite une belle journée ensoleillée!
Exemple du menu:

Modifié par epmobile (19 Aug 2011 - 10:02)

Bonjour

a écrit :
mais le plus courant semble d'utiliser des images

Hum, ce n'est pas parce que c'est courant que c'est une bonne pratique

Comme tu as du le lire dans le tuto, le tout image risque de faire perdre une information clé à l'utilisateur : le texte contenu dans l'image. Il y a toujours l'attribut alt, etc, mais bon. Il n'y a rien de plus exaspérant que d'attendre que les images d'un site se chargent pour pouvoir naviguer, et même en 2011, il y a encore des connexions lentes : 3G sur un téléphone, ou proxy lent, etc. Sans oublier que le jour où tu veux changer du texte, il faut refaire toutes les images, etc. Pas trop flexible.

Ton menu est plutôt simple, et ton image sera là uniquement pour remplacer une police, du coup j'aurais tendance à me tourner vers des solutions "code" pure :
- font-face, avec un joli tuto mais attention, il faut que la licence de la police te le permette. Tu peux jeter un coup d'oeil du coté de fontsquirrel qui propose pleins de polices libres pour utiliser avec font-face, ou du coté de google font, il y a de quoi faire.

- Cufon, mais il faut javascript d'activé et l'utilisateur ne peu plus sélectionner le texte, plutôt frustrant (mais c'est mon avis perso ça) cependant la licence est plus "souple", plus de polices acceptent cufon

De mon côté je te conseille surtout google web font font un genre de CDN pour les font, très simple à utiliser et à implémenter.
Modifié par SYRIACA (19 Aug 2011 - 10:56)

InpIxelItrust a écrit :

Il n'y a rien de plus exaspérant que d'attendre que les images d'un site se chargent pour pouvoir naviguer, et même en 2011, il y a encore des connexions lentes : 3G sur un téléphone, ou proxy lent, etc.

Vu le visuel du menu et le poids moyen d'une police, dans ce cas ça serait plus léger en utilisant des images.
Modifié par jb_gfx (19 Aug 2011 - 11:07)

a écrit :
Vu le visuel du menu et le poids moyen d'une police, dans ce cas ça serait plus léger en utilisant des images.

C'est pas tant le poids mais ce qui se passe tant que l'image est pas chargée.
Le temps que la police se charge, tu as la police de "fallback" qui est affichée, donc tu peux interagir avec une page même si la police n'est pas chargée, même si tu as un souci sur le serveur, tu as toujours la navigation. Pour les images, tant que les images sont pas chargées, bah tu as... rien (je pense au site d'un gros fabricant informatique avec 150 effets où il me faut 2min derrière proxy pour enfin arriver à avoir une navigation correcte). Si tu as un souci au niveau du serveur pour les images tu n'as plus de navigation, au moins avec la police il te reste une police basique, moins belle, mais bon. Comme dit SYRIACA, les CDN de google sont super rapides. Sans oublier que certains navigateurs cachent la police après le premier chargement.

Justement vu le visuel du menu, je vois pas l’intérêt de s'embêter d'images statiques à changer à chaque mise à jour, à tripler pour trois effets (link, hover, active) et en plus ajouter encore un javascript par dessus pour un effet qui peut être accompli en simple css + background color. Le poid total images x3 + javascript sera à mon avis plus lourd que du simple font-face + hover en css.

Merci à tous pour vos réponses.

En terme d’accessibilité, c'est effectivement mieux de faire des menus sans image, on peut également se passer de js. En terme de poids des images, ce n'est effectivement pas un problème; si l'on traite les images pour le web, leur poids est minime.

Parfois le graphiste ayant fait la maquette veut absolument avoir la même police, et le design au pixel près, c'est pourquoi parfois il est même plus simple d'utiliser des images. Dans le cas présent, la graphiste a utilisé une police pour Mac, ce qui pourrait encore compliquer la chose... Je vais voir ce que je trouve du côté de font-face, fontsquirrel ou google font, en prenant garde aux droits d'auteur.

Que pensez-vous de cette méthode, je ne vois pas comment les images sont pré-chargées ?

Encore merci à vous tous pour vos réponses - rapides