Share
Le courrier électronique est un moyen génial. Il entre directement dans la boîte de réception et son retour sur investissement est largement rapporté comme étant incroyable, à 4000%. C'est aussi perpétuellement incompris et trop souvent c'est mal fait. Avec l'explosion récente des smartphones, nous lisons plus souvent notre courrier sur notre iPhone ou notre Galaxy, mais malheureusement, beaucoup de marketing par courriel n'a pas suivi. Je vois cela comme une énorme opportunité manquée, car un courrier électronique bien exécuté peut être agréable à ouvrir et remporter un franc succès..
Si vous avez déjà essayé la conception et le développement de courriers électroniques HTML, vous avez probablement déjà compris que cela peut être assez difficile. Et vous ne l'imaginez pas - c'est assez difficile. Voici pourquoi:
[Nous allons] continuer à utiliser Word pour créer des messages électroniques, car nous pensons que c'est la meilleure expérience de création de courrier électronique dans le monde..
L'équipe Outlook
Lorsque vous codez pour le Web, vous pouvez au moins compter sur le fait que tous les principaux navigateurs (Chrome, Firefox, Internet Explorer, Safari et Opera) essaient de respecter les normes Web pour le rendu HTML et CSS..
En ce qui concerne les clients de messagerie, vous testez un grand nombre d'anciens et de nouveaux programmes. Ils vont des nouveaux téléphones fonctionnant sous Android et iOS à Lotus Notes d'IBM ou à Microsoft Office 2007 (qui rend infâme votre code HTML créé avec amour avec le moteur de rendu Word HTML. Les versions précédentes d'Outlook utilisaient un navigateur pour rendre leur code HTML, qui est en fait Pourquoi passer à un traitement de texte pour rendre le code HTML demandé? Eh bien, pour des "raisons de sécurité", disent-ils). Et aucun de ces programmes ne doit respecter aucune norme. En gros, ils inventent tous simplement. Vous pouvez voir à quoi ressemble la prise en charge des normes pour certains des clients de messagerie les plus populaires sur Email Standards Project.
Si ce n’est pas suffisant, ajoutez à cela le fait suivant: il existe environ un million de combinaisons différentes de possibilités de rendu du courrier électronique sur les ordinateurs de bureau et mobiles..
Les possibilités de rendu sont (presque) infinies. Voici une liste des clients de messagerie les plus courants:
Clients mobiles:
Clients de bureau:
Clients Webmail:
C'est beaucoup d'appareils!
Si vous êtes déjà familiarisé avec le développement Web, oubliez tout ce que vous savez à ce sujet..
Pour compléter tout cela, le style conditionnel n'est pas une option non plus. Vous pouvez faire certaines choses avec les commentaires conditionnels, mais cela se limite au ciblage de certaines versions d'Outlook ou de tout le reste. sauf certaines versions d'Outlook.
Si vous connaissez déjà le développement Web, oubliez tout ce que vous savez à ce sujet. L’obstacle le plus important à nos yeux est de s’attendre à ce que les choses fonctionnent comme un développement Web «normal». Cela va vous frustrer et vous retenir. La pire chose que vous puissiez faire est de vous fâcher de ne pas pouvoir utiliser de DIV ou marge n'est pas entièrement pris en charge. Alors oubliez tout ce que vous savez sur le HTML sémantique et les dernières spécifications CSS. Croyez-moi, ça va aider.
Jetons un coup d'oeil à quelques suggestions de flux de travail pour la création d'e-mails.
Construire d'abord la structure de votre courrier électronique peut vous aider à éviter de nombreux bugs et problèmes plus tard sur la piste. Ne jamais construire le tout et ensuite tester - vous pouvez souvent vous retrouver avec trop de bugs à traiter, et ils peuvent tous s'influencer les uns les autres.
Travaillez jusqu'à ce que vous atteigniez un jalon de développement mineur (par exemple, lorsque vous avez terminé la structure de base), puis exécutez un test. La meilleure façon de tester est d'utiliser Litmus ou Email on Acid. Je recommande de souscrire à un forfait illimité auprès de l’une ou l’autre de ces sociétés, car il est très important de pouvoir tester fréquemment..
J'aime aussi beaucoup laisser toutes mes bordures de table pour voir ce que je crée, puis je les éteins toutes à la fin. Vous pouvez également peut-être colorier l'arrière-plan de certaines cellules pour vous aider à voir quelles sections sont où. Mon flux de travail idéal est de créer un squelette, de tester, d'ajouter mon contenu, de tester, de styliser les couleurs et les polices, de tester à nouveau et enfin de supprimer mes bordures et de tester à nouveau avant l'envoi..
Validez-le à l'aide du validateur W3C aussi souvent que possible. Cela vous aidera à résoudre les petits détails et à corriger les erreurs telles que les balises manquantes ou ouvertes..
Il existe un très grand nombre d’options pour l’envoi de votre courrier électronique. Les deux services que j'utilise le plus sont MailChimp et Campaign Monitor. Ils offrent des prix compétitifs et ils sont très faciles à utiliser. Il existe également de nombreuses plates-formes commerciales: tout dépend de vos besoins. Inscrivez-vous pour un compte gratuit avec l'un de ceux-ci et ayez un bricoleur dans leurs systèmes pour voir lequel vous aimez. Assurez-vous d'utiliser les données utiles que vos deux services collectent au sujet de vos courriels, telles que les heures d'ouverture et l'utilisation du client de messagerie. Cela peut vraiment vous aider à concentrer vos efforts dans le bon domaine lors de votre prochain envoi..
En ce qui concerne le SPAM; contenu, conception et développement vont de pair. Il est important d'éviter les tactiques de spam comme l'utilisation de majuscules et de nombreux points d'exclamation dans votre ligne de sujet. Certains mots sont également susceptibles de déclencher des filtres anti-spam (comme "gratuit" et "investir"). Plus votre code est propre, moins votre courrier électronique sera marqué comme spam, et le rapport entre les images et le texte aura également un effet. Les e-mails dépendant de l'image sans texte sont plus susceptibles d'être marqués comme spam, de même que les e-mails avec des noms de fichier image très longs.
Le monde des scores de SPAM est délicat et il est important d'exécuter un test de SPAM via votre compte de test avec Litmus ou Email on Acid avant d'envoyer votre courrier électronique, afin de vous assurer que tout votre travail ne soit pas dirigé directement vers le dossier Courrier indésirable.
Passons maintenant au développement du courrier électronique.
Vous aurez besoin d'un éditeur de texte que vous aimez (j'utilise Sublime Text) et d'un compte de test avec Litmus ou Email on Acid. Je recommande fortement de disposer d’un compte test illimité avec l’une de ces entreprises, car cela vous facilitera la vie. Si vous ne payez pas de frais mensuels, vous devrez payer entre 3 et 5 $ par test, ce qui peut vous rapporter assez rapidement..
Je pense que c'est bien de commencer avec une ardoise vierge. Les frameworks tels que HTML Email Boilerplate regorgent de trucs et d'extraits merveilleux que vous pouvez implémenter pièce par pièce. Cependant, si vous débutez, je ne recommande pas de l’utiliser comme point de départ car il contient beaucoup d’éléments inutiles. Les plaques chauffantes peuvent souvent rendre plus difficile la résolution des problèmes s’il ya beaucoup de code inutilisé dans votre fichier..
Remarque: Comme il peut être très précaire d’utiliser tout type d’éditeur (en particulier au moment de dépanner), vous ne devez jamais utiliser un éditeur WYSIWYG, ni aucun type d’éditeur qui promet de transformer votre conception formatée en code HTML valide pour l’envoyer par courrier électronique. . Ce truc ne marche jamais.
Cela peut sembler un détail technique pour commencer, mais vous avez besoin d’un modèle vierge pour commencer à travailler, et ce modèle nécessite un Doctype. Un doctype est essentiellement une ligne de code qui informe le programme qui le lit des balises HTML à attendre et des règles auxquelles le code HTML et CSS adhèrent. De nombreux clients retirent votre Doctype et certains appliquent même le leur. Beaucoup de clients respectent votre doctype et cela peut rendre les choses beaucoup plus facile si vous pouvez valider constamment contre un Doctype.
L'utilisation d'un doctype XHTML a généralement le moins d'inconvénients et d'incohérences entre les documents. J'utilise XHTML 1.0 Transitional, car il s'est révélé le doctype le plus fiable de mon expérience. Dans le tutoriel suivant, au cours duquel nous construirons un modèle de courrier électronique HTML complet, nous utiliserons le code suivant pour commencer notre document:
Démystifier la conception de courrier électronique
le Type de contenu La balise META indique au moteur de rendu de destination comment traiter le texte et les caractères spéciaux. En réalité, vous devez de toute façon encoder tous vos caractères spéciaux (par exemple, & devient & pour & et commercial), mais il vaut la peine de conserver cette ligne..
La méta-balise Viewport indique au périphérique de définir la zone visible sur la largeur de l'écran du périphérique. Il définit également l'échelle initiale sur «normale», qui n'est ni agrandie ni zoomée. Si vous ne le spécifiez pas, de nombreux smartphones peuvent redimensionner votre contenu afin qu'il s'adapte à la zone d'affichage, mais pas à l'intérieur ni dans les marges. Cela peut entraîner du texte et des images qui collent au bord de l'écran.
Enfin, entrez toujours un titre significatif, car c’est ce que les gens verront lorsqu’ils afficheront l’email dans un navigateur, ou le partageront avec leurs amis..
En raison de l’absence de prise en charge standard des e-mails, il n’est pas possible d’utiliser des div, des sections ou des articles; vous devez utiliser des tableaux. De plus, vous devez utiliser de nombreuses tables imbriquées, car ni le colspan ni rangée les attributs sont correctement pris en charge.
Encore une fois, en raison du manque de prise en charge des normes, utiliser des balises standard telles que h1, h2, h3 ou p. Je trouve que ceux-ci peuvent générer un rendu vraiment incohérent entre les clients de messagerie et créer de très gros maux de tête..
Votre meilleur choix est de placer chaque bloc de texte dans sa propre cellule et d'appliquer un style en ligne à cette cellule, par exemple:
Texte
Celui-ci est plus d'un choix personnel. Je préfère garder tous mes styles en ligne (c'est-à-dire: dans les balises HTML elles-mêmes) parce que j'aime savoir exactement où tout se trouve et ce qui affecte quoi. Vous pouvez coder à l'aide de styles, puis les insérer tous en ligne à la fin (Campaign Monitor et MailChimp peuvent le faire automatiquement, vous pouvez également utiliser Premailer ou quelque chose de similaire), mais la raison pour laquelle je n'aime pas cela est que vous apprenez à le connaître. votre code, exécutez-le dans un inliner, puis votre code peut devenir quelque peu méconnaissable. Je trouve que cela rend plus difficile le dépannage. En disant cela, si c'est ainsi que vous voulez travailler, c'est bien; il n'y a pas de raison technique pour laquelle vous ne devriez pas le faire.
N'oublie pas: Vous ne pouvez pas appliquer plusieurs classes à des éléments d'un courrier électronique HTML, car celui-ci n'est pas pris en charge. Chaque élément peut avoir un maximum d'une classe.
Aussi n'oubliez pas: Vous ne pouvez pas utiliser un raccourci pour des choses comme la taille de la police (par exemple) car elle n’est pas prise en charge..
Lorsque vous enregistrez des images, rappelez-vous qu'il est bon de donner à vos images des noms courts et significatifs, car cela améliorera votre score de spam. Des noms comme "campaign_054_design_0x0_v6_email-link.gif" sont susceptibles d'avoir un score de SPAM bien supérieur à celui de "email.gif".
C'est aussi une très bonne idée d'essayer de garder votre courriel entier aussi petit que possible: moins de 100 Ko est idéal mais pas toujours possible, moins de 250 Ko est assez standard. Utilisez une application de compression telle que JPEGmini ou tinyPNG pour réduire au maximum la taille de vos images avant l'envoi. Des temps de chargement plus lents, en particulier sur mobile, peuvent créer ou interrompre votre courrier électronique si la taille du fichier est trop grande..
Ne laissez rien au client de messagerie. Spécifiez toutes vos largeurs, sinon vous pourriez vous retrouver avec des résultats inattendus. Pour vos principaux éléments de conteneur, définissez toujours la taille en pixels. Vous pouvez ensuite utiliser des pourcentages dans votre élément contenant si vous le souhaitez..
Il y a beaucoup à prendre en compte lors de la conception et du développement de la messagerie HTML, dont la plupart impliquent des normes de "non-apprentissage" que vous avez été encouragé à pratiquer pour la conception Web au fil des ans. Cependant, ce tutoriel aurait dû vous fournir une base solide pour travailler et vous êtes maintenant prêt à vous lancer dans le processus de construction actuel. En avant!
J'ai référencé quelques éléments au cours de ce didacticiel; les voici à nouveau au même endroit..
Accentsconagua