Comment créer une newsletter au format HTML ?

Comment créer une newsletter au format HTML ?

La création d’une newsletter au format HTML peut paraitre simple lorsqu’on est un peu technicien. Néanmoins, vous pourriez être confronté à quelques embuches qui pourraient rapidement vous agacer. Aussi, en suivant une certaine méthode et quelques règles CSS de base, vous pourrez concevoir une newsletter au format HTML sans perdre votre sang-froid (enfin, pas trop).

S’adapter aux différents outils de messagerie et webmail, votre objectif premier.

Soyez attentif à votre HTML, il doit être capable de bien interpréter tous les logiciels de messagerie et les webmails (Outlook, Thunderbird ou Yahoo, Gmail, Hotmail, etc…).
Vous voilà confronté à un petit exercice d’équilibriste, les webmails ne déchiffrant pas les feuilles de style CSS de la même manière. Attention également aux variations de largeur lors de l’affichage (même si celui-ci est correct). Ces dernières dépendent de l’outil utilisé.

newsletter HTML

Deux méthodes de conception et quelques règles de base.

Nous vous conseillons d’utiliser :

  • Des tableaux HTML pour créer vos colonnes en utilisant la balise HTML « table » (piochez dans notre article Mémento des balises HTML les plus courantes);
  • Du CSS inline pour les éléments de style comme la taille de la typo, les attributs, les couleurs d’arrière plan.

Pour un affichage soigné :

  • La largeur : la taille standard des écrans permet l’affichage de newsletters de 620 pixels de large (privilégiez 530 pixels) ;
  • La hauteur : pas de contraintes particulières.

 

Comment fonctionne un serveur ?

Comment fonctionne un serveur ?

Qu’est-ce qu’un serveur ?

Un serveur est un ordinateur permettant de fournir des services à travers Internet. Il est possible de configurer un ordinateur connecté à internet comme serveur, apres lui avoir installé les bons logiciels. Par exemple, les logiciels nécéssaires au fonctionnement d’un CMS de type WordPress sont :

  • Apache : c’est le serveur web qui vous envoie les pages demandées. Lorsque la page demandée est en HTML, Apache vous la renvoie directement sans passer par PHP ;
  • PHP : il communique avec Apache et permet de traiter les pages codées en PHP. Il renvoie les pages PHP traitées à Apache qui les renvoie à l’internaute ;
  • MySQL : le gestionnaire de la base de données (ne pas confondre avec SQL, le langage).

Pour votre plus grand plaisir, vous avez la possibilité d’installer tous ces logiciels ensemble via les packs suivants :

  • LAMP signifie : Linux, Apache, MySQL, PHP.
  • WAMP signifie : Windows, Apache, MySQL, PHP.
  • MAMP signifie : Macintosh, Apache, MySQL, PHP.

 

Quelques notions importantes.

Lorsque vous souhaitez voir une page, votre demande est reçue par le logiciel Apache installé sur le serveur. Deux éventualités sont alors possibles :

  • soit la page est disponible en HTML et vous est transmis directement ;
  • soit la page HTML doit être générée (par exemple pour un site WordPress ou un site eCommerce). Dans notre exemple, le moteur PHP va charger le modèle de la page en utilisant des données stockées dans une base de données MySQL pour créer la page demandée en HTML, qui va ensuite la fournir à Apache, pour être envoyée à l’internaute.

Enfin, sachez que si la page demandée n’existe pas, vous tomberez automatiquement sur une erreur 404. Si le serveur ne parvient pas à générer la page, c’est qu’il y a une erreur et il ne manquera pas de vous le notifier par une jolie page 403.

Les bases du référencement naturel.

Les bases du référencement naturel.

Le référencement naturel ou plus communément le SEO (Search Engine Optimization) est un ensemble de méthodes, outils et techniques qui, travaillés globalement et régulièrement, vous aident à améliorer la visibilité de votre site web et à générer du trafic.

Le référencement naturel est incontournable pour toute société souhaitant augmenter le nombre de visiteurs et développer son chiffre d’affaire via internet. Il est donc idéal de l’intégrer au plus tôt dans votre stratégie, en amont de la création de votre site.

Le référencement naturel est le fait de faire figurer son site internet dans les moteurs de recherche et ainsi de le faire connaitre. Le but étant de figurer parmi les premiers sites répertoriés pour une requête donnée.

Nous ne pouvons pas évoquer le référencement sans parler brièvement de Google, parce que l’idée est bien là, vous aidez à faire de Google votre ami le plus cher. En effet, plus de 90% des recherches sur internet en France et en Europe s’effectue via le moteur de recherche de Google (94% de part de marché en France). Ainsi, les critères de référencement de Google sont prioritairement visés par les sites internet qui veulent augmenter leur visibilité.

 

4 notions importantes pour une optimisation de votre référencement 

L’importance de la sémantique : la nécessité d’utiliser les nouvelles balises HTML5 n’est plus à démontrer.

L’optimisation du contenu : votre choix de mot doit être pertinent afin d’anticiper la recherche que fera l’internaute.

L’optimisation technique : le site sera mieux référencé s’il est sur un serveur sécurisé (https) et que le site est responsive.

Le Netlinking : le partage de lien entre site web.

 

Certaines choses sont considérées comme abusives par Google

Les contenus des sites Web devraient être présentés de manière identique aux robots d’indexation et aux internautes. Il est par exemple interdit d’avoir recours aux pratiques suivantes :

  • Utilisation d’un texte blanc sur fond blanc ;
  • Placement d’un texte derrière une image ;
  • Utilisation de CSS pour positionner du texte en dehors de l’écran ;
  • Définition de la taille de la police sur 0 ;
  • Dissimulation d’un lien en ne le faisant porter que sur un seul caractère de petite taille (un trait d’union au milieu d’un paragraphe, par exemple).

Les étapes clés pour préparer le référencement naturel 

  • Analyser le trafic du site sur Google Analytics ;
  • Recenser les contenus qui nécessitent une amélioration ;
  • Déterminer à l’aide des personas les contenus susceptibles de créer du trafic et définir un planning de publication pour l’année à venir ;
  • Améliorer le contenu existant (code sémantique, meta data…) ;
  • Suivre l’évolution du trafic généré par les nouvelles publications/optimisation.

Une multitude de plugin pour vous aider dans votre référencement

Sur WordPress il est facile d’améliorer le référencement avec l’un des nombreux plugin SEO (on vous conseille WordPress Yoast).

Par ailleurs, autoriser le partage d’une de vos pages par l’internaute sur les réseaux sociaux permet d’améliorer la réputation de votre site.

Que faut-il retenir ?

Le positionnement dans le moteur de recherche dépend essentiellement de 2 éléments, de la qualité de votre contenu et de la renommée de votre site (nombre de lien entrant et réputation des sites qui pointent vers le votre).

  • Utiliser les suggestions de Google pour trouver les requêtes les plus utilisées par l’internaute sur un sujet donné.
  • Utiliser Google Trends pour savoir, parmi deux expressions, laquelle est la plus utilisée par les internautes.
  • Optimiser le référencement passe d’abord par une étude de l’existant. Les statistiques sont vos alliés.

Les moteurs de recherche scannent régulièrement votre site à l’affut de mises à jour. Un site qui n’évolue pas voit son positionnement se dégrader au profit de sites avec du contenu plus récent. Il est donc conseillé de publier régulièrement.

L’utilisation des personas peut vous permettre de comprendre votre auditoire et de trouver des idées de contenu à publier.

Mémento des balises HTML les plus courantes.

Mémento des balises HTML les plus courantes.

Bienvenue dans le monde merveilleux du HTML5 !

Vous trouverez dans ce contenu une liste non exhaustive des balises HTML. Vous en identifierez un certain nombre, déjà connues, néanmoins il en existe beaucoup d’autres. Mon but n’est pas de vous noyer sous la multitude de balises existantes mais de vous communiquez celles qui vous seront les plus utiles.

Cette annexe peut vous servir de pense-bête lorsque vous développez votre site web.

Pour votre information, elle n’est pas complète. Je préfère en mettre moins et garder seulement celles qui sont les plus utilisées dans la pratique. Pour aller plur loin, une liste exhaustive des éléments HTML est fournie sur le site du Mozilla Developer Network.

Balises de premier niveau

Les balises de premier niveau structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d’une page web.

Balises principales

Description : <html>
En-tête de la page : <head>
Corps de la page : <body>
Code minimal d’une page HTML

<!doctype html>
<html>
<head>
<meta charset= »UTF-8″>
<title>Document sans nom</title>
</head>

<body>
</body>
</html>

Balises d’en-tête

Ces balises sont toutes situées dans l’en-tête de la page,  entre <head> et </head> :

<link /> : Liaison avec une feuille de style
<meta /> : Métadonnées de la page web (charset, mots-clés, etc.)
<script> : Code JavaScript
<style> : Code CSS
<title> : Titre de la page

Balises sémantiques

Un langage sémantique signifie que le type de balise utilisé donne une information sur la nature de son contenu.

Balises sectionnantes

Ces balises permettent de construire le squelette de votre site web.

<header> : En-tête
<nav> : Liens principaux de navigation
<section> : Section de page
<article> : Article (contenu autonome)
<aside> : Informations complémentaires
<footer> : Pied de page

Balises de structuration du texte

<abbr> : Abréviation
<blockquote> : Citation (longue)
<cite> : Citation du titre d’une œuvre ou d’un évènement
<q> : Citation (courte)
<sup> : Exposant
<sub> : Indice
<strong> : Mise en valeur forte
<em> : Mise en valeur normale
<mark> : Mise en valeur visuelle
<h1> : Titre de niveau 1
<h2> : Titre de niveau 2
<h3> : Titre de niveau 3
<h4> : Titre de niveau 4
<h5> : Titre de niveau 5
<h6> : Titre de niveau 6
<img /> : Image
<figure> : Figure (image, code, etc.)
<figcaption> : Description de la figure
<audio> : Son
<video> : Vidéo
<source> : Format source pour les balises<audio>et<video>
<a> : Lien hypertexte
<br /> : Retour à la ligne
<p> : Paragraphe
<hr /> : Ligne de séparation horizontale
<address> : Adresse de contact
<del> : Texte supprimé
<ins> : Texte inséré
<dfn> : Définition
<kbd> : Saisie clavier
<pre> : Affichage formaté (pour les codes sources)
<progress> : Barre de progression
<time> : Date ou heure

Balises de liste

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

<ul> : Liste à puces, non numérotée
<ol> : Liste numérotée
<li> : Élément de la liste à puces
<dl> : Liste de définitions
<dt> : Terme à définir
<dd> : Définition du terme

Balises de tableau

<table> : Tableau
<caption> : Titre du tableau
<tr> : Ligne de tableau
<th> : Cellule d’en-tête
<td> : Cellule
<thead> : Section de l’en-tête du tableau
<tbody> : Section du corps du tableau
<tfoot> : Section du pied du tableau

Balises de formulaire

<form> : Formulaire
<fieldset> : Groupe de champs
<legend> : Titre d’un groupe de champs
<label> : Libellé d’un champ
<input /> : Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea> : Zone de saisie multiligne
<select> : Liste déroulante
<option> : Élément d’une liste déroulante
<optgroup> : Groupe d’éléments d’une liste déroulante

Balises génériques

Ces balises n’ont pas de sens sémantique.En effet, toutes les autres balises HTML ont un sens :<p> signifie « Paragraphe »,<h2> signifie « Sous-titre », etc.
Parfois, nous avons besoin d’utiliser des balises génériques (aussi appelées balises universelles) car aucunes autres balises peuvent convenir. Elles sont le plus souvent utilisées pour construire le design du site.

Il y a deux balises génériques : l’une est inline, l’autre est block.

<span> : Balise générique de type inline
<div> : Balise générique de type block

Elles ont un intérêt uniquement si vous leur associez une class, un id ou le style.

class : indique le nom de la classe CSS à utiliser.
id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d’identifier la balise. Vous pouvez vous servir de l’ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
style : cet attribut vous permet d’indiquer directement le code CSS à appliquer. Vous n’êtes donc pas obligés d’avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Par ailleurs, il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez les utiliser sans aucun problème dans la plupart des autres balises.

Qu’est-ce que WordPress ?

Qu’est-ce que WordPress ?

WordPress est un CMS (outil de gestion de contenu).

  • Pour l’éditeur c’est un outil qui permet de gérer le contenu de son site internet ;
  • Pour le développeur, c’est un outil qui permet de concevoir des sites internet dont la gestion est confiée à l’éditeur.

Dans une nouvelle installation de WordPress, il y a plusieurs thèmes préinstallés ; aucun de ces thèmes ne vous démarquera et n’est adapté à votre besoin. Il faut donc, dans un premier temps, organiser les contenus de votre site, afin de choisir ou faire développer un thème au design et aux fonctionnalités adaptées.

Utilisateur, oui ! Mais lequel ?

Les utilisateurs sont les personnes autorisées par le propriétaire/administrateur du site à se connecter à WordPress, à accéder au contenu, et à publier/configurer le site selon le rôle qui leur a été attribué.

Il y a plusieurs rôles, classés par ordre d’importance. Chaque rôle a des pouvoirs différents. Pour éviter de donner trop de pouvoir aux utilisateurs, il convient d’affiner la distribution des rôles afin de ne pas complexifier l’interface et ainsi éviter tout risque de dérèglement de la configuration du site.

Par ordre croissant d’importance, on retrouve :

  • L’internaute : sans droit, il peut consulter tous les contenus qui sont publics (certains articles sont privés, ils sont protégés par un mot de passe).
  • L’abonné : il a accès, en plus du contenu publié, au contenu privé. Il peut commenter les articles publiés (mais sans jamais pouvoir ni modifier, ni supprimer).
  • Le contributeur : il écrit des articles mais ne peut pas les publier, une demande de publication est envoyée à l’éditeur/administrateur.
  • L’auteur : il écrit, publie et gère ses articles. Il ne peut pas publier ou gérer les articles d’autres auteurs, il ne peut pas créer de catégorie ou de page.
  • L’éditeur : Véritable rédac’chef, il peut gérer les publications de tous les utilisateurs précités. Il a en plus accès à la configuration éditoriale (menu, widgets, newsletter…).
  • L’administrateur : il détient les pleins pouvoirs. Il peut effectuer toutes les modifications possibles (installer les plugins, gérer les thèmes, les utilisateurs…). Sans conteste, le Batman des utilisateurs !

Pin It on Pinterest