https://github.com/sleede/html-email-template
https://github.com/sleede/html-email-template
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sleede/html-email-template
- Owner: sleede
- Created: 2020-12-09T13:44:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-09T08:44:37.000Z (over 5 years ago)
- Last Synced: 2025-08-02T20:16:57.313Z (11 months ago)
- Size: 4.36 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Créer et tester des emails html
[création](#mjml) | [test](#testi)
## Ressources
+/-
- [emailclientmarketshare.com](http://emailclientmarketshare.com/) :bar_chart:
- [campaignmonitor.com/css/](https://www.campaignmonitor.com/css/) :vertical_traffic_light:
- [caniemail.com](https://www.caniemail.com/) :vertical_traffic_light:
- [templates.mailchimp.com](https://templates.mailchimp.com/) :bookmark_tabs:
- [mailjet.com/resources](https://www.mailjet.com/resources/) :bookmark_tabs:
- [emailonacid.com/blog](https://www.emailonacid.com/blog/category/email-development/) :bookmark_tabs:
- [litmus.com/resources](https://www.litmus.com/resources/) :bookmark_tabs:
- [emailonacid.com/resources](https://www.emailonacid.com/resources/) :bookmark_tabs:
- [reallygoodemails.com](https://reallygoodemails.com/) :art:
# MJML
MJML est un langage de balisage *open-source* créer par [Mailjet](https://www.mailjet.com/).
Grâce à une syntaxe simple et un ensemble de composants, MJML permet de rapidement créer des emails HTML *responsive* et directement compatibles avec une grande majorité de clients mail.
C'est le moteur MJML qui se charge de compiler le template en HTML.
## Documentation
[https://documentation.mjml.io/](https://documentation.mjml.io/)
## Utilisation
MJML dispose de nombreuses options d'utilisations :
- [éditeur en ligne](https://mjml.io/try-it-live)
- [application desktop](https://mjmlio.github.io/mjml-app/)
- dans **VS Code** grâce à une [extension](https://github.com/mjmlio/vscode-mjml)
- en [ligne de commande](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md)
- dans [Node.js](https://documentation.mjml.io/#inside-node-js)
- [API](https://mjml.io/api) gratuite
- \+ les outils développés par la [communauté](https://mjml.io/community)...
Exemple d'intégration dans un projet avec la gem [MJML-Rails](https://github.com/sighmon/mjml-rails) qui permet d'injecter des données dynamiques :
```html
This is <%= @user.username %>
Hello World
Hello World
<%= render partial: "info" %>
```
:warning: Il est préférable de générer une version HTML *minifiée* car elle supprime les attributs `style` vides qui peuvent poser problème sur *Outlook*.
## En pratique
#### Structure :
```html
.primary div {
color: tomato !important;
}
Hello World !
Lorem ipsum dolor sit amet...
```
---
#### Style :
MJML va générer une structure de plusieurs éléments HTML en convertissant un composant.
:warning: Une `` est toujours appliquée à l'élément parent. Pour appliquer correctement un style il va donc parfois être nécessaire d'inspecter le code généré pour cibler le bon élément enfant.
:warning: Comme les styles *inline* sont très utilisés dans les emails HTML il est indispensable de toujours ajouter `!important`.
[specificity.mjml](./demo/specificity.mjml) : règles de spécificité.
---
#### Unitées :
La largeur des `` est en **pourcentages** (%) mais pour tout le reste il semble préférable de rester en **pixels** (px).
Un exemple : *Outlook* va transformer un *padding* définit en pourcentages... en pouces, et d'une façon *étrange*.
L'unité `em` peut également être utilisée sur tout les clients mail [(source)](https://www.caniemail.com/features/css-unit-em/).
---
#### Formats d'images :
- `.gif`(pas d'animation sur Outlook)
- `.png` (même avec alpha)
- `.jpeg`
- Pas de `.svg` :no_entry_sign:
[source](https://www.caniemail.com/search/?s=image%20format)
:warning: Donnez à chaque élément `` décoratif un attribut `alt` vide : `alt=""`
---
#### Responsive :
MJML met à disposition un composant `` au comportement *responsive*.
Placés dans une ``, les `` se partagent sa largeur sur desktop et vont automatiquement s'empiler verticalement sur mobile. La largeur des `` est définie en pourcentage sans que la somme ne dépasse les 100%. Par défaut l'espace est réparti uniformément sur chaque ``.
Un composant `` englobant des `` va annuler ce comportement responsive pour les grader côte à côte sur mobile.
[columns.mjml](./demo/columns.mjml) : layout en 2 colonnes.
---
#### CSS Media query
Support : [plutôt bon](https://www.caniemail.com/features/css-at-media/).
Il faut bien les placer dans une balise `` **SANS** l'attribut ``. Vous pouvez créer plusieurs balises `` dans ``.
:warning: Utilisez la règle `!important` sur chaque propriété.
```html
...
.mobile table {
display: none !important;
mso-hide: all;
}
@media (max-width: 480px) {
.paragraph div {
font-size: 16px !important;
color: tomato !important;
}
.desktop table {
display: none !important;
mso-hide: all;
}
.mobile table {
display: table !important;
}
}
```
[media_query.mjml](./demo/media_query.mjml) : afficher/masquer des images différentes sur mobile et desktop et appliquer différents styles à un même élément.
---
#### Police distante
Support : [très mauvais](https://www.caniemail.com/features/css-at-font-face/).
Utilisez la balise `` dans `` et pointez l'attribut `href` vers un fichier contenant la déclaration `@font-face` de la police (ex : [Creepster](https://fonts.googleapis.com/css2?family=Creepster)).
```html
...
...
...
custom font
...
```
[custom_font.mjml](./demo/custom_font.mjml) : appliquer une police distante.
---
#### Image de fond (fenêtre client)
Support : bon... sauf sur Outlook (Windows) mais possibilité de faire mieux directement dans le html.
Utilisez l'attribut `full-width="full-width"` sur la balise `` et pointez l'attribut `background-url` vers le fichier image.
```html
...
```
[background_image.mjml](./demo/background_image.mjml) : appliquer une image de fond sur toute la fenêtre du client.
---
#### Exemple de *template*
[template.mjml](./demo/template.mjml) : template utilisant différents composants MJML.
---
# Testi@
Une fois le *template* généré il faut **impérativement** le tester et c'est ce que propose le site [testi.at](https://testi.at/) grâce à l'aperçu de plus de 90 clients mail sur desktop, mobile et webmail.
## Utilisation
#### Éditeur
Testi@ dispose lui aussi d'un éditeur avec sa preview.
Il suffit de créer un nouveau test (1), coller le code html dans l'éditeur (2), sélectionner les clients mail (3) dans la liste et de lancer le test (4).
L'interface permet aussi de
---
#### Réception d'email
Vous pouvez aussi recevoir des emails sur votre alias de compte.
C'est pratique pour tester une campagne **MailChimp** par exemple.
Depuis l'onglet *Settings / Profile*, vous pouvez copier l'adresse et vous connecter pour recevoir le mail qui va lancer le test automatiquement.
---
#### Aperçus
Enfin, l'interface de présentation des captures d'écrans permet de visualiser le rendu du mail sur les différents clients.
Vous pouvez déplier/replier toutes les fenêtres d'aperçus (1), parfois visualiser le code source (2) et relancer un client (3).
