HTML et CSS : concepts de codage des e-mails

Plonger dans le monde du codage peut sembler intimidant si vous ne l'avez jamais fait auparavant. Le codage des e-mails, en particulier, a son propre ensemble de règles. Si vous débutez dans le codage, voici quelques éléments à prendre en compte avant de plonger directement dans le HTML et le CSS pour le courrier électronique.

Dois-je coder mon email ?

Si vous n'avez pas d'expérience en matière de codage, coder un e-mail à partir de zéro n'est peut-être pas une solution pratique pour vous, et ce n'est certainement pas obligatoire. VerticalResponse fournit une large sélection de modèles adaptés aux mobiles et propose un éditeur facile à utiliser afin que vous puissiez personnaliser nos modèles prêts à l'emploi avec votre propre contenu.

Si vous avez de l'expérience et un certain niveau de confort dans l'utilisation ou l'apprentissage du HTML, le codage d'un modèle d'e-mail personnalisé pourrait être une excellente option. Comme pour le codage d'une page Web, vous devez toujours tenir compte des comportements du navigateur et de l'appareil. En outre, tenez compte des styles par défaut uniques de dizaines de clients de messagerie tels que Gmail, Yahoo, Outlook, etc. Si vous avez l'habitude de coder une page Web en HTML et d'appliquer une feuille de style CSS externe, vous devrez vous habituer à travailler avec CSS en interne et en ligne afin que vos styles ne soient pas écrasés par ces valeurs par défaut du client de messagerie.

Vocabulaire à connaître

Si vous débutez dans le codage, voici ce que vous devez savoir sur HTML et CSS :

HTML est un langage que vous utiliserez pour structurer et décrire votre contenu. HTML signifie langage de balisage hypertexte. Lorsque vous codez en HTML, vous balisez votre contenu avec des balises qui indiquent au navigateur Web comment afficher des informations telles que des images et des mots sur une page Web.

Le CSS est un langage qui affecte la présentation de votre contenu. À l'aide de CSS, vous pouvez attribuer des styles aux éléments HTML. CSS signifie feuille de style en cascade. Le mot cascade est significatif car les déclarations de style, ou les règles, seront honorées par ordre d'apparition. Si vous faites deux déclarations pour le même élément, ce dernier sera honoré car il écrase ce qui précède.

Voici les façons de lier votre CSS à votre HTML :

CSS externe : utilisation d'une feuille de style externe (un fichier communément appelé style.css) qui est référencée dans votre fichier HTML. C'est idéal pour les sites Web, car si vous avez 100 éléments communs qui s'étendent sur plus de 100 pages, vous pouvez les modifier tous en même temps avec une seule déclaration CSS.

CSS interne, alias CSS intégré : inclure votre code CSS dans les balises <style> en haut de votre fichier HTML. Lors du codage d'un e-mail, cela peut être utile pour attribuer des styles généraux qui s'appliquent aux éléments communs. Cependant, cette méthode n'est pas toujours prise en charge par e-mail.

CSS en ligne : attacher du code CSS à un seul élément HTML directement dans le code HTML. Dans le codage des e-mails, cette méthode garantit que certains styles ne sont pas écrasés par les valeurs par défaut du navigateur et du client de messagerie.

Si vous avez l'habitude de configurer votre CSS en externe ou en interne, vous pouvez le créer de cette façon, puis utiliser un outil d'inliner tel que celui-ci de PutsMail pour convertir vos styles en CSS en ligne.

La relation entre HTML et CSS

Pour avoir une meilleure idée de la façon dont le HTML et le CSS sont liés et comment la séparation du CSS du HTML peut libérer la présentation de votre HTML, rendez-vous sur le site Web fantastique et célèbre CSS Zen Garden, où vous pouvez voir le même balisage HTML avec des CSS radicalement différents. , codé par des designers renommés.

Approche du codage des e-mails

Lorsque vous codez un e-mail à partir de zéro, restez aussi simple que possible. Utilisez un éditeur de texte brut, tel que TextWrangler, Notepad ou Sublime, et éloignez-vous des éditeurs visuels comme Dreamweaver, car ils peuvent ajouter des éléments inutiles à votre code.

Pour la mise en page, essayez d'adopter une approche axée sur le mobile. Cela signifie concevoir pour de petits écrans et progresser. Avec l'augmentation constante de l'affichage sur mobile, il est plus important que jamais de s'assurer que votre e-mail s'affiche bien sur les téléphones et les tablettes ; il n'y a aucune raison de créer un design compliqué qui n'a l'air bien que sur un bureau. Garder votre message et votre conception suffisamment simples pour les plus petits appareils sera également plus facile à coder, il sera accessible aux utilisateurs de tous les appareils et il gardera l'attention de votre lecteur concentrée sur le principal appel à l'action.

Une fois votre mise en page et votre codage terminés, assurez-vous d'utiliser un outil comme Litmus ou l'éditeur HTML de l'aperçu de la boîte de réception de VerticalResponse pour prévisualiser l'apparence de votre e-mail sur différents navigateurs et clients de messagerie afin de pouvoir résoudre tout problème avant d'appuyer sur envoyer.

Où commencer à apprendre

Il existe de nombreux didacticiels en ligne où vous pouvez apprendre en détail comment coder un e-mail. Une bonne façon de se plonger dans le codage des e-mails est de trouver un modèle simple que vous aimez et de passer un peu de temps à examiner le code. Familiarisez-vous d'abord avec les balises principales telles que <body>, <head> et <div>, puis remarquez comment les balises sont parfois définies plus en détail dans des ID ou des classes, telles que <div class="half-column">. Notez que la dénomination dans un modèle HTML de qualité sera claire et logique afin qu'il soit plus facile de dire ce qui se passe lorsqu'il apparaît dans le CSS.

Si vous êtes prêt pour une leçon étape par étape, recherchez des tutoriels récents (au cours de la dernière année). L'approche du codage est constamment reconsidérée. Une méthode adaptée aux mobiles qui a gagné en popularité au cours des deux dernières années, par exemple, est l'approche fluide/hybride. Ce tutoriel fluide/hybride d'Envato Tuts+ est idéal pour ceux qui ont déjà une certaine compréhension du HTML. Pour les débutants, Lynda.com propose de nombreux cours de codage spécifiques aux e-mails. Un bon cours vous guidera à travers un exercice de codage et fournira un exemple de fichier de projet téléchargeable que vous pourrez utiliser comme référence.

Passez moins de temps à atteindre plus de clients

ESSAYEZ VERTICALRESPONSE AUJOURD'HUI

(C'est gratuit!)

Note de l'éditeur : Ce billet de blog a été initialement publié en mars 2016 et a été remanié et mis à jour pour plus de précision et de pertinence.