Comment créer une newsletter au format HTML ?

Comment créer une newsletter au format HTML ?

Avr 17, 2019 | Blog, Programmation

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.

 

Pour aller plus loin :

developer.mozilla.org/fr/

badsender.com/2015/11/19/contrainte-design-email/

badsender.com/wp-content/uploads/2019/02/livre_blanc_html_emailing.pdf

 

Le moteur de rendu, votre partenaire testeur.

Le moteur de rendu, votre partenaire testeur.

Mar 1, 2019 | Blog, Fondamentaux Internets, Référencement

Pour le créateur de site internet, il est obligatoire de procéder à des tests sur tous les navigateurs existants. 

Le rôle d’un navigateur est d’afficher le site web à l’internaute. Or, le site est constitué de pages au format HTML, il faut donc que votre navigateur interprête ce langage en fonction de la norme, pour en créer une version visuelle compréhensible de l’internaute.

Pour un développeur, c’est un peu le casse tête sachant qu’il existe une centaine de navigateurs. Fichtre diantre ! Ça fait beaucoup de travail non ?

Fort heureusement, la plus part des navigateurs utilisent le même moteur de rendu. Mais qu’est-ce donc ?  

Un moteur de rendu HTML est un composant du navigateur qui permet à l’utilisateur de visualiser la page et les ressources qui y sont associées.

Aujourd’hui, il en existe trois, mais ils ne seront bientôt plus que deux. En effet, Microsoft utilisait jusqu’alors Trident pour Internet Explorer, puis dernièrement Edge HTML sur son navigateur Edge. Aux dernières nouvelles, ils décidaient d’abandonner leur moteur de rendu « maison » pour utiliser celui développé par Google, Blink. 

Deux navigateurs différents peuvent utiliser le même moteur de rendu HTML, dans ce cas, un site web aura le même rendu graphique avec ces deux navigateurs. Or, ce qui intéresse la personne qui teste le site, c’est bien l’affichage du site en question.

Pour la petite histoire

1990 : Tim Berners-Lee invente le HTML et crée le premier navigateur nommé, WorldWideWeb. Lorsque le www devient le terme utilisé pour surfer sur le web, il est renommé Nexus ;

1992 : Le centre de recherche NCSA crée le premier navigateur à pouvoir afficher une image NCSA Mosaic ;

1995 : Microsoft sort Internet Explorer et Netscape Netscape Navigator ;

2002 : La Fondation Mozilla sort le navigateur open source Mozilla Firefox ;

2008 : Google sort son propre navigateur Google Chrome ;

2018 : Microsoft renomme Internet Explorer pour Edge et abandonne son moteur de rendu pour adopter celui de Google.

Quantum (ex GECKO)

Développé par la Fondation Mozilla

– Firefox (Linux, Windows, Mac)

– Firefox (Android)

BLINK (fork de WebKit)

Développé par Google

– Chromium / Chrome (Linux, Windows, Mac)

– Chrome (Android)

– Opera (Linux, Windows, Mac)

– Opera Mini (Android, Windows Mobile)

WebKit (fork de KHTML)

Développé par Apple

– Safari (Mac)

– Safari (iOS) Chrome (iOS)

– Navigateur natif (Android)

Mémento des balises HTML les plus courantes.

Mémento des balises HTML les plus courantes.

Nov 23, 2018 | Blog, Fondamentaux Internets, Programmation

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.

Le HTML5, les CSS… et ce bon vieux Java Script !

Le HTML5, les CSS… et ce bon vieux Java Script !

Oct 10, 2018 | Blog, Fondamentaux Internets, Référencement

google analytics

Le langage HTML a été créé au début des années 90, pour rendre accessible de l’information à travers le réseau internet.

Qu’est ce que le langage HTML ?

Tous les sites sont codés en HTML (HyperText Markup Language) qui est un langage universel. C’est un navigateur, qui interprète le code en une interface graphique basique (contenu et fond). Il s’utilise sous forme de balises, comme ci-dessous :

<p></p> : paragraphe
<h1></h1> : titre 1er niveau
<strong></strong> : met en gras

Le HTML permet d’écrire de l’hypertexte, ses possibilités de design sont donc assez limitées. Il est toujours utilisé avec un autre langage, le CSS (Cascading Style Sheets). Le CSS est un langage qui définit la présentation graphique d’un site développé en HTML. Il vous permet de créer le style et le design global du site. Il interprète les balises qui ont été mises en forme dans le code HTML et qui ont toutes une signification précise.

Enfin, il existe d’autres langages, comme le langage de programmation JavaScript, qui permet de gérer les interactions sur la pages web.

Pour résumer : le HTML c’est le fond, la CSS la forme et le Javascript, l’interactivité.

Vous n’avez pas l’âme d’un codeur ?

Si vous ne souhaitez pas vous lancer dans la grande aventure du code, il vous faudra passer par un prestataire extérieur pour développer votre site.

Deux solutions s’offrent donc à vous :
– Prendre une agence web ou un développeur indépendant ;
– Passer par des plateformes, telles que wordpress.com, Blogger ou Wix (éviter le skyblog on est en 2018 quand même).

Aussi, si vous optez pour la 2e solution, renseignez-vous bien au sujet des contraintes techniques, car ces plateformes ont quelques inconvénients. Par exemple, si vous souhaitez utiliser Wix, sachez que vous ne serez pas réellement propriétaire de votre site. En effet, vous n’aurez pas la possibilité de récupérer la propriété de votre site, ainsi que son nom de domaine. Ce fonctionnement permet à Wix de proposer à ses clients des versions payantes, si ils le souhaitent ajouter des fonctionnalités.

 

Pin It on Pinterest