Je n’ai pas pu m’empêcher de bloguer sur ce sujet qui me tient tant à coeur. La validation, c’est très important! Voici quelques exemples qui, à mon avis, sont efficaces et vraiment bien faits.

https://secure.livestream.com/myaccount/login
Il y a un indicateur (assez évident merci) qui valide au fur et à mesure. Notez que le bouton submit est innactif tant et aussi longtemps que les champs ne sont pas remplis correctement. Winner!

http://www.bigcartel.com/signup/diamond
Les erreurs sont affichées en rose en haut. Les labels erronés deviennent rose. L’essentiel quoi.

http://gowalla.com/users/new
Look original! Les champs erronés et valides sont différenciés de façon clair.

http://www.launchmind.com/signup/
Intéressant. Étant donné que le formulaire est long, le message d’erreur s’affiche en bas, en-dessous du bouton « create account ». J’aime l’idée.

http://www.popscreen.com/join
On peut facilement différencier le champs valide et celui qui ne l’est pas. De plus, on a une petite note qui donne de l’information supplémentaire sur le champs actif. Bien pensé.

http://thumbslap.com/signup/
Classique, mais assez évident.

https://wwws.mint.com/login.event?task=S
J’aime le fait que la validation se fait au fur et à mesure. Il est facile de savoir ce qui est bon de ce qui ne l’est pas. Thumbs up!

https://www.squarespace.com/process/CreateSquarespaceAccount
Un formulaire horizontal… c’est la première fois que j’en vois un. Pas mauvais comme validation.

https://secure.wufoo.com/signup/1/
Classique, mais original en même temps. Vive l’évidence!

Une newsletter est destinée à plusieurs boites de messagerie différentes (hotmail, yahoo, gmail, outlook, thunderbird…) et chacune réagit différemment. La simplicité et l’accessibilité est de mise! Voici quelques règles à suivre pour maximiser la compatibilité:

- Ne pas excéder 600 pixels de large

- Ne pas dépasser 30 Ko

- Insérer le code à l’intérieur de la balise BODY (oublier le reste)

- Intégrer complètement en tableaux (aucun div!)

- Déclarer le CSS à l’interieur du code (CSS inline)

- Lier toutes les images (et autres médias) en liens absolus

- Utiliser les entités HTML

- Valider le code (Validator du W3C)

- Supprimer les espaces inutiles et les commentaires

Conseils éclairs

Il semble y avoir des problèmes de compatibilité avec la couleur de background déclaré dans le HTML, BODY ou un DIV. Je vous recommande donc de créer un tableau 100% avec un BGCOLOR.

Il semble aussi avoir des troubles avec les BORDER dans hotmail. Vous pouvez toujours créer des bordures artificielles à l’aide de TR et TD en spécifiant une couleur de fond et un width ou un height.

Privilégiez les IMG au lieu des BACKGROUND-IMAGE. Vous constaterez que hotmail et outlook sont capricieux sur ce point.

Quelques liens très utiles sur le sujet :
http://www.email-standards.org/
http://www.campaignmonitor.com/css/
http://www.xavierfrenette.com/articles/css-support-in-webmail/

Il y a 20 ans, fumer était « in » et bien vue. Maintenant, tout le monde sait que fumer n’est pas bon. Autrefois, avoir une splash page (ou page tunnel, page d’entrée, page d’introduction) était à la mode. Maintenant, il est prouvé que ce genre de pratique n’est pas recommandé (sauf pour certains cas précis). Pourquoi faire cette analogie? Parce qu’il existe encore des gens qui veulent des splash pages pour les mauvaises raisons.

Une splash page peut être utile. En voici quelques exemple :

1- Afficher une mise en garde

2- Afficher un message important ou une nouveauté

3- Choisir une langue et/ou un pays

4- Choisir une version et/ou une préférence

5- Présenter une image très artistique

6- Afficher un mode d’emploi

En dehors de ces exemples, une splash page peut s’avérer dommageable.

La splash page n’a pas très bonne réputation parce qu’elle…

… offre habituellement très peu de contenu textuel et un accès limité aux autres pages du site. Par conséquent, elle diminue considérablement le référencement.

… retarde d’une page l’accès à l’information. Elle oblige à cliquer pour accéder à la page d’accueil (la page la plus importante). Il y a donc un clic de trop. Let’s get to the point!

… peut être longue à télécharger et du même coup, faire fuir le visiteur.

… nuit à la liberté de l’usager. Il doit obligatoirement passer par cette page.

… n’est pas toujours appréciée des visiteurs. La visite débute donc avec une note négative.

… présente souvent une animation flash que les visiteurs s’empressent de skipper!

En conclusion, une splash page devrait être évitée à moins d’avoir une bonne raison.

Résumé de l’article anglais http://boagworld.com/design/8-ecommerce-improvements

Une augmentation de 10 000% des ventes! Cela paraît incroyable n’est-ce pas? Surtout quand on se rend compte que leur client moyen est agé de 80 ans! Qui a dit que les personnes âgées n’utilisent pas Internet…?

Une étude de cas du site Web de Wiltshire Farm Foods.

1. Éviter le fouillis

Un site de e-commerce doit avoir des éléments qui se démarquent des autres. Autrement dit, ils ne doivent pas avoir l’air d’un fouilli. Il faut évitez de distraire le client, mais plutot l’amener à se concentrer sur les éléments essentiels.

2. Démarquer le panier d’achat

Un des éléments les plus importants d’un site de e-commerce est évidemment le panier d’achat. Il doit être facile à trouver et à utiliser.

3. Avoir des repères visuels évidents

Dans le cadre d’un site interractif, il primordiale d’avoir des repères visuels qui aide à la compréhension et la navigation. Voici quelques exemples :

- Validation de formulaire

- Indication d’ajout d’un produit dans le panier d’achat

- Indication de supression d’un produit dans le panier d’achat

- Étapes dans le processus d’achat en ligne

4. The bigger the better

Une image faut souvent mille mots. Une fonctionnalité importante que tous les sites de e-commerce devraient avoir est de pouvoir grossir les images de produits. Plus c’est gros, plus c’est clair, mieux c’est! Surtout pour les personnes agées…

5. Faire des boutons et des liens évidents

La poursuite du plus c’est gros, mieux c’est peut également être appliquée aux boutons et aux liens.

6. Avoir une aide disponible en tout temps

Une transaction en ligne soulève beaucoup de questions dans l’esprit des utilisateurs. Il existe plusieurs façon d’y remédier :

- Rassembler toute l’aide en une seule section

- Proposer un tutoriel

- Afficher une aide contextuelle tout au long du processus d’achat

7. Gérer les erreurs avec élégance

Si vous ne voulez pas perdre la vente, vous devez gérer les erreurs avec grâce et rassurer l’utilisateur en lui indiquant qu’il peut toujours continuer. Voici deux règles de bases à suivre :

- Le message doit être très visible

- Le message doit indiquer à l’utilisateur ce qu’il faut faire

8. Communiquer la valeur ajoutée

Qu’est-ce que vous avez de plus ou de mieux que votre compétiteur? Quelle est votre différenciation? Indiquez la clairement!

En conclusion

L’augmentation des ventes de 10 000% fait un bon titre pour un article de blog! Toutefois, le pourcentage de croissance n’est pas vraiment important… Ce qui importe est qu’en suivant ces conseils, vous serez assuré de voir une croissance dans vos ventes en ligne.

Résumé de l’article anglais http://boagworld.com/design/8-ecommerce-improvements

Il m’arrive encore de croiser des clients qui me demandent d’ajouter des meta tags dans leur site Web pour améliorer leur référencement. J’aurais pensé qu’en 2009 tout le monde saurait à quoi servent réellement ces balises. Mais bon…

Cet article s’adresse donc à tous les clients néophytes ou tous les novices dans ce domaine.

La balise meta description

La balise meta description, qui consiste à décrire le contenu de la page, est prise en compte par Google mais uniquement pour l’affichage des résultats. Cette balise n’a aucun impact sur le positionnement. Je répète, cette balise n’a aucun impact sur le positionnement. Il est donc inutile de penser qu’on peut améliorer le référencement en ajoutant cette balise dans les sites web.

Objectif premier : donner envie aux internautes de cliquer !

Une bonne balise meta description contribue à augmenter le taux de clic. Les moteurs en affichent environ 170 caractères. Cette balise doit être explicite et incitative à cliquer sur le lien. Il est important de noter que cette balise doit être obligatoirement différente sur chacune des pages puisqu’elle doit représenter le contenu de la page sur laquelle elle se trouve. Il est inutile d’y insérer une panoplie de mots clés. Cela changeras en rien le référencement.



Si votre site ne contient aucune balise meta description, Google se chargera d’en créer une pour vous. Il prendra, dans la balise body, le texte le plus rapproché … qui n’est pas nécessairement le plus « marketing ».

Je vous invite donc à rédiger des balises meta description au minimum sur vos pages d’accueil si vous n’avez pas le temps d’en faire des personnalisée sur chacunes de vos pages.

La balise meta keywords

La balise meta keywords, qui consiste à lister des mots clés, est complètement ignoré par Google.  Tout le monde ensemble : Cette balise est complètement inutile pour le référencement sur Google. Toutefois, d’après John Mueller, elle serait pris en compte par d’autres moteurs de recherche et/ou annuaires. Il n’est donc pas mauvais d’en avoir une personnalisée sur chaque page. Si j’étais vous, je ne passerais pas trop de temps là-dessus.

En conclusion

Si un « spécialiste » du référencement vous conseil fortement d’ajouter des meta keywords pour améliorer votre référencement sur Google, sauvez-vous en courant! Ou encore, si vous tombez sur un article qui promouvoit les bienfaits de ces balises pour le référencement, vérifiez la date de celui-ci

Pour plus d’information, consultez le Google Webmaster Central Blog.