CONSEILS : Le HTML pour les débutants

Il n’est pas obligatoire d’être un expert en HTML pour réussir votre marketing direct électronique mais quelques connaissances vous seront donc fort utiles pour gagner en efficacité et être autonome.

Un emailing est en général en mode « multipart » ce qui signifie que le message est envoyé en plusieurs parties complémentaires :

  • Une partie en HTML qui est lue par la plupart des logiciels de messagerie
  • Une autre partie en version texte pour certains terminaux mobiles notamment.

Le code HTML permet d’afficher des contenus visuellement riches et il est utilisé pour le Web et l’emailing notamment. La difficulté à anticiper pour vos campagnes de marketing direct électronique est qu’un code optimisé pour une page Web ne l’est pas nécessairement pour un emailing.

HTML signifie Hypertext Markup Language. C’est un format informatique conçu pour afficher correctement les pages web. C’est un langage sous forme de balise (markup) qui permet d’écrire de l’hypertexte. C'est-à-dire des pages reliées entre elle par des liens !

Si vous ne savez pas de quoi il s’agit, vous pouvez ouvrir une page Web dans votre navigateur. Par exemple, vous pouvez consulter notre exemple.html.

En ouvrant le code source (clic droit dans la page, Affichez le code source ou Code source de la page), vous verrez du code HTML qui aura peut-être l’air un peu effrayant. Ne fuyez pas et astreignez-vous à en comprendre les basiques.

Concrètement, le code HTML est donc constitué de balises. Chacune des balises indique à votre navigateur Web ce qu’il doit afficher. Ces codes sont entourés par les caractères <> et ne sont visibles qu’en regardant le code source.

A noter que de nombreuses balises existent en deux états : ouvertes et fermées.

Par exemple

<HTML> est une balise qui signifie que la page est en langage HTML. Ce sera vrai jusqu’à la même balise fermée avec la barre / :  </HTML>.
<BODY> indique que commence le contenu de la page (et </BODY> indique donc la fin du contenu de la page).
<BR/> signifie retour à la ligne. Cette balise n’a pas de fermeture.
<STRONG></STRONG>Entre ces deux balises le texte sera en gras.
<EM></EM> Entre ces deux balises le texte sera en italique.

Un lien vers l’adresse d’autre page est indiqué sous la forme <a href= »/adressedemonlien »>Nom de mon lien</a>. On parle aussi d’URL (Uniform Ressource Locator) pour indiquer l’adresse d’une page Web.

Par exemple :

<a href="http//www.sendethic.com" target="_blank">Sendethic</a>

Pour des mises en forme en tableau vous allez utiliser les balises
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>

Par exemples avec 2 lignes et 2 colonnes, le code HTML aurait cette apparence

<TABLE border="1">  <TR>  <TD>Colonne 1 ligne 1 </TD>  <TD>Colonne 2 ligne 1</TD>  </TR>  <TR>  <TD>Colonne 1 ligne 2</TD>  <TD>Colonne 2 ligne 2</TD>  </TR>  </TABLE>

Et l’affichage aura cette apparence.

Colonne 1 ligne 1 Colonne 2 ligne 1
Colonne 1 ligne 2 Colonne 2 ligne 2

Dans la plupart des balises, des attributs, c'est-à-dire des compléments d’information, donnent des indications complémentaires sur l’affichage. Par exemple, dans le tableau ci-dessus, border signifie que le tableau à une bordure de 1.

Dans l’exemple de lien ci-dessus, l’attribut target= »_blank » indique que la page doit s’ouvrir dans une nouvelle fenêtre.

Une image est insérée sous la forme <img scr= »url_de_mon_image »>. Par exemple :

<img src="https://www.sendethic.com/v2/img/logo-top.png" width="327" height="65" alt="logo Sendethic">

 

https://www.sendethic.com/v2/img/logo-top.png indique l’adresse de l’image.

Les attributs width indique sa largeur, height sa hauteur et alt permet de proposer un texte alternatif qui s’affiche en cas de non affichage de l’image ou pour les non-voyants.

Il existe des centaines de balises et d’attributs qui permettent de définir l’affichage de vos pages. Pour en savoir plus sur le HTML, vous pouvez vous référer à ce site qui présente un tutoriel très pédagogique.

Par ailleurs, il est possible aussi de définir des styles graphiques à appliquer dans toute une page ou sur l’ensemble d’un site. On parlera alors de feuille de style ou CSS (Cascading Style Sheet) qui est une manière spécifique de faire du HTML, par exemple sur la page web de exemple2.html.

En ouvrant le code source (clic droit dans la page, Affichez le code source ou Code source de la page),
Les éléments de style sont déclarés en haut de la page au sein d’une balise
<style type= »text/css »>
</style>

Dans exemple2.html, on remarque que la class Style1 indique .Style1 {font-weight: bold; font-family: Arial}. Cela signifie que chaque fois qu’un mot aura le style1 alors il sera en police Arial et en gras.

Le Style2 précise .Style2 {font-family: Times New Roman; font-size:36px}
Cela signifie que chaque fois qu’un mot aura le style2, il sera en police Time New Roman de taille 36.

Le bénéfice de faire des pages Web en CSS est de gagner en légèreté (puisqu’il est inutile de répéter à chaque fois la totalité des indications de styles) et des sites web plus faciles à créer et à mettre à jour. La CSS peut être déclarée dans le haut de la page comme dans exemple2.html ou dans un fichier spécifique externe (mais ce dernier type de CSS est interdit dans le cas des Emailings).

Pour en savoir plus sur le HTML, vous pouvez vous référer au tutoriel créé par le W3C qui est l’instance qui normalise le Web dans le monde.

Emailing : pour ses 10 ans, AramisAuto organise un jeu dans 2 villes via Facebook et Twitter

Un anniversaire, le lancement de sa page Facebook et de son profil Twitter,… Pour AramisAuto.com, il fallait marquer le coup. Et cet emailing nous apprend le dispositif en place. Un emailing où le design a été particulièrement soigné : une police qui paraît être écrite à la main, des illustrations, une voiture grimée,… Bref, l’aspect visuel est très sympathique et donne incontestablement envie de cliquer pour devenir amis, visionner la vidéo,… Et le texte ? Un peu long à mon goût, mais explicatif et incitatif.

Emailing : un anniversaire, ça se fête… comme iStockphoto !

Comme son nom l’indique, iStockphoto est un service web qui permet d’acheter des photos. Sauf qu’il propose également des vidéos, et ce, depuis 5 ans. D’où cet emailing nous rappelant que c’est l’anniversaire de ce service, qui nous propose 15% de réduction sur toutes les collections vidéo. Dans le détail, l’emailing est bien exécuté : – un visuel bien senti, vintage à souhait, mettant en scène un homme devant un mini gâteau d’anniversaire et ses 5 bougies, – un message répété deux fois, de deux façons différentes, l’un sur le visuel, l’autre en introduction du paragraphe, – un paragraphe pour nous rappeler la richesse du fonds vidéo d’iStockvideo – le rappel de la réduction en rouge – un call-to-action simple et informatif Et vous, avez-vous un anniversaire à fêter ? Cela peut être en nombre d’années, en nombre d’utilisateurs,… Les occasions ne manquent pas de faire la fête !

Emailing : Goliath nous invite sur son stand à Kidexpo

Voilà un emailing signé Goliath, qui tire partie d’une actualité importante : la présence de ce fabricant de jouet à Kidexpo, un salon pour la famille. Du coup, cet emailing : – nous le rappelle dans son texte, – nous explique la raison de sa présence à Kidexpo – nous dévoile ce qu’il se passera sur son stand, – nous donne la localisation du stand sur le salon, tout en nous rappelant le poids de ce salon (chiffres sur sa fréquentation,…). Bref, c’est bien fait. Seul (petit) bémol : les visuels et le titre, un peu petits.

Un emailing pour le lancement du Zapping Business, de l’Entreprise.com

Cet emailing joue la carte de l’humour, avec ce cadre lisant son journal sous sa douche, faute de temps… Le visuel est clé, car il introduit la solution à ce problème : le Zapping business, dont le contenu est détaillé, en couleurs. Le call-to-action nous apprend que c’est une newsletter: « Je m’inscris à la Newsletter ! » Ce que nous confirme la page de landing – une page bien tristounette, entre nous soit dit, qui n’est autre que la page pour gérer ses abonnements aux newsletters. Dommage qu’il n’y ait pas eu là aussi une réflexion pour conforter le futur lecteur dans son choix de s’inscrire à cette newsletter, dont l’emailing est plutôt sympathique et donne envie d’aller plus loin.

Emailing : les informels, des after work pour des cadres

Les after work ont le vent en poupe. Ces réunions de networking qui ne veulent pas en être, rassemblent des salariés après leurs heures de travail dans une ambiance décontractée et autour de thèmes plus ou moins précis. « Les informels », nous apprend cet emailing, sont des after work organisés par l’Express, l’Apec et Le Cercle humain. L’emailing nous donne tous les détails nécessaires : – le lieu, l’horaire, – le thème – le déroulé de l’after work – le call-to-action (Inscrivez-vous, dont la page de landing est un événement sur Viadeo) Au final, les données de base y sont. Néanmoins, il y a beaucoup trop de textes, ce qui donne la sensation d’un emailing difficile à lire, d’autant que la taille et les couleurs des polices sont différentes.

Les 20 nouveaux commandements de l’Emailing en 2011

En 2008, nous publiions les 10 commandements, en 2010 les 12… 18 mois après, nous avons presque doublé la mise et revu la plupart des recommandations. Présenté lors du salon Ecommerce en septembre, ces nouveaux commandements de l’Emailing ont été bien accueillis avec près de 300 participants à la conférence où nous avons plus que jamais insisté sur la règle d’or : l’email marketing est d’abord un outil relationnel où la confiance et la complicité se construit de campagne en campagne. Ce webinaire rappelle les techniques et bonnes pratiques à connaitre pour réussir cette relation. Voir la présentation Les 20 nouveaux commandements de l’Emailing en 2011

Les Assises du Numérique 2011 : un emailing en guise d’invitation

Dans cet emailing, les Assises du Numérique 2011 nous invitent à s’y inscrire. Le call-to-action « Je m’inscris » est là pour nous le rappeler. En revanche, la construction de l’emailing donne l’impression de fouillis : des polices et de couleurs de tailles différentes, de nombreux logos de sponsors et un header chargé par les organisateurs officiels,… A l’arrivée, l’emailing ne donne pas vraiment envie d’aller plus loin, car on ne saisit pas immédiatement l’intérêt de la manifestation. Qui sont ces intervenants qualifiés de « percutants » ? Quels sont concrètement ces sujets dits « majeurs » ? Bref, c’est un emailing qui manque de concret, de visages et d’intérêt.

Emailing : Playbac invite les lecteurs du Petit Quotidien à faire leur journal

En cette période de Web 2.0 et de crownsourcing à tout-và, le Petit Quotidien y va de son petit couplet participatif en proposant aux parents de voter pour les sujets qui seront traités dans ce quotidien destiné aux enfants de 6 à 10 ans. La démarche n’est pas très originale, mais elle est intéressante, car elle donne la parole aux parents et aux lecteurs. L’emailing est simplissime. On y trouve : – un texte court pour expliquer l’objectif – Un call-to-action « Je vote ! », avec une police « jeune » – Un remerciement – Et une signature, de la rédaction du Petit Quotidien Ce qui est intéressant, c’est que la page de landing est très simple aussi, avec un questionnaire court qui s’adresse à la fois aux parents et aux enfants lecteurs du Petit Quotidien. Bien vu.

Emailing : Princesse Tam Tam rebondit sur l’actu (et vous offre les frais de livraison)

L’actualité de votre secteur est un bon prétexte pour reprendre la parole auprès de votre base. C’est ce qu’a fait Princesse Tam Tam, dans cet emailing, où la marque de lingerie rebondit sur la Fashion week, qui a lieu en septembre chaque année,  en offrant les frais de livraison. Le design de l’emailing est plutôt élégant, sur fond gris et lettres en bleu et blanc. Le call-to-action est évocateur : « je craque ». C’est à la fois coquin, sérieux et très mode.