Design « Ikôn | Inspiration marketing & e-commerce

Comment optimiser la compatibilité de votre site web

24/05/10 - par Guillaume dans Design, E-commerce | 4 commentaires

Quiconque s’est déjà essayé à la création d’un site web s’est forcément heurté à l’épineux problème de la compatibilité entre les navigateurs, en particulier avec les anciennes versions d’Internet Explorer (6 et 7). Malheureusement, ils représenteraient encore à eux deux entre 15 et 20% des visites. En bon webmaster, il est donc impossible de les ignorer.

Fort heureusement, il existe une méthode simple et respectueuse des standards web pour satisfaire leurs petits caprices sans souiller le joli code que l’on a écrit pour des navigateurs plus récents : les CSS conditionnelles.

CSS conditionnelles : la solution élégante pour navigateurs capricieux

Une CSS conditionnelle est une feuille de style appelée au début d’une page HTML qui est uniquement chargée et traitée en fonction du navigateur utilisé par le visiteur. Ce n’est ni un javascript, ni un “hack” CSS. C’est simplement une syntaxe de commentaires un peu particulière mais totalement acceptée comme standard web. Les paramètres contenus dans les CSS conditionnelles viennent écraser ceux de la CSS primaire qui est chargée par défaut.

Voici un exemple ci-dessous :

<html> <head> <link rel="stylesheet" type="text/css" href="main.css" />    </head> </html>

Dans cet exemple, la CSS primaire (main.css) est d’abord appelée dans tous les cas.
Puis, la première CSS conditionnelle (win-ie7.css) est appelée si le visiteur utilise Internet Explorer 7. Enfin, si le visiteur est assez fou pour utiliser Internet Explorer 6, c’est la seconde CSS (win-ie6.css) qui sera chargée en plus de la CSS primaire.

Les CSS conditionnelles pour IE 7 et IE 6 permettent d’ajouter quelques touches de finitions et de corriger divers bugs d’affichage sans rendre le code de départ obsolète, puisqu’un navigateur plus récent ignorera tout simplement ces instructions.

Comment contrôler l’affichage dans les vieux navigateurs ?

Maintenant que vous savez comment isoler proprement les paramètres CSS destinés spécifiquement à des navigateurs qui n’en font qu’à leur tête, vous vous trouvez probablement devant un problème majeur : pouvoir vérifier l’affichage de votre site sous différents navigateurs et systèmes d’exploitation.

Il existe différents services dont le principe est de prendre des captures d’écrans de votre site depuis divers navigateurs. Le meilleur à ma connaissance et celui que je recommande vivement est Adobe Browserlab qui est pour le moment gratuit (il suffit de créer un Adobe ID). La vitesse de chargement des screenshots peut varier mais on n’attend généralement pas plus de 2 minutes avant d’avoir une fournée complète de captures prises sous la plupart des navigateurs utilisés à ce jour.

J’utilise également un soft appelé IE Tester qui émule des versions précédentes d’Internet Explorer. Le principal avantage de ce petit logiciel est qu’il permet de tester l’interaction (les liens, les boutons, etc.) avec le site et pas seulement l’affichage comme le fait Browserlab. Cela peut être très important si par exemple vous souhaitez vous assurer qu’un formulaire de commande fonctionne correctement quel que soit la configuration de l’utilisateur.

Pour aller plus loin

Si la compatibilité de votre site web vous importe (et elle devrait), je ne peux que vous recommander d’acheter immédiatement le livre de Jeffrey Zeldman intitulé Designing with web standards (3rd Edition). Sorti en 2010, c’est à ma connaissance la référence parfaite pour quiconque souhaite comprendre les enjeux des standards web et comment résoudre les problèmes de compatibilité entre navigateurs.

PS : Les curieux remarqueront peut-être que la méthode décrite dans cet article n’est pas appliquée à ce blog. Par manque de temps, je n’ai pas encore pu m’occuper à rendre ikôn totalement compatible avec IE 7 (et encore moins avec IE 6). Mea culpa, donc…mais faites ce que je dis, pas ce que je fais !

La pomme et l’e-book : une histoire d’expérience utilisateur

27/02/10 - par Guillaume dans Design, Stratégies | 0 commentaires

Les pommes font partie des produits les plus naturellement sucrés, donc les enfants devraient adorer ça. Pourtant, donnez leur le choix entre une pomme et un petit musclé, il y a de fortes chances qu’ils choisissent le second. La raison ? Parce que c’est beaucoup moins fun et facile de manger une pomme qu’un petit pot de yahourt. Quand on mange un petit musclé, il n’y a rien à éplucher, rien à laver, pas de trognon, juste un opercule à enlever et on engloutit ça en 3 coups de cuillère. Que demande le peuple ?

Justement, le peuple demande deux choses : un bon produit, et une bonne expérience de consommation.

Beaucoup d’enfants croient qu’ils n’aiment pas les fruits et légumes. Les pommes (et les autres fruits) sont pourtant d’excellent produits, mais avant de grandir et de devenir plus patient, on préfère consommer des produits de moins bonne qualité mais plus simple d’utilisation. Nous avons bien souvent tendance à confondre mauvaise expérience utilisateur et mauvais produit.

Ce qui m’amène (ou pas) à une autre pomme, celle qui ne se mange pas, qui prépare tranquillement l’arrivée de l’iPad dont la mission est, entre autre, de concurrencer le Kindle d’Amazon pour la lecture des e-books à l’aide d’un appareil soit disant révolutionnaire.

À chaque fois que j’ai discuté avec quelqu’un de l’adoption des livres électroniques, j’ai entendu, à peu de choses près, toujours la même réplique :

“Je n’arrive pas à me faire à l’idée qu’un livre ne soit pas en papier”

Je trouve cette réticence particulièrement révélatrice de l’importance de l’expérience utilisateur dans la perception de la qualité d’un produit. En d’autres termes, tous ces gens suggèrent qu’ils n’achèteront pas de livres électroniques car ils partent du principe que l’expérience de lecture d’un e-book sera inférieure à celle d’un livre papier.

Pourtant, l’e-book est un excellent produit, qui surpasse à de nombreux égards le live papier : plus économique, infiniment moins encombrant, plus écologique, version multilingue instantanée, possibilité de le mettre à jour sans réédition, pour ne citer qu’eux.

Ce qui manque encore à l’e-book pour s’imposer, c’est une expérience utilisateur qui mettra tout le monde d’accord, autrement dit un bon appareil de lecture. J’ignore si c’est l’iPad ou la prochaine invention du genre qui fera changer les mentalités, mais c’est bien une avancée dans l’expérience d’utilisation, et non dans le produit en lui même, qui placera le livre papier au rang de l’objet de collection.

Alors, et seulement alors, on regardera en arrière et on se demandera comment on a pu remplir nos bibliothèques de livres en papier. On n’aura peut-être pas inventé de recette miracle pour faire manger des pommes aux enfants d’ici là, mais il y a fort à parier que, eux, n’auront aucun problème avec les e-books.

Comme dans toutes les histoires, il y a une morale : l’expérience utilisateur est cruciale dans l’appréciation que le public aura d’un nouveau produit, indépendamment de ses qualités intrinsèques. Ceci est valable pour n’importe quel produit, mais à plus forte raison si ce dernier bouscule les habitudes culturelles du consommateur.

Media Temple : l’hébergeur identitaire

14/02/10 - par Guillaume dans (Web)Marketing, Design, Étude de cas | 2 commentaires

Projecteur sur Media Temple : l’hébergeur web le plus sexy du monde. Si vous avez un peu flâné sur des sites de designers, graphistes, illustrateurs, web-designers, typographes, photographes, vous avez probablement entendu parler de Media Temple. Il me paraît intéressant d’en parler ici car c’est, à mon avis, un très bon exemple de marketing identitaire (et au passage de webdesign : allez voir leur site et prenez des notes).

Lorsque vous êtes un hébergeur, vous vendez de l’espace de stockage, de la bande passante, bref, des trucs qui ne font pas rêver grand monde. D’ailleurs, très peu de gens se demandent, en se rendant sur un site, quel hébergeur il utilise. Les hébergeurs font partie de ces sociétés qui occupent les coulisses du net, sur lesquelles on ne s’interroge jamais avant d’avoir besoin d’elles. Pour accroître leurs parts de marché, bon nombre d’hébergeurs adoptent donc ce qui lui paraît être la meilleure des approches : se focaliser sur le rapport qualité/prix et tout faire pour sortir sur la première page des moteurs de recherche pour qu’au moment ou vous les cherchez, vous tombiez sur eux.

Pour faire parler de lui, Media Temple a opté pour une stratégie différente : celle d’un ciblage communautaire. En plus des promesses de disponibilité/rapidité habituelles, ils ont choisi de cibler leur clientèle sur la niche des métiers du design et de la création. Ils n’étaient pas obligés de le faire, ils auraient pu considérer que cela revenait à se fermer des portes. Pourtant, lorsque l’on s’identifie à cette communauté de “creative people”, cela donne une très bonne raison de les choisir et mieux encore : de le revendiquer haut et fort sur son site. Voilà le début d’une campagne de bouche à oreille réussie.

Dès lors que dans la vie vous aspirez à faire partie de la communauté des créatifs, Media Temple vous vend plus que de l’hébergement : ils vous offrent la confirmation de votre appartenance à un groupe de personnes que vous idéalisez. Et oui, si ce n’est pas assez clair, Ikôn est hébergé chez Media Temple. Il y a probablement moins cher ailleurs, peut-être même plus performant, mais devinez quoi ? Cela m’est égal, parce que pour l’instant je m’identifie à cette marque. Elle parle mon langage et c’est tout ce qui m’intéresse.

Morale de l’histoire : essayez de parler à tout le monde et il y a fort à parier que vous direz exactement la même chose que vos concurrents. En revanche, adaptez votre discours (et votre site web) à la communauté de votre choix et elle parlera bien volontiers à votre place.

Une introduction

09/02/10 - par Guillaume dans (Web)Marketing, Bouche à oreille, Design, E-commerce, Ikon, Stratégies, Étude de cas | 0 commentaires

Aujourd’hui, je lance Ikôn, un blog qui parle de marketing et de la poursuite du rayonnement commercial et personnel. Il s’adresse à toute personne amenée à devoir convaincre un public dans un milieu concurrentiel. Indice : il suffit d’avoir un client ou un patron pour tomber dans cette catégorie, même chercher un emploi est (ou devrait être) une démarche marketing.

Ce blog est une source d’inspiration et de réflexion pour la pratique d’un marketing intelligent, fondé sur le bon sens. Il me permet de partager mon regard sur le sujet, et idéalement, d’en discuter au fil des commentaires. Vous pouvez dès maintenant suivre @ikonblog sur Twitter ou vous abonner au flux RSS du blog.