souvent cette question se pose à certains clients, car beaucoup de clients viennent au web “parce qu’il le faut bien” et donc ont été éduqués depuis de nombreuses années à penser papier et non format électronique par les agences de communication qui les accompagnent.

Ils ont des belles plaquettes, avec des belles images, des belles typos bien lissées … et oui ils aimeraient bien avoir la même chose dans leur email. Difficile de leur faire comprendre l’intérêt d’un mail en html par rapport à une image, sans doute plus jolie quoique si le fichier html est bien fait …

Comprenez une chose, actuellement la plupart des messageries, webmails, yahoo, gmail etc bloque d’office les images ! Quel est donc l’intérêt d’envoyer une image qui va être bloquée immédiatement ? Bien sûr votre mail arrive dans la boîte de votre interlocuteur mais l’image est “supprimée”, tout ce qu’il voit c’est la balise alt pour certaines messageries, sinon une phrase pour outlook signifiant “cette image a été désactivée par sécurité” …. hum tenant compte que vous n’avez que quelques secondes pour accrocher votre interlocuteur, vous avouerez que c’est mal parti.

Car combien feront l’effort de cliquer sur le bouton “désirez-vous quand même afficher les images de ce mail ?” avouez que le message n’est guère rassurant …. réservez donc ce type de mail en dernier recours et vraiment quand la personne qui le reçoit s’attend à recevoir ce genre de mail et aura par exemple accepter par défaut d’afficher toujours les images provenant de cet email.

très peu…

Alors quid ? html ou texte brut ?

le texte brut a un avantage certain, il a un côté “conversation”, il est aussi très léger et passera plus facilement les normes rfc et les antispams d’un serveur. Mais son utilisation doit être utilisée à mon avis plus pour les abonnés à votre site, ceux qui attendent une réponse à leur question sur votre forum, une invitation à une vente privée, etc etc il apporte ce côté proche qui manque au mail html.

le mail html est un bon compromis donc entre le texte brut et l’image, car même si il comporte des images et que celles-ci sont bloquées lors de l’affichage du mail dans une messagerie mail, le texte et donc le sens du mail est lui bien lisible, car rédigé en html !

votre interlocuteur peut donc se faire une idée du contenu du mail et éventuellement afficher les images, l ‘important c’est qu’il a lu votre nom et votre message … Un autre avantage, c’est que le mail html est plus proche d’une communication graphique et permet d’apporter une qualité esthétique et un professionnalisme difficile à faire passer dans un mail en texte brut

ci-dessous voici différentes visions de mailings dans une messagerie ici pour l’exemple gmail :

ici un mail en image … hum suis-je capable d’en interprêter le sens en un coup d’oeil ? non … raté, poubelle.

cette fois-ci unmail en html avec les images désactivées, le texte est bien lisible et cerise sur le gâteau, gmail m’affiche dans le titre le contenu de l’html ce qu’il aurait du mal à faire avec seulement des images …

et activées, avouez que c’est pas mal pour de l’html

Actuellement, il y a nettement une évolution du web vers des sites plus proches des standards, qu’ils soient d’ordre techniques ou éthiques.

De nombreux clients nous demandent par exemple des structures de site en xhtml et css pour faciliter le référencement et l’accès du site aux malvoyants. Du coup le design a dû s’adapter lui aussi à cette nouvelle façon de développer un site. Grâce à l’évolution des browsers, cela n’est plus l’enfer que les programmeurs web connaissaient il y a encore 3 à 4 ans avec les différentes interprétations du css que généraient les navigateurs sur le marché. firefox a tiré vers le haut le respect de l’interprétation du css.

A une certaine époque, réaliser un site en full css compatible pour ie 5, ie6, netscape 7 etc… relevait quasi du défi, de nombreux hacks étaient nécessaires pour corriger les bugs d’interprétation d’internet explorer entre autre.

Bref petit à petit, designer un site en full css devient beaucoup plus accessible et permet des mises en pages très complexes voir aussi complexes que les sites réalisés à l’aide de tableaux. Lorsque je dis “complexe”, comprenez bien dans le sens graphique (positionnement des éléments etc). Car l’utilisation du positionnement (Float, relative, absolute) est plus difficile à maîtriser que la bonne vieille technique des tables, c’est l’une des raisons pour lesquels de nombreux webdesigners ont peur de faire le pas vers le full css.

L’utilisation du css et de l’xhtml pousse donc les sites vers un plus grand respect des standards édictés par le w3c et en même temps vers un code plus clean.

Les avantages sont donc multiples :

• accès facilité pour les malvoyants (nous en avons déjà à discuté)
• facilité d’entretien du code (le design est extériorisé)
• légéreté des pages (le fichier css est loadé une seule fois et mis en cache)
• propreté du code généré (plus de balises table dans tous les sens)
• référencement accru (car utilisation des balises h1, h2, de plus comme le design est externe, les moteurs ont directement accès à l’info etc)
• actuellement possibilité de customiser l’impression des documents, de créer une feuille de style en braille, pour aural (synthétiseur vocal), projection (projecteur numérique), tv, mobile … certains de ces types de médias ne sont pas encore supporté par tous les navigateurs, opéra par exemple est le seul à supporter le type projection.

Ce qu’il faut en retenir, c’est que parfois, ce n’est pas possible de passer entièrement son site en css (cms propriétaire récalcitrant …) mais il faut absolument séparer le contenu du design au maximum. Que vous conserviez un tableau pour la structure minimum du site, soit mais optimisez vos css.

de plus en plus souvent, en tant que graphiste et chef de projet, j’ai été confronté à des projets “vides” de contenu. Il n’est pas rare qu’un client vous dise, :
“faites nous un skin, nous mettrons le contenu après …” Hum hum, là vous ne pouvez plus faire confiance qu’à votre imagination et à votre expérience. Difficile d’offrir un skin vide à votre client ou pire avec du lorem ipsum partout … sûr qu’il va vous faire la remarque.

Webdesigners, inspirez-vous de ce qui vous entoure, écrivez ! Ce n’est pas difficile de pondre quelques lignes pour un teaser ou un résumé d’un article à la une. Vous ajoutez ainsi à votre proposition un professionnalisme certain qui croyez-moi fera mouche. Idem pour les rubriques, faites des propositions.

Le design c’est bien beau, mais vous devez faire passer des idées aussi. le texte fait parti de votre palette. Pensez à votre layout comme à une grille de journal, c’est le texte qui “design” le journal et lui apporte sa touche graphique. Un fer à gauche, un interligne plus aéré, des blancs plus importants, une typo plus typée … bref ne négligez pas le texte, il a sa place dans votre malette à outils web.

Une accroche pertinente, une couleur pour renforcer les strong, un interlignage plus important pour faciliter la lecture… et la typo ? J’avoue, j’utilise très souvent les mêmes typos pour le texte, le verdana ou le times. Le verdana parce ce qu’il a été spécialement conçu pour le web et apporte une touche plus moderne, le times pour une touche plus classique avec ses empattements.

De toute façon, on a pas trop le choix… me direz-vous ? Et bien si vous avez le choix ! Il existe une méthode tout à fait intérêssante au point de vue typo, il s’agit de la méthode sifr disponible sur www.mikeindustries.com/sifr/

Un bel exemple sur les applications sans limite de sifr sur http://www.mikeindustries.com/blog/files/sifr/2.0/

Cette méthode remplace à la volée vos titres (h1, h2 ….) par un fichier flash qui encapsule tous les signes d’une typo que vous auriez préablement choisie. L’avantage c’est que vos titre en h1 sont toujours visibles pour les moteurs de recherche et les navigateurs pour malvoyants, ceux-ci sont simplement cachés … le titre est “réécrit” en flash avec votre typo.

Il n’est pas rare encore actuellement d’avoir des commandes de certaines sociétés désireuses d’avoir un super site top tendance… Parfois, c’est un véritable chemin de croix qui attend le chef de projet, tout le monde connaît le dicton : “le client est roi” mais jusqu’à quel point est-il capable de gérer “seul” son royaume ?

Il est parfois stupéfiant de recevoir les recommandations de certains clients concernant l’allure général que devra avoir leur futur site. Aucune hiérarchie dans les éléments à présenter aux internautes MAIS plus grave parfois même aucune cohérence graphique dans la communication globale du client. En tant que chef de projet, j’ai une fois été amené à travailler avec un client qui jonglait dans ses documents avec 3 versions de logo différentes, quand je dis différentes, cela allait des codes couleurs à la typo, bref une anarchie totale dans la communication, sans oublier les mails internes, je recevais des mails @yahoo.fr de la comptabilité en belgique, le tout agrémenté de jolis petits gifs animés clignotants dans tous les sens !

Je me souviens d’un projet pour une société spécialisée dans la métallurgie. basé sur notre cms, leur futur site se montait en production, après avoir reçu bien entendu l’accord sur le skin. Un intranet avait été gréffé sur le site.
Lors de la mise finale en ligne, le client a complétement changé d’avis, en fait, erreur classique, la personne chargée du projet côté client, n’était pas la bonne personne, du moins n’avait-elle pas les pouvoirs nécessaires pour juger et avalider l’avancement du projet. Le site était très bien, très pro, les avis étaient encourageants, clients et fournisseurs ayant eu accès à la version en production , étaient élogieux … mais voilà la directrice, une âme de graphiste (aïe le grand danger …) étant revenue dans le projet avait sa propre idée … Malgrè nos remarques pertinentes et constructives, nous partions vers un skin plus “perso”, site qui reprenait pour chaque département de la société une métaphore basée sur le puzzle , idée largement utilisée mais surtout complètement à côté de la plaque au point de vue de leur communication ! Sans oublier que notre cliente désirait en plus y associer des skins différents par saison … vous vous retrouvez donc avec un puzzle sur du sable pour l’été, très loin de l’idée d’une société sérieuse qui fait des millions d’euros de chiffres d’affaire. En effet, une fois le site online, les réactions furent mitigées (sauf bien entendu, le staff autour de la directrice…), clients et fournisseurs, préfèrants pour la plupart, le premier site.

Résultats : le côté profesionnel qui ressortait du premier projet avait été complètement balayé, avec le deuxième site basé sur les puzzles, on retombait dans la petite société sans grande envergure. Sans oublier la perte financière pour le client qui au vu de la surcharge imposée par les brusques changements a bien entendu dépassé son budget initial.

Une leçon à tirer de ce souvenir, il vaut mieux faire confiance à des professionnels rompus à leur métier, écoutez les. Il faut faire des remarques, donner son avis mais il faut rester constructif tout au long de la réalisation de votre site. Ah oui j’oubliais … assurez-vous que vous avez aussi le bon intermédiaire en face de vous

Restez cohérent ! votre site reflète avant tout votre image, il doit être identifiable par vos visiteurs, clients, fournisseurs en un clin d’oeil ! N’hésitez pas à inclure dans votre brainstorming avec votre agence, le futur webdesigner du site… vous verrez que ce n’est pas une idée stupide, vous gagnerez un temps précieux par la suite lors de la soumission de ses skins graphiques.

Un autre défaut, c’est l’accumulation, ne vous laissez pas emporter par le design, n’encombrez pas inutilement votre site. Bien entendu, certaines cibles méritent un accueil différent, je pense entre autre à des sites très jeunes qui demandent plus d’attention au point de vue graphique. La cible est avide de gadgets électroniques et cela se répercute sur les sites qu’ils aiment visiter. Ils veulent que ça flashe etc …

mais en règle générale, ce sont les petits détails qui font la différence, un skin solide, professionnel, et des pages intérieures soignées (choix des couleurs et des images…) sont une nécessité. Mais éviter de tomber dans la surcharge.

Le meilleur exemple est la refonte de yahoo, le plus gros changement dans l’allégement du site n’a pas été le look, ni les changement dans l’ergonomie de certains modules et contenus mais bien dans le fait d’enlever le soulignement des liens ! Cette simple modification a apporté une véritable bouffée d’oxygène dans une page d’accueil déjà bien remplie !