Page 260 – Sendethic

CONSEILS : 10 conseils pour faire du HTML sans être un expert

Si vous souhaitez créer votre Emailing en éditant son HTML ou en utilisant en éditeur HTML mais que vous ne maitrisez pas complétement ce langage, voici quelques astuces qui vous pourront vous aider dans votre démarche.

1. Si vous modifiez une page ou un gabarit, conserver une copie non modifiée du code « propre ».

Si vous faites des erreurs, vous pourrez toujours revenir à l’original. Si vous n’avez pas gardé de copie de l’original et que vous avez commis des erreurs irréparables vous pouvez pleurer un peu ou taper du poing sur votre table… En tous les cas ne nous reprochez pas de ne pas vous avoir prévenu.

2. Ne pas casser les balises !

Pour modifier le contenu rédactionnel, il faut être à l’extérieur des balises.

Par exemple, vous pouvez modifier le texte entre les deux balises : <STRONG>J’ai le droit de modifier ce texte</STRONG>.

Mais vous ne devez pas « casser » la balise, par exemple : STRONG> en oubliant le <, ce qui perturberait la mise en page car la balise STRONG> serait lu comme un mot à afficher.

3. Utilisez les outils fournis par les systèmes de publication en ayant conscience de leurs limites

La plupart des outils de création de site Web, blog et plate-forme Emailing vous proposent de vous affranchir de la complexité du code HTML en intégrant dans leur service des éditeurs HTML dont l’utilisation se rapproche de celles des logiciels bureautiques. Néanmoins, il ne faut pas se laisser abuser par cette ressemblance. Plus vous voudrez une mise en forme sophistiquée, plus des connaissances en HTML deviendront souhaitables.

Par exemple, pour arriver à une mise en forme de ce type comprenant une image à gauche et un texte en regard :

Vous ne pourrez pas le résoudre avec la souris ou en glissant vos formes toute prête comme dans PowerPoint. Il faudra créer un tableau de 2 colonnes avec des bordures de tableaux invisibles et ensuite y insérer vos contenus.

Titre

Description en quelques lignes, Description en

quelques lignes, Description en quelques lignes

Description en quelques lignes

On aboutirait à un HTML qui ressemblerait au code suivant :

<TABLE border="0">  <TR>  <TD><img src="URLDEMONIMAGE" width="150" height="40" alt="Description de mon image">  </TD>  <TD> Titre<BR/><BR/>  Description en quelques lignes, Description en quelques lignes, Description en quelques lignes Description en quelques lignes </TD>  </TR>  </TABLE>

(L’attribut indique que nous ne souhaitons pas que le tracé du tableau soit visible).

4. Utiliser les modèles fournis

Certains services proposent des modèles clés en main ! Profitez-en pour les réutiliser ou comprendre leur mode d’affichage.

5. Ne faites pas trop de modifications

Evitez d’utiliser les outils fournis par les services de création de site Web, blog et plate-forme Emailing comme des outils de conception et de créativité. Préparer vos contenus ailleurs et utilisez les outils de publication en phase finale. Trop d’itérations peuvent engendrer des codes parasites qui pourraient gêner la publication.

6. N’effacez pas les styles graphiques pré existants

Imaginons que vous vouliez remplacer le texte générique d’un titre dans un modèle. N’effacez pas le titre et le texte standard fourni par défaut car vous risqueriez d’effacer probablement la balise dans le code HTML. Tapez d’abord votre texte et effacer ensuite le texte inutile.

7. Faites des retours chariot en maintenant la touche majuscule

Dans de nombreux éditeurs HTML, quand vous faites un retour chariot simple à la fin d’un paragraphe, vous risquez de ne pas conserver le style graphique du premier paragraphe. Maintenez la touche Maj pour sauter des lignes ce qui vous permettra de conserver le style précédent.

8. Ne pas utiliser les logiciels bureautiques pour enregistrer en format HTML

Les suites bureautiques proposent d’enregistrer leur fichier en HTML mais le code créé est inadapté à l’emailing. Par contre vous pouvez essayer de copier / coller du logiciel bureautique vers l’outil de création de site et/ou d’emailing mais vous devrez probablement améliorer manuellement la présentation du résultat final.

9. Créer votre message dans Microsoft Outlook

Certains logiciels emailings vous permettent d’utiliser Microsoft Outlook comme éditeur de message. Les mises en forme les plus sophistiquées ne seront pas nécessairement réalisables mais vous bénéficierez d’un environnement de travail habituel qui vous fera gagner du temps.

10. Etudier la possibilité de vous faire créer un gabarit pour ensuite être autonome

Créer ex nihilo un gabarit de newsletter par exemple n’est pas impossible en prenant un peu de temps. Vous pouvez aussi décider de vous faire créer ce gabarit par un spécialiste. Vous pouvez vous appuyer sur les agences partenaires de Sendethic par exemple ou passer un appel d’offres sur un site spécialisé.

Lors de votre expression de besoin, pensez à indiquer à votre prestataire que vous souhaitez ensuite être autonome dans l’édition afin de créer un gabarit simple et disposant d’un code assez basique.

Ce gabarit créé, il est ensuite beaucoup plus facile de l’éditer vous-même à chaque nouvelle édition de la newsletter.

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.