Développer en CSS 3 est un choix qui appartient à chaque webmestre. Comme je l’ai dit un peu plus haut, tous les navigateurs du marché ne sont pas capables de les interpréter. Concrètement, si la plupart de ces derniers font de gros efforts, c’est encore et toujours Internet Explorer qui reste à la traîne. Même sa dernière version, Internet Explorer 8, n’est pas capable de gérer la plupart des nouvelles propriétés introduites par les CSS3.

Globalement, donc, il est préférable de ne pas baser tout son site sur les CSS 3. En revanche, ceux qui ont un vrai navigateur seront les premiers à en profiter et c’est finalement ça qui compte. Pour le reste, comme dirait l’autre, OSEF !

Le Word-Wrapping : la césure du texte

D’un certain sens, le texte est assez paradoxal. C’est l’élément le plus important d’un site (sans contenu, un site n’est rien) mais c’est aussi le plus difficile à mettre en forme. On doit choisir le bon contraste, c’est un fait, mais on doit également s’assurer de bien présenter ses paragraphes pour qu’ils soient aérés et qu’ils incitent nos visiteurs à passer un peu plus de temps chez nous.

En la matière, les propriétés CSS ne manquent pas. En dehors de l’éternel « text-align », on peut aussi citer le « letter-spacing » ou encore le « line-height » qui nous permettent de faire pas mal de choses. Cela dit, le vrai problème, ce sont les longs mots (ou les URL) qui ont tendance à semer la zizanie dans notre mise en page et l’objectif de la propriété « word-wrap » est justement de nous filer un coup de main :

1
2
3

p {
word-wrap: break-word;
}

Compatibilité :

• Internet Explorer : à partir de la version 5.5
• Opera : ?
• Safari : à partir de la version 1.0
• Firefox : à partir de la version 3.5
• Chrome : ?

Web Fonts : toutes les polices que l’on aime

Les webmestres le savent, tous les navigateurs ne sont pas capables d’interpréter toutes les polices d’écriture. En réalité, ces dernières varient même selon le navigateur, bien sûr, mais aussi et surtout selon le système d’exploitation de l’internaute. On est donc souvent obligé de troquer notre chouette police ultra hyper qui rend super bien sur Photoshop avec des polices plus traditionnelles.

Bien entendu, des méthodes existent pour tromper le navigateur, comme de transformer certains éléments en images, mais les CSS 3 le permettent également grâce à la règle « @font-face » dont voici un exemple :

1
2
3
4

@font-face { 
font-family: 'Nom de ma police hype'; 
src: url('url de ma police hype');
}

Compatibilité :

• Internet Explorer : Embedded OpenType uniquement
• Opera : à partir de la version 10
• Safari : à partir de la version 3.1
• Firefox : à partir de la version 3.5
• Chrome : ?

Text-Shadow : de l’ombré sur ses textes

En réalité, cette propriété a été introduite dans les CSS 2 mais je la compte quand même dans cette liste car je la trouve très orientée CSS 3. Elle permet ainsi d’ajouter un effet ombré à n’importe quel texte. On précisera en outre que l’effet est entièrement personnalisable et qu’il peut ainsi s’adapter à n’importe quelle charte.

1
2
3

.monelement {
text-shadow: 2em 2em 0.2em red;
}

C’est donc un bon moyen de mettre en valeur certains éléments de son texte et par conséquent d’attirer l’attention des internautes. Pour certains, ce n’est qu’un effet « gadget » mais vous aurez sans doute compris que je ne suis pas de ceux-là.

Compatibilité :

• Internet Explorer : non
• Opera : à partir de la version 9.5
• Safari : à partir de la version 1.1
• Firefox : à partir de la version 3.1 (ombres multiples à partir de la version 4.0)
• Chrome : à partir de la version 1

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Penser et optimiser son thème à la source

Lorsqu’on réalise un site, on est très souvent tenté d’en faire le plus possible. Il n’est ainsi pas rare de succomber à la tentation et d’agrémenter ses pages d’animations flash, de vidéos ou d’images. Ces différents éléments doivent être utilisés avec parcimonie dans la mesure où ils consomment de la bande passante et qu’ils peuvent par conséquent ralentir considérablement l’affichage de vos pages. Alors bien entendu, vous pouvez parfaitement utiliser ces technologies, mais ce n’est pas pour autant que vous devez les accumuler. Ajouter des scripts en AJAX pour le plaisir d’en ajouter, cela ne rime à rien.

De la même manière, il est primordial de toujours se méfier des scripts externes, qu’il s’agisse de régie publicitaires ou de widgets communautaires. Là encore, le blogueur est très souvent tenté d’en faire trop, de passer par plusieurs régies différentes, d’ajouter des widgets à sa sidebar pour la rendre plus vivante. Et là encore, il convient de se montrer très prudent. Optimiser ses pages, son serveur, c’est une chose, mais vous ne pouvez pas intervenir sur ces scripts externes. Par conséquent, vous en êtes tributaire.

Cela dit, ce n’est pas pour autant que vous devez proscrire ces différentes technologies. Sur Weedle, par exemple, la galerie de photographies générées à partir de FlickRSS qui se trouve dans ma barre latérale est l’un des éléments qui ralentit le plus l’affichage de mes pages. Si je l’enlevais, je gagnerais sans doute 1 ou 2 secondes sur leur chargement. Cependant, dans la mesure où j’estime que cette fonctionnalité peut vous être profitable, j’ai préféré la laisser. Le tout est donc de faire ses choix avec le plus grand soin.

Pour calculer le « poids » de vos pages, il existe deux outils que tous les webmestres devraient connaître : Firebug et YSlow. Utilisés conjointement, ils vous permettront de corriger vos pages et de gagner ainsi quelques précieuses secondes. En ce qui concerne les images constituant votre thème, n’hésitez pas non plus à les optimiser en mettant en place des CSS Sprites.

Concernant WordPress, nous préciserons enfin que ce qui vaut pour les scripts, animations flash et autres vaut également pour les plugins que vous utilisez. Votre objectif doit toujours être d’en utiliser le moins possible et, là encore, il convient de faire son choix avec le plus grand soin.

2. Les astuces pour optimiser WordPress

Il suffit de faire une simple recherche sur Google pour trouver des milliers de résultats sur l’optimisation WordPress. Mon objectif n’étant pas de dresser une énième liste d’astuces sur le sujet, je vais me contenter de vous parler de ce que je connais et de ce que j’ai fait sur Weedle. Pour vous donner une idée de ce que valent ces différentes astuces, il faut savoir que ma page d’accueil mettait initialement 16 secondes pour charger. A présent, j’en suis à une moyenne de 3 ou 4 secondes. Un gain non négligeable.

2.1. Optimiser sa base de données :

On l’oublie souvent mais il est nécessaire d’optimiser régulièrement sa base de données afin qu’elle reste aussi réactive qu’au premier jour. Pour se faire, plusieurs options s’offrent à vous. Au choix, vous pouvez passer directement par PHPMyAdmin ou bien installer un plugin dédié pour WordPress. Là encore, il en existe un certain nombre mais, en ce qui me concerne, j’ai opté pour WP DB Manager. Outre le fait de s’intégrer à merveille à l’interface d’administration, il présente comme principal avantage de vous permettre de programmer des tâches pour qu’elles s’exécutent automatiquement.

Concernant la fréquence d’optimisation, vous êtes libre de faire comme bon vous semble mais pour un blog mis à jour régulièrement, un nettoyage hebdomadaire semble être la meilleure option. En tout cas, c’est ainsi que je l’ai paramétré.

2.2. Installer un système de cache pour sa base de données :

De mon point de vue, la base de données est toujours le point faible d’un site et c’est d’autant plus vrai avec WordPress. Surtout si vous êtes hébergés sur un serveur mutualisé. C’est la raison pour laquelle il est nécessaire de faire en sorte de la solliciter le moins possible et c’est aussi la raison pour laquelle il est préférable d’installer un système de cache pour sa base de données.

Là encore, on trouve de nombreux plugins dédiés pour WordPress. Celui que j’utilise, c’est DB Cache. Configurable en un clic, il est à la fois très accessible et très simple à mettre en fonction. Entre autres choses, vous allez avoir la possibilité de paramétrer la durée du cache (par défaut, 5 minutes par requête) ou encore afficher des statistiques directement dans votre thème.

2.3. « Minifier » ses CSS et son Javascript :

L’autre point faible des sites web, ce sont les requêtes HTTP. Chaque image, chaque script, chaque fichier CSS entraine une requête lorsque la page charge. Et plus on a de requêtes, plus la page met du temps à charger. En diminuant le nombre de requêtes HTTP, vous gagnerez quelques précieuses secondes supplémentaires. Pour se faire, de nombreuses méthodes existent. Sur ce point, j’ai sans doute encore du travail à faire mais, pour le moment, je me suis contenté de compresser mes CSS et mon Javascript.

Pour se faire, certains optimisent directement leur serveur, d’autres passent par leur fichier .htaccess mais, en ce qui me concerne, j’ai préféré opter pour un plugin dédié : WP Minify. Ce dernier ajoute le moteur Minify a WordPress, le tout en quelques clics. Inutile de configurer votre serveur, la procédure est complètement automatisée (mais certaines options sont paramétrables par l’intermédiaire de l’interface d’administration).

Attention tout-de-même car si vous utilisez un thème personnel, WP Minify est susceptible de planter. Si vous rencontrez une erreur, je vous invite à récupérer le « header » du thème par défaut et de le coller dans votre propre thème (en l’adaptant si nécessaire).

2.4. Installer un « super » cache :

Si l’on parle de WordPress et de cache dans la même conversation, on pense immédiatement au plugin Super Cache. En effet, sur le sujet, ce dernier reste le plus connu, et pour cause… En effet, il va très loin en créant, pour chaque page, un fichier HTML. Lorsqu’un internaute vient sur votre site, c’est ce fameux fichier HTML qui sera appelé. Du coup, seul Apache sera utilisé pour afficher vos pages, votre base de données n’intervenant qu’en cas de mise à jour de votre contenu (publication d’un nouveau billet et/ou d’un nouveau commentaire).

Seul bémol, pour que Super Cache fonctionne correctement, il faut que votre hébergeur supporte la réécriture d’URL par l’intermédiaire du fichier .htaccess. A ce sujet, je vous conseille de bien lire toutes les informations présentes sur la page de configuration du plugin. Il vous faudra en effet mettre votre fichier .htaccess à jour pour que le cache fonctionne correctement.

En conclusion

Ces quelques astuces d’optimisation sont très loin d’être exhaustives mais elles présentent le mérite d’être compatibles avec tous les hébergeurs, du dédié au mutualisé en passant par le virtualisé. En préparant cet article, j’ai en effet effectué quelques recherches sur le web et la plupart des conseils glanés demandaient l’utilisation d’un serveur dédié. Évidemment, si vous avez d’autres astuces, n’hésitez pas à vous manifester dans les commentaires de ce billet.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Comme vous allez le voir, cette sélection est assez large. Certaines pages d’erreur 404 sont très connues, d’autres moins. Dans tous les cas, on remarquera le grand soin qui leur a été apporté. D’un certain sens, les pages d’erreur 404 permettent aux entreprises de mieux séduire et aux particuliers de s’affirmer davantage.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Pourquoi optimiser son site ?

Comme je l’ai mentionné dans l’introduction de ce billet, le temps du 56k est désormais révolu. Même s’il existe encore et toujours des irréductibles, le câble et l’ADSL se sont considérablement démocratisés ces dernières années et ce n’est encore que le début puisque la fibre optique commence à faire son apparition dans les grandes villes, notamment Paris.

Oui, mais il y a un autre point à prendre en considération lorsqu’on décide de créer et de lancer son site ou son blog : l’hébergement de ce dernier. Globalement, et sans trop rentrer dans les détails, vous pouvez opter pour deux types de solution : le serveur dédié (ou virtualisé, je le compte dedans aussi) ou le mutualisé. Si dans le premier cas votre site sera hébergé sur une machine à part entière, et pourra donc allégrement puiser dans les ressources de cette dernière, ce n’est pas le cas du mutualisé. En effet, comme son nom l’indique, un serveur configuré en mutualisé héberge plusieurs sites différents et réparti donc ses ressources entre ces derniers. Autant vous dire que, dans ce contexte, vous devez faire en sorte d’optimiser au maximum vos pages. Si vous ne le faites pas, alors vous risquez de déclencher des alertes (lorsque vous consommez trop de ressources). Pour vous donner là encore un exemple concret, OVH gère très finement ces alertes. Si vous dépassez 150 alertes CPU en une journée, alors votre compte est tout bonnement suspendu.

Si cela peut ennuyer le particulier, cela peut également coûter très cher au professionnel. Un site hors ligne durant plusieurs jours, ce n’est pas vendeur. Sans compter que si votre site est suspendu, alors les robots des moteurs de recherche ne vous trouveront plus et cela pourra par conséquent pénaliser votre référencement.

On peut également ajouter à cela le fait que tous les internautes n’ont pas forcément accès au haut débit. Dans ce contexte, vous comprendrez sans doute pourquoi il est primordial de bien optimiser ses pages. Et en la matière, même si l’on ne peut se contenter des CSS Sprites, le fait est que cette technique vous permettra de réduire considérablement l’affichage de vos pages.

Les CSS Sprites, le principe

Un site internet est presque toujours constitué d’images situées en arrière plan. Si nous prenons l’exemple de Weedle, il faut savoir que mon thème compte 36 images de fond, situées aussi bien dans l’entête du blog que dans la colonne latérale que dans son pied de page. Lorsque vous venez ici, le serveur doit donc renvoyer 36 images bien distinctes, ce qui fait 36 requêtes HTTP. Même si vos images sont correctement optimisées, il n’empêche que ce point entraîne une consommation importante de ressources. 36 images de petite taille sont plus « lourdes » à gérer qu’une seule grosse image.

Et justement, c’est le principe même des CSS Sprites. Au lieu d’avoir plusieurs images à gauche et à droite, vous allez toutes les regrouper dans une seule et même image. Ensuite, dans vos CSS, il suffira d’utiliser la propriété « background-position » pour les appeler. Bien évidemment, la technique n’est pas facile puisque vous êtes censés calculer la position de chacune de vos images sur cette fameuse grille. En cas d’erreur, c’est donc la mauvaise image qui pourrait être appelées.

A ce stade de l’article, vous devez sans doute vous dire que cette technique est trop compliquée, qu’elle doit prendre trop de temps à mettre en place et vous êtes même peut-être sur le point de passer à autre chose. Surtout, ne partez pas, parce que nous allons justement voir qu’il existe des outils et des astuces pour simplifier considérablement la mise en place des CSS Sprites.

Les CSS Sprites, les préparatifs

Concrètement, il existe deux moyens de mettre en place des CSS Sprites sur son site ou son blog : le faire à la main et risquer de devenir complètement fou à force de calculer la position des éléments ou bien utiliser un outil qui va faire une partie du travail à votre place. Attention cependant car même en utilisant ce type d’outils, vous devrez utiliser ce que vous avez entre vos deux oreilles et maîtriser un minimum les CSS.

Dans un premier temps, il suffit de créer son thème comme d’habitude, et donc de concevoir sa charte sur un logiciel dédié (Gimp ou Photoshop) puis de la découper comme s’il s’agissait de réaliser une intégration standard. Une fois vos images découpées, on les intègre comme d’habitude. Là, deux solutions s’offrent à vous :

1. Positionner chaque élément de manière traditionnelle en utilisant la propriété « background » renvoyant sur les images adaptées.
2. Passer directement à la phase des CSS Sprites.

Là, en toute franchise, je vous recommande la première solution. Cela vous prendra un peu plus de temps, certes, mais cela vous permettra également de corriger pas mal de bugs et de partir sur un document propre. Bien sûr, vous serez peut-être tenté de sauter cette étape mais sachez que vous risquez de passer beaucoup plus de temps à corriger ce qui n’ira pas qu’à bien préparer vos CSS.

Les CSS Sprites, la mise en place

Une fois que votre document est prêt et que votre charte est correctement découpée, vous allez pouvoir passer aux choses sérieuses. Pour générer nos CSS Sprites, nous allons passer par un service dédié : http://spritegen.website-performance.org. Il en existe beaucoup d’autres, c’est un fait, mais c’est ce dernier que j’utilise le plus souvent dans le cadre de mes projets personnels et professionnels.

Pour générer les CSS Sprites, il suffit donc de suivre les étapes suivantes :

1. Compressez toutes vos images dans un fichier ZIP. Ce dernier ne doit pas excéder 0,5MB.
2. Rendez-vous sur http://spritegen.website-performance.org et sélectionnez votre fichier zippé en utilisant le bouton « parcourir ».
3. Au niveau des réglages, contentez-vous des suivants :
   • Cochez « Ignore duplicate images ».
   • Laissez 100% en « width » et en « height ».
   • Cochez « Maintain aspect ratio ».
   • Choisissez l’alignement horizontal (indispensable si vous avez des images de fond que vous répétez sur un axe).
   • Cochez « Wrap columns to fix Opera bug ».
   • Choisissez ensuite le format de votre choix ainsi que le niveau de couleurs.
   • Indiquez les préfixes de votre choix.
   • Validez en cliquant sur le bouton adéquat.

Après quelques secondes de chargement, le service va vous renvoyer plusieurs informations à l’écran. Grâce à elles, vous allez pouvoir intégrer facilement les CSS Sprites à vos CSS.

Pour intégrer les CSS Sprites, il suffit donc de suivre les étapes suivantes :

1. Commencez par télécharger l’image générée en cliquant sur le bouton adéquat.
2. Dans votre feuille de style, créez une classe qui intègrera cette image en background (exemple : « .sprite_global {background :url(img/sprite.png) no-repeat top left;} »).
3. Copiez / collez tous les « background-position » dans leurs classes respectives.
4. Dans votre fichier HTML / PHP / ASP, ajoutez la classe générale créée lors de l’étape 2 aux éléments concernés (exemple : « class= »sprite_global »).
5. Enregistrez vos différents fichiers, le tour est joué.

A noter que je vous recommande de vérifier le résultat de vos modifications au fur et à mesure afin d’être certain que toutes vos images de fond s’affichent bel et bien sur les pages de votre site ou de votre blog. On notera au passage que pour répéter une image de fond sur un axe, il est indispensable d’ajouter la propriété « background-repeat : repeat-x » (ou repeat-y selon l’axe souhaité). Cela dit, comme indiqué un peu plus haut, cela ne fonctionnera que si vous avez opté pour l’alignement horizontal au moment de générer votre image principale.

Et finalement

Pour en terminer avec cet article, on rajoutera simplement que le travail d’optimisation de son site ne s’arrête pas à l’utilisation des CSS Sprites. Ces derniers amélioreront considérablement les choses mais ils n’ont rien de miraculeux non plus. Plus tard, je publierai un article sur d’autres méthodes d’optimisation.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Un bouton style Windows Vista

Depuis sa sortie, et comme pour la plupart des O.S de la firme de Redmond, Windows Vista a inspiré nombre de designers. C’est la raison pour laquelle on trouve aujourd’hui de nombreux sets d’icônes inspirés par le style de ce système d’exploitation. Les menus ne dérogent pas à la règle, comme le prouve ce tutoriel très bien réalisé.

2. Un menu inspiré de Windows Vista (encore)

Encore un menu inspiré de Windows Vista, mais un peu plus détaillé que le précédent. On remarquera d’ailleurs le fond du menu, qui a subit de nombreux effets de transparence et qui fait ressortir le système de navigation proposé.

3. Un bouton mat et minimaliste

Très complet, ce tutoriel vous apprendra à travailler aussi bien sous Photoshop qu’au niveau des CSS. Vous apprendrez ainsi à créer une image, à l’affecter à un bouton et à la déplacer suivant l’état de la souris de l’internaute. Précisons également que Six Revision propose une archive complète contenant l’image, bien sûr, mais aussi le PSD et les CSS de l’exercice.

4. Un menu « plastique »

Certains webdesigners aiment s’inspirer de matériaux pour construire leurs systèmes de navigation. Avec ce tutoriel, vous apprendrez à réaliser un menu type « plastique ». Au passage, je vous conseille d’en profiter pour jeter un coup d’oeil à la charte graphique du site source, qui est vraiment magnifique.

5. Des boutons « glossy »

Si l’on devait citer deux grandes tendances « web 2.0″, ce serait sans doute les reflets et les effets d’ombre. Tant mieux, car c’est justement ce que va vous faire travailler ce tutoriel. A conseiller à tous ceux qui ne sont pas très familiers des effets de calque.

6. Un menu noir et bleu

Un peu plus conventionnel, ce tutoriel permettra de vous familiariser avec les effets de volume et de lumière. Là encore, il s’agit d’effets incontournables dont il devient de plus en plus difficile de se passer.

7. Un menu minimaliste

Parfois, la simplicité paie. Ce menu blanc et fin pourra s’intégrer à la plupart des chartes graphiques. L’inconvénient de ce genre de menus, c’est qu’ils se font parfois trop discret. Heureusement , le rollover bleu vous permettra d’attirer l’attention de vos visiteurs.

8. Un menu minimaliste et sombre

Pourquoi faire compliqué lorsqu’on peut faire simple ? Ce tutoriel, reposant sur 10 étapes seulement, vous permettra de réaliser un menu complet, minimaliste mais très agréable à l’oeil. A noter qu’il conviendra sans doute à tous les publics, y compris à ceux qui apprennent tout juste à maitriser Photoshop.

9. Un menu minimaliste blanc

Toujours dans le minimalisme et dans le discret, voici un autre menu tout en douceur qui ne vous laissera peut-être pas indifférent. Là encore, il s’agira de jouer avec les effets de dégradé et d’ombre, tout en prenant soin de choisir des couleurs adaptées et nuancées.

10. Un menu futuriste

Si ce genre de menus était très à la mode dans les années 90-2000, cela n’est plus vraiment le cas aujourd’hui. En revanche, ce tutoriel est surtout intéressant sur le plan technique puisqu’il vous permettra de vous familiariser avec les formes et certains effets de calque.

11. Un menu en trois dimensions

Si les menus figés et traditionnels vous déçoivent, alors ce tutoriel proposé par PSD Tuts risque de vous intéresser. En effet, il vous apprendra à utiliser les effets de dégradés, d’ombres et de lumières afin de rendre vos systèmes de navigation plus vivants et plus séduisants. Là encore, les techniques étudiées sont nombreuses et vous permettront d’approfondir votre connaissance de l’outil.

12. Un menu « aquarelle »

Là encore, le manuscrit, le « fait main » revient de plus en plus à la mode. Il n’est ainsi pas rare de voir des blogs opter pour ce style si particulier (je pense notamment aux blogs BD). Justement, durant ce tutoriel, vous apprendrez à fabriquer du papier et à l’intégrer au mieux au reste de votre charte. Et comme un bonheur ne vient jamais seul, le site source vous conseillera également l’une des plus belles polices écrites qui existe.

13. Un menu moderne noir

Là encore, ce menu fait partie de ce qui pouvait se faire dans les années 90-2000, avec quelques effets de reflet en plus. Cela dit, il n’en reste pas moins pertinent et le tutoriel proposé vous permettra, une fois de plus, de vous familiariser avec les effets de calque.

14. Un menu professionnel

Une entreprise ne peut pas tout se permettre, et c’est d’autant plus vrai sur le web. Tout en proposant un design agréable, séduisant et épuré, elle doit faire en sorte de ne pas choquer et de convenir à la plupart des publics. Ce que ce tutoriel vous propose, c’est justement ça : parvenir à réaliser un système de navigation agréable et professionnel.

15. Un menu futuriste

Aujourd’hui, en matière de web, il ne faut plus montrer, il faut suggérer. Ce que fait justement ce menu avec ses rollovers gros clair qui dénotent à peine du fond blanc du menu. Au passage, on remarquera que la police d’écriture utilisée occupe une place de choix puisqu’elle parvient à déterminer l’ambiance générale de la création. Avec une autre police, ce menu n’aurait pas eu l’air aussi futuriste.

16. Un menu tout en décorations

Si les techniques utilisées pour réaliser ce menu sont globalement les mêmes que pour les autres menus de cette sélection, ce tutoriel n’en reste pas moins très intéressant, notamment en ce qui concerne le travail effectué sur le fond. Malheureusement, ces étapes-là n’ont pas été très détaillées, il vous faudra donc faire preuve de patience et de rigueur pour obtenir ce résultat.

17. Un menu très « web 2.0″

Là encore, ce tutoriel vous permettra de jongler avec les différents effets de calques proposés par l’outil. Sans être inoubliable, l’effet produit est tout-de-même intéressant.

18. Un menu inspiré par Apple

Ce n’est un secret pour personne, les designers d’Apple ont toujours su faire parler d’eux. Ainsi, depuis ces dernières années, nous avons vu débarquer un bon nombre de tutoriels vous proposant de recréer le système de navigation du site officiel de la marque. Celui-ci en est un de plus.

19. Encore un menu inspiré par Apple

Bien que ce menu puisse paraître redondant une fois confronté au quatorzième menu présenté dans cette sélection, on comprend vite qu’il n’en est rien. En effet, celui-ci avait pour objectif de reproduire le menu proposé sur le site officiel de la marque. Il en reprend donc le logo, la police ainsi que la présentation générale et constitue un bon moyen d’éduquer son oeil.

20. Un menu inspiré de la Wii

Cette fois, c’est de Nintendo dont s’est inspiré le concepteur de ce tutoriel très élaboré qui vous propose de reproduire le même menu de la Wii. Très détaillé, il vous apprendra à utiliser conjointement toutes les techniques vues pendant les tutoriels de cette sélection. Au passage, on remarquera l’effet de lumière bleue sur la gauche, qui est vraiment magnifique.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Siddharth

L’intérêt de ce site résulte d’un savant mélange des genres : le moderne et le traditionnel. Ainsi, si la structure du site correspond plus ou moins aux nouvelles normes définies par le web 2.0 (menu + diaporama + contenu + footer), les images utilisées ne manquent pas de nous rappeler certaines techniques picturales traditionnelles (notamment les rollovers du menu).

Plus important, le contraste entre le fond et le contenu est parfaitement respecté. L’ensemble de couleurs est cohérent, lisible et parfaitement clair.

• Point(s) fort(s) : structure des pages, contraste contenu / fond, techniques utilisées (cf diaporama).
• Point(s) faible(s) : logo peu lisible, trop flouté, textures de faible résolution (cf fond de page).

2. Sumo

Profondément minimaliste, ce site laisse la place à l’essentiel. Le logo, bien dégagé, attire immédiatement l’oeil et il en va de même pour le message de bienvenue (le fameux « hello text »), que l’on retrouve de plus en plus sur les sites modernes. On remarquera aussi la bordure de l’image, qui tranche de manière adéquate avec le fond. Là encore les nuances sont bien respectées, le texte est parfaitement lisible.

En revanche, la structure de la page laisse un peu à désirer. Si le haut est assez clair et bien réalisé, il n’en va pas de même pour le reste des informations présentes. Il faudra ainsi descendre plus bas dans la page pour découvrir les réalisations de cette agence.

• Point(s) fort(s) : présentation du logo et de l’accroche, contraste contenu / fond, bordure des photos.
• Point(s) faible(s) : structure peu cohérente, mauvais emplacement de certaines informations.

3. William Turner

Il n’y a rien de plus adéquat qu’un site aux couleurs sombres pour jouer avec des effets lumineux. Et c’est justement la technique qui a été adoptée par William Turner. Si l’intégralité de la page est conçue sur la même palette de couleurs (grise / bleue), certains éléments sont mis en évidence grâce à ce principe. C’est ainsi le cas du bandeau du haut, séparé du reste de la page par un liseret d’ombre, ou encore des images, mises en évidence par une bordure beaucoup plus claire que la couleur du background.

De la même manière, le menu est simple et efficace. Chaque bouton est correctement séparé (là encore par un liseret d’ombre) et chaque titre de rubrique est accompagné d’une brève description afin de permettre aux visiteurs de mieux comprendre ce dont elles traitent. A noter que j’ai également adopté cette stratégie sur Weedle, comme vous vous en êtes certainement rendu compte.

Structurellement, la page est parfaite. Le haut est bien mis en valeur, soit à l’aide de ces jeux de lumières dont je vous ai déjà parlé, soit à l’aide de pictogrammes (cf la brochure et la « gift list »). Plus bas, on retrouve une fois de plus le diaporama habituel. Point positif, les effets de transition sont originaux et très agréables sur le plan visuel. Il en va d’ailleurs de même pour les nombreuses miniatures de produits ainsi que pour le reste du contenu de la page. Quant au footer, et bien il est lui aussi très bien réalisé. En un clic, il est possible de s’abonner à la newsletter du site ou d’accéder à l’ensemble des mentions légales.

• Point(s) fort(s) : ensemble graphique très soigné, nombreux effets lumineux, diaporama original, très bon contraste entre le contenu et le fond.
• Point(s) faible(s) : rollover du menu trop discret.

4. CSS DSGN

Ce qui dénote ce site du reste de cette sélection, c’est avant tout sa structure très originale. En effet, et c’est un choix plutôt inattendu, la barre latérale occupe autant de place (sinon plus) que le contenu du site. On y retrouve donc le menu du site, ses archives, les sites ayant récolté le plus de voix ainsi que la blogroll. Côté contenu, dans la mesure où ce site se présente comme une galerie, l’accent est évidemment mis sur les réalisations référencées. Les vignettes représentant ces dernières sont grandes, elles attirent immédiatement l’oeil et c’est une bonne chose.

En revanche, malgré tous ces points, le site présente un problème de hauteur, le contenu étant plus dense que les informations contenues dans la barre latérale. S’en suit donc un problème d’équilibre flagrant et le sentiment d’un énorme vide en descendant plus bas dans la page.

• Point(s) fort(s) : structure originale, contenu mis en valeur grâce aux vignettes, rubriques immédiatement accessibles.
• Point(s) faible(s) : problème d’équilibre entre le contenu et la barre latérale, liens peu visibles.

5. Glasshouse Apps

L’une des principales tendances du web 2.0, c’est le minimalisme. A l’époque du web 1.0, il fallait créer des sites complets, c’était donc l’information qui primait. Aujourd’hui, c’est toujours le cas à ceci près qu’il faut en plus viser la simplicité et l’accessibilité. C’est vers cette solution que s’est dirigé le site Glasshouse Apps. En dehors d’un logo futuriste auréolé d’une lumière bleutée du plus bel effet, la page tend vers le vide, en proposant pour tout contenu les deux produits mis en avant par la firme.

Dans l’ensemble, la page d’acceuil du site est assez séduisante. Les deux produits, présentés au centre de la page, attirent immédiatement l’oeil. Bien entendu, les deux iPhone doivent y être pour quelque chose. Seul bémol, les deux liens situés en dessus des images ne dénotent pas assez d’avec le fond de la page. C’est d’autant plus dommage que le contenu textuel est, quant à lui, parfaitement contrasté.

• Points(s) fort(s) : simplicité de la charte, logo très bien réalisé, produits mis en valeur.
• Point(s) faible(s) : liens du menu manquant de contraste.

6. Lucky Star Tatoo

Certains sites vont plus loin et ne se contentent pas de proposer une structure adapté à leur contenu, préférant miser le tout pour le tout en proposant un univers marginal et étonnant. C’est le cas de Lucky Star Tatoo, un site mettant en valeur le travail d’un collectif de tatoueurs. La page d’accueil est ainsi structurée en trois parties horizontales : le logo du site (avec un fond adapté), les dernières actualités et les principales catégories proposées. Le travail effectué est très précis, le fond de la page est magnifique et contraste parfaitement avec le fond des encarts.

Si la page d’accueil du site est magnifique, il est néanmoins nécessaire d’aller faire un tour dans les différentes catégories proposées pour se rendre compte du travail effectué. Ces dernières sont très bien structurées elles aussi. On ne se perd pas, l’oeil est dirigé à travers les informations présentées. Parfois, de légères incohérences sont à déplorer (essentiellement des problèmes d’alignement) mais elles ne nuisent pas à la lisibilité du contenu.

Point très positif, les galeries d’images sont magnifiques.

• Point(s) fort(s) : univers graphique cohérent, bon contraste entre le contenu et le fond, galeries d’images magnifiques.
• Point(s) faible(s) : quelques problèmes d’alignement au sein des rubriques.

7. AppBoy

Là encore, il s’agit d’un de ces services estampillés « web 2.0″ comme on en trouve beaucoup depuis quelques mois. Entièrement dédié aux applications de l’iPhone, il se présente comme une galerie et toute sa structure en témoigne. De ce côté, justement, rien à signaler : les différentes zones de la page sont bien démarquées et ne présentent aucun problème de contraste (en dehors du « learn more » situé en dessous de l’accroche). Même chose pour le menu principal, très bien réalisé. Les trois boutons attirent l’oeil et les menus déroulants apparaissant au passage de la souris sont très doux et très agréables sur le plan visuel.

Même chose pour le contenu de la page, qui vous permet de découvrir certains produits en fonction de différents critères. Les zones sont bien délimitées et les nombreuses images présentes attirent immédiatement l’attention. Seul petit bémol concernant ce point, certaines images sont en faible résolution (c’est le cas de l’image représentant Shazam).

En dehors de ces différents points, on pourra saluer la très bonne intégration de Twitter, ainsi que l’emplacement des différents partenaires. Même chose pour le footer du site, qui vous présente toute l’arborescence du site.

• Point(s) fort(s) : structure cohérente et irréprochable, menu principal très agréable, bonne intégration de Twitter.
• Point(s) faible(s) : mauvais contraste de certains liens, quelques images en faible résolution.

8. Aurélien Réaut

Là encore, le portfolio d’Aurélien Réaut reprend la plupart des concepts initiés par le web 2.0. Le site fait donc la part belle aux effets de lumières, d’ombres et de transparence. Côté structurel, la page d’accueil est parfaitement cohérente. Découpée en quatre zones (le haut, qui contient le logo et le menu, le diaporama, le contenu divisé en trois colonnes et le footer), elle est à la fois très claire et très agréable sur le plan visuel. Au passage, on appréciera les quatre boutons du menu, dont les couleurs rappellent celles du fond de la page.

Côté diaporama, les effets de transition sont tout-à-fait conventionnels mais on peut citer la présence d’un bandeau permanent situé en haut à droite qui donne pas mal de cachet à l’ensemble. Même chose pour les boutons de défilement et leur reflet. Concernant les trois colonnes de contenu, c’est un peu la même chose. Les bordures et l’utilisation de couleurs différentes permettent à l’oeil de bien les dissocier les unes des autres.

• Point(s) fort(s) : structure très pertinente, charte graphique cohérente au niveau des couleurs, diaporama agréable à l’oeil.
• Point(s) faible(s) : léger problème de contraste sur l’accroche, rollover du menu relativement classique, footer peu détaillé.

9. Marie Julien

Ce qui frappe d’entrée de jeu avec la page d’accueil de ce blog, c’est sa structure assez originale. L’ensemble du contenu est ainsi décalé sur la droite, faisant apparaître sur la gauche une marge assez large que viennent séparer du reste de la page deux bandeaux de couleur. Le logo, quant à lui, se situe à cheval sur ces deux zones et interpelle par conséquent l’oeil des visiteurs. Même chose pour les deux énormes boutons situés à droite du logo et qui permettent de se rendre directement sur le site personnel des deux auteurs qui collaborent à ce projet.

Côté menu, on peut dire que ce dernier est assez dense. Décliné sur quatre colonnes et sur deux lignes, introduit par une accroche un peu trop discrète, il permet de naviguer facilement au sein des rubriques présentées. A noter également la présence d’un lien qui doit normalement faire apparaître, ou disparaître, le menu mais qui ne fonctionne pas chez moi (Firefox Mac). De la même manière, on trouve juste à côté de ce lien un autre lien qui, lui, permet de se déplacer directement jusqu’au contenu du site et donc jusqu’aux différents articles publiés par les auteurs.

Si la structure du site est vraiment impressionnante, le contraste laisse toutefois un peu à désirer, du moins en ce qui concerne le menu. Le fond de ce dernier étant hachuré et la police utilisée n’étant pas bien grande, l’oeil a parfois du mal à lire le contenu proposé. A mon sens, il aurait fallu soit opter pour une taille de police un peu plus grande, soit la foncer davantage.

• Point(s) fort(s) : structure original, couleurs, menu complet, bonne cohérence graphique.
• Point(s) faible(s) : contraste laissant parfois à désirer.

10. Petra Quilitz

Premier site en flash de notre sélection, le portfolio de Petra Quilitz s’impose plus comme une expérience visuelle qu’autre chose. Dès l’accueil, on est surpris par la qualité des animations et de la réalisation. Le concepteur du site semble avoir décidé de jouer sur la dualité en opposant des couleurs claires à gauche à des couleurs plus sombres à droite et le rendu ne manque pas de justesse.

Côté navigation, malheureusement, ce n’est pas la même chose. Si la réalisation des pages internes du site est vraiment magnifique, on se surprend à douter, à se perdre et à ne pas savoir que faire. Au bout d’un moment, on se rend compte qu’il suffit de placer le curseur de sa souris en haut pour faire apparaître les boutons de défilement des images ou à droite pour accéder au menu mais j’avoue ne pas avoir été vraiment convaincu par le principe.

C’est d’autant plus dommage que le reste est vraiment très impressionnant. Tout est soigné dans le moindre détail. Les vignettes des images du menu s’agrandissent au survol de la souris, les liens s’illuminent, on peut en un clic adapter l’image de fond à la résolution de son écran et, à part quelques problèmes d’alignement, on a finalement le sentiment de vivre une expérience unique.

• Point(s) fort(s) : réalisation magnifique, animations réalistes, photographies en haute résolution.
• Point(s) faible(s) : navigation complexe, quelques problèmes d’alignement dans le menu.

11. BadaBing Design

Là encore, ce site est très intéressant sur le plan structurel. Comme vous pouvez le voir sur la capture précédente, tout le contenu du site se situe dans une bande verticale située au milieu, un peu à droite. Le fait qu’elle soit décentrée la met immédiatement en valeur. Même chose pour le logo situé à gauche. D’ailleurs, afin de respecter une certaine cohérence et de correspondre le plus possible aux règles d’ergonomie d’aujourd’hui, on peut constater que le menu principal du site a été placé immédiatement à droite du logo, dans sa continuité. Seul bémol, l’alignement des quatre rubriques du site n’est pas parfait, il aurait peut-être été préférable de les placer dans des étiquettes de même taille. De la même manière, on peut remarquer tout en haut de la page un bouton noir. En cliquant dessus, le plan complet du site s’affiche, le tout avec un effet javascript très sympathique.

Concernant le contenu, on peut dire que sa présentation est irréprochable. Pour construire son contenu, le webdesigner a ainsi opté pour un double diaporama : vertical pour les images et horizontal pour le texte. Résultat des courses, l’ensemble est très dynamique. D’autant plus que, pour les plus impatients, le concepteur du site a également pensé à placer deux boutons (les deux flèches grises situées entre le texte et l’image) afin de permettre aux visiteurs de faire défiler le diaporama manuellement.

• Point(s) fort(s) : structure originale, positionnement du menu principal et secondaire, réalisation du diaporama, fond de la page.
• Point(s) faible(s) : problème d’alignement au niveau du menu principal, footer peu détaillé.

12. Red Panda Creative

Ce site est un peu un paradoxe à lui tout seul. Doté d’un ensemble graphique agréable, sa structure manque néanmoins de cohérence à cause d’un alignement beaucoup trop approximatif. Concernant les bons points à signaler, on peut citer la découpe horizontale du site mettant en valeur la partie du haut (celle qui contient justement le logo, le menu et l’accroche) ou encore le soin qui a été apporté au fond de la page.

En revanche, c’est au niveau de la partie basse de la page que les choses se corsent. Les éléments contenus dans l’encart gris foncé sont décalés par rapport aux éléments contenus dans la partie plus clair. Ce problème d’alignement crée un déséquilibre très préjudiciable dans la page. Le plus regrettable étant que ce point concerne toutes les pages du site.

• Point(s) fort(s) : structure originale, fond de la page.
• Point(s) faible(s) : problème d’alignement entre les deux parties principales de la page.

13. Victoria Mach

Les portfolio ont aussi beaucoup changé depuis l’avènement du web 2.0. Plus légers, plus minimalistes, ils s’articulent à la fois autour de l’expérience, de la formation et des réalisations de leur propriétaire, mais aussi et surtout autour de leur activité numérique. Plus que de présenter un domaine d’expertise ou des connaissances, il s’agit de présenter une personne. Et c’est évidemment le cas du portfolio de Victoria Mach, qui va droit à l’essentiel et qui centralise toutes les informations sur une seule et même page.

On commence donc avec une accroche (encore un « hello text ») qui met en évidence les principaux mots-clés définissant la personne qui se cache derrière le site (c’est un peu l’effet Google). On continue ensuite avec un diaporama traditionnel, doté d’un effet de transition basé sur l’opacité des éléments affichés. La réalisation est agréable, on appréciera la bordure bleue très fine qui n’est pas sans rappeler le fond des mots-clés mis en évidence dans l’accroche.

Plus bas, on passe à une brève description de la personne ainsi qu’à la galerie des réalisations. Organisées en deux colonnes, ces dernières sont magnifiquement mises en valeur. En ce qui me concerne, j’ai beaucoup apprécié l’effet de rollover sur les images de la galerie (là encore basé sur l’opacité de l’image). Il est à la fois léger et agréable. En revanche, les choses se corsent un peu après, avec le formulaire de contact qui n’est, à mon sens du moins, pas adapté au reste de la charte. Certes, on remarquera le même bordure bleue que celle du diaporama sur les champs du formulaire, mais ce dernier reste dans l’ensemble beaucoup trop sombre. Tout comme le footer. Le plus dommage, c’est que ce dernier contient des informations intéressantes et qu’il aurait vraiment gagné à être mis plus en valeur.

• Point(s) fort(s) : la structure simple et épurée, l’accroche, le diaporama, l’effet de rollover sur les images.
• Point(s) faible(s) : le formulaire de contact, le footer du site.

14. Fontplore

Structurellement, ce site est irréprochable. Le logo est bien mis en valeur dans la partie haute et le contenu de la page est parfaitement bien organisée. Chaque paragraphe est accompagné d’une très belle photographie et cette dernière se trouve tantôt à gauche, tantôt à droite, cette alternance guidant ainsi l’oeil des visiteurs. Même chose pour le contraste des titres et des paragraphes qui confère une grande lisibilité à l’ensemble. En somme, il s’agit là d’un site carré, agréable et professionnel, mais qui souffre finalement de ses qualités.

Car en effet, si le contenu est très bien mis en valeur, il est aussi trop massif : trop d’informations tue l’information. Bien que correctement aérés, les paragraphes sont un peu trop présent sur la page, au détriment des photographies qui auraient sans doute gagné à être mises un peu plus en valeur.

• Point(s) fort(s) : structure cohérente et rigoureuse, qualité des photographies, très bon contraste.
• Point(s) faible(s) : contenu trop massif, finalement peu attractif.

15. Yazsoft

Ce qui frappe de prime abord avec ce site, c’est la qualité de la réalisation et le respect des concepts élémentaires d’ergonomie. En haut, on retrouve ainsi le logo de la marque ainsi que le menu permettant de naviguer au sein des différentes pages du site. On remarque d’ailleurs que la rubrique dédiée à la boutique en ligne est mise en valeur par rapport aux autres. En dessous, on retrouve le nom de leur produit, accompagné d’un bref descriptif, le tout avec une image qui interpelle l’attention. Là encore, afin de simplifier les choses, les concepteurs du service ont rajouté trois boutons à cet endroit : un pour obtenir une démonstration, un autre pour télécharger l’application et enfin un dernier pour l’acheter.

Plus bas, on retrouve trois encarts très soignés mettant en relief certaines informations : un message d’accueil et deux offres spéciales afin de capter l’attention des futurs clients. Vient enfin le bas de page (ou footer) avec les mentions légales d’usage.

Dans l’ensemble, ce site est une très bonne réalisation. Ses concepteurs ont parfaitement pris en compte les exigences d’un site commercial. Sans surcharger les visiteurs avec des informations dont ils n’ont pas forcément besoin (cf site précédent), il leur facilite grandement le choix. En quelques clics, ils ont accès à l’essentiel et n’ont plus ensuite qu’à se laisser séduire par le produit présenté.

• Point(s) fort(s) : réalisation générale, structure du site, navigation simplifiée, encarts soignés.
• Point(s) faible(s) : le footer.

16. Classy Llama Studios

Classy Llama Studios est la preuve qu’on peut faire simple et beau à la fois. Doté d’une structure très conventionnelles (logo / menu / contenu / footer), il offre une interface élégante et dépouillée, tout en mettant l’accent sur le contenu diffusé. Très stylisé, le logo s’accorde à merveille avec le reste. Il en va de même pour le menu par onglets qui vient couper la page en deux. Plus bas, le diaporama ne nous réserve aucune surprise : simple et fonctionnel, il ne propose pas d’options particulières, tout comme le contenu réparti sur quatre colonnes.

On peut également citer la présence d’un bandeau noir placé en bas de la page et contenant un lien permettant aux visiteurs d’accéder au formulaire de contact. Son positionnement est absolu, il reste visible quelle que soit votre position dans la page. C’est une bonne idée, mais qui aurait gagné à être un peu plus développée.

• Point(s) fort(s) : esthétisme agréable, très bon contraste au niveau des couleurs, menu vivant.
• Point(s) faible(s) : le contenu réparti sur quatre colonnes, diaporama un peu simpliste.

Note : Les différentes critiques formulées durant cette sélection sont personnelles et subjective et il est par conséquent possible que vous ne pensiez pas comme moi. Si tel est le cas, n’hésitez pas à vous manifester dans les commentaires de ce billet.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

C’est une bonne nouvelle pour pas mal de gens, Internet Explorer 6 est en train de vivre ses derniers jours. Il aura fallu attendre plusieurs années mais une nouvelle page est donc actuellement en train de se tourner. Oui, mais de nombreux internautes continuent encore d’utiliser ce navigateur vétuste et c’est la raison pour laquelle j’ai décidé de lister les différents « hacks » que je connais (et que j’ai souvent utilisé) pour ce navigateur.

1. Les hacks CSS pour Internet Explorer 6

Pour commencer, nous allons nous intéresser à quelques règles CSS qui vont nous permettre de choisir les propriétés à interpréter selon le navigateur utilisé. Cela peut vous paraître confus, mais nous allons voir qu’il n’en est rien. En réalité, nous allons jouer avec les défauts intrinsèques d’Internet Explorer 6 afin de le prendre à son propre piège.

1.1. La règle « !important » :

Cette règle peut s’appliquer à toutes les propriétés CSS. Globalement, une propriété accompagnée de la règle « !important » ne sera pas interprétée par Internet Explorer 6, uniquement par les autres navigateurs du marché. En la jouant finement, il est donc possible de rendre certaines propriétés invisibles aux yeux de ces derniers et donc de régler la plupart des bogues honteux du navigateur de Microsoft. L’exemple suivant vous permettra de mieux comprendre ce dont je parle :

div#mon_calque {
background-color:blue !important; background-color:green;
}

Dans cet exemple, nous définissons deux couleurs de fond pour notre calque. Dans ce cas, puisque Internet Explorer 6 est incapable de comprendre la règle « !important », il affichera un fond vert. Les autres navigateurs, eux, afficheront un fond bleu. En jouant avec les propriétés CSS les plus problématiques (je pense notamment aux « padding » et « margin »), il sera donc possible de résoudre la plupart des erreurs d’interprétation d’Internet Explorer 6.

Note : Il est aussi possible de noter « !background-color:green; » à la place de « background-color:green; !important » mais il faut savoir que seule cette dernière expression est valide W3C.

1.2. Le hack * html :

Toujours dans le même ordre d’idée, Internet Explorer 6 est totalement incapable de comprendre le marqueur « * ». Pour les autres navigateurs, il pointera tous les éléments se trouvant au-dessus de la balise « html ». Comme il n’y en a pas, les propriétés se trouvant à cet endroit ne seront pas interprétés. Internet Explorer 6, quant à lui, se laissera prendre au piège et interprétera donc tout ce qui se situera à cet endroit. Là encore, je vous propose l’exemple suivant :

* html body { background-color:blue; }
html body { background-color:green; }

Une fois de plus, nous avons défini deux couleurs de fond. Sachant que Internet Explorer 6 est incapable de comprendre le marqueur « * », il affichera la couleur bleue pour notre page. Les autres navigateurs, quant à lui, l’afficheront en vert.

1.3. Le hack underscore :

Même principe, il est également possible d’utiliser des caractères spéciaux pour rattacher des propriétés CSS à un navigateur spécifique. On notera d’ailleurs que cette méthode fonctionne aussi bien pour Firefox que pour Internet Explorer 6 ou encore Internet Explorer 7. L’exemple suivant parle de lui-même :

div#mon_calque {
width:400px; height:250px; margin:0 0; padding:0 0;
background-color:red; /* Pour tous les navigateurs */
/background-color:blue; /* Pour IE 7 seulement */
_background-color:green; /* pour IE6 seulement */
}

Note : Il est également possible d’utiliser ce « hack » pour Internet Explorer 7. En revanche, il faudra écrire « *+html {} » à la place de « * html {} ».

En jouant avec ces deux méthodes, il est possible de corriger la plupart des erreurs d’affichage d’Internet Explorer 6. Cela dit, si les CSS sont relativement puissantes, il arrive parfois qu’elles ne soient d’aucun secours. C’est la raison pour laquelle nous allons à présent nous intéresser aux « hacks » HTML.

2. Les hacks HTML pour Internet Explorer 6

Les astuces HTML pour Internet Explorer 6 fonctionnent sur le même modèle que les astuces CSS. Il s’agira en effet de faire en sorte qu’une partie de notre code ne soit compréhensible que de ce dernier, et pas des autres. Pour se faire, il existe plusieurs méthodes mais, la plus connue d’entre elles, c’est le commentaire conditionnel.

2.1. Le commentaire conditionnel :

Le commentaire conditionnel n’est pas vraiment un « hack », il s’agit plutôt d’un commentaire spécial qu’Internet Explorer 6 va interpréter volontairement. C’est à croire que les développeurs du programme avaient prévu le coup. Ces commentaires vont en effet nous permettre de faire passer du code qui ne sera compris que de leur navigateur. Là encore, un exemple vaut mieux que mille discours :

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="style_ie.css" mce_href="style_ie.css" />
<![endif]-->

Concrètement, cet exemple nous permet de définir une feuille de style spécifique pour Internet Explorer 6 et une autre feuille de style spécifique pour les autres navigateurs du marché. Attention par contre, parce qu’il est nécessaire d’appeler d’abord la feuille de style générale et ensuite la feuille de style pour IE.

Note : Il est possible d’utiliser les commentaires conditionnels pour les différentes versions d’Internet Explorer. Un « <!–[if IE 6]><![endif]–> » visera exclusivement Internet Explorer 6 alors qu’un « <!–[if IE 7]><![endif]–> » visera plutôt Internet Explorer 7.

2.2. La transparence PNG :

Là encore, il s’agit d’un bug auquel nous avons tous été confronté au moins une fois dans nos vies de développeur. Si tous les navigateurs sont capables d’interpréter la transparence des images au format PNG, il n’en est rien pour Internet Explorer 6 qui n’y entend rien du tout. Heureusement pour nous, il existe une méthode éprouvée (HTML+CSS)  qui nous simplifie grandement la vie.

Pour la partie HTML, à mettre dans le header de votre page :

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="style_png_fix.css" mce_href="style_png_fix.css" />
<![endif]-->

Et dans votre fichier « style_png_fix.css » :

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Pour avoir déjà essayé plusieurs solutions, cette dernière reste à mon sens la plus simple et la moins hasardeuse à mettre en place. Cela dit, en ce qui me concerne, je préfère tout simplement éviter les PNG transparents et m’assurer que mes images conviennent à tous les navigateurs du marché. C’est sans doute un peu plus long (on s’arrache parfois les cheveux) mais ça évite les mauvaises surprises.

Pour conclure, on peut rappeler que cette liste n’est certainement pas exhaustive mais que ce sont des astuces éprouvées qui m’ont souvent sauvé la vie. Alors bien sûr, les développeurs se posent pas mal de questions sur le sujet. Certains se demandent même s’il n’est pas préférable de ne pas se préoccuper d’Internet Explorer 6 afin de pousser les internautes à changer, ou mettre à jour, leur navigateur. En ce qui me concerne, je sais au moins une chose : lorsqu’on bosse sur un projet pour un client, on ne peut pas se permettre de se poser ce genre de questions. Le client paye pour un site, il faut donc s’assurer qu’il s’affiche de la même manière quel que soit le navigateur utilisé.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.