E-commerce « 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 !

Le pouvoir d’un simple “merci”

17/03/10 - par Guillaume dans Bouche à oreille, E-commerce | 2 commentaires

Aujourd’hui, j’ai reçu deux choses par la poste : une carte postale et un colis que j’avais commandé par internet. Comme toutes les cartes postales, elle était rédigée à la main. Comme la plupart des colis en provenance d’un e-commerçant, le mien ne contenait qu’une vulgaire facture imprimée.

Pourquoi les gens s’envoient des lettres ou des cartes écrites à la main plutôt que dactylographiées ? Parce que si une carte n’était pas manuscrite, elle perdrait toute raison d’exister. Elle appartiendrait au domaine de l’automatisé dans lequel les émotions n’existent pas. C’est pareil pour une carte de voeux : s’il n’y a pas un petit mot manuscrit, l’intention n’est pas crédible. Les gens ont régulièrement besoin de recevoir des preuves d’affection authentiquement humaines.

Quand vous achetez votre baguette, vous avez droit au sourire de la boulangère. Ce n’est pas grand chose, mais au moins, au cours de votre expérience d’achat, un signe d’affection humaine s’est manifesté. Quand vous tombez sur une boulangère qui ne vous remercie pas et qui ne vous sourit pas, vous n’avez pas tellement envie d’y retourner. Que penseriez-vous de quelqu’un qui vous enverrait une carte postale imprimée par ordinateur ?

Fidéliser un client revient à créer un lien d’affection avec lui. Cela implique de le séduire avant et après l’achat. Pourtant, beaucoup d’entreprises n’imaginent pas une seule seconde d’envoyer des documents manuscrits à leurs clients, de peur de ne pas être crédible et de porter atteinte à leur image de marque. Ainsi, bien que l’affection soit uniquement possible lorsque la relation est authentique, spontanée et crédible, les entreprises font généralement exactement l’inverse : leur discours se manifeste par des documents automatisés, millimétrés et pré-fabriqués.

En expédiant un colis vide de toute attention humaine à son client, on ne lui donne absolument aucune preuve d’affection. En revanche, c’est en faisant l’effort de manifester personnellement de la reconnaissance pour son achat qu’on laisse ouverte la possibilité de démarrer le cercle vertueux du bouche à oreille (les gens parlent bien plus volontiers de ce qui est inattendu et remarquable).

Conseil aux e-commerçants : A défaut de pouvoir faire un joli sourire à vos clients, leur montrer que leur commande n’est pas qu’un simple numéro dans une base de donnée me paraît être le strict minimum. A moins de s’appeler Amazon, je ne vois aucune raison pour laquelle un e-commerçant n’aurait pas le temps d’écrire un petit mot de remerciement sur une carte de visite et de la glisser dans le colis. Ce sont à mon avis les 30 secondes les mieux investies de la journée.

Je pense qu’il ne faut pas sous-estimer le pouvoir de la communication manuscrite dans un monde qui tend à la faire disparaître. D’ailleurs, il me reste à vous remercier comme il se doit pour votre lecture :

Pourquoi il faut soigner son message

17/02/10 - par Guillaume dans (Web)Marketing, E-commerce | 6 commentaires

Lorsque j’essaie de convaincre des gens qui n’utilisent pas encore Twitter de s’y mettre, l’une des objections que j’entends le plus souvent est : “Mais à quoi ça sert de raconter sa vie à la minute près ?”. Effectivement, tout le monde s’en fiche si vous twittez pour raconter que vous venez de manger un Kinder ou que vous allez promener votre chien. Au delà de ça, cette réaction reflète assez bien le fait que l’utilité de Twitter est encore assez mal comprise pour beaucoup de gens. Et pour cause, si vous vous êtes rendu sur le site avant 2009 voici ce que vous avez vu :

Ancienne homepage de Twitter

Ce n’est qu’en Juillet 2009, plusieurs années après sa création donc, que Twitter a changé sa page d’accueil pour adopter son message actuel :

“Share and discover what’s happening anywhere in the world, right now.”

Mais avant cela, les fondateurs de Twitter ne s’étaient pas rendu compte que derrière le concept du micro-blogging se cachait un potentiel incroyable : celui de devenir un site mondial d’information en temps réel, le meilleur moyen de s’informer en direct sur ce qui se passe n’importe où, n’importe quand. D’ailleurs, la barre de recherche en page d’accueil libellée “Voir ce qui se raconte sur…” n’a fait son apparition que récemment. Avant 2009, pour faire des recherches par mots clés sur Twitter, il fallait connaître cette adresse.

Pourquoi je vous raconte tout cela ? Parce que je pense que Twitter souffre réellement d’un manque à gagner aujourd’hui en raison de la façon dont ils se sont présentés pendant leurs premières années d’activité. Le vrai intérêt de Twitter est de partager de l’info sur le monde, pas sur soi. Je pense que si Twitter avait compris cela dès le départ, aujourd’hui personne ne les confondrait avec un énième réseau social à la mode.

J’en tire l’enseignement qu’il faut faire extrêmement attention aux mots que l’on choisit pour se présenter, car la première impression est parfois coriace.

Si un jour votre but est de faire adopter un concept nouveau au public , vous aurez probablement besoin de rédiger ce genre de petit message, qui se doit d’être court et explicatif et surtout : qui doit permettre au visiteur de comprendre instantanément l’intérêt de votre offre. Il me semble que c’est un exercice qui doit demander toute votre attention, car aucun mot ne doit être laissé au hasard.

Enfin, comme Twitter nous l’a montré, il faut savoir être à l’écoute du comportement des utilisateurs. S’ils s’approprient votre service ou vos produits d’une manière que vous n’auriez pas imaginé au départ, il est probablement temps de changer votre message pour leur donner raison.

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.