Distribuer et conquérir: mettre en page maintenant et maintenant

Ils sont lus par des millions de personnes dans le monde. Ils sont ajoutés au spam, supprimés pour toujours, mais sans eux, l'Internet moderne est impensable. De nombreux développeurs front-end feront tout pour mettre la main sur eux. Mon histoire concerne les e-mails, comment ils ont changé depuis 20 ans et comment l'appel d'offres moderne ne sera pas déprimé en les composant. Ceci est le premier article d'une série dans laquelle je parlerai de la façon dont tout a commencé. Dans quelques semaines, nous parlerons des outils de développement et de test de la newsletter.

Il y a plus de 20 ans, les e-mails étaient des messages en texte brut. Avec le développement des technologies Internet et Web, les courriels sont devenus plus complexes tant en termes de conception que de mise en œuvre technique. Ils ressemblent maintenant à des pages de site complètes ou à des pages de destination.

Client de messagerie WorldCast, 2000

Client de messagerie Gmail 2018

Nous développons des lettres et des sites en utilisant les mêmes langages - HTML et CSS. Ce qui se passe dans le code source des lettres html ne ressemble pas du tout à ce qui peut être vu dans l'environnement de développement d'un frontal moderne. Vous pourriez même penser que vous êtes de retour dans la toile du Moyen Âge. Ceux qui ont rédigé les lettres ont probablement déjà compris ce que je veux dire. Le reste je ne dirai qu'un mot: html-tables.

Histoire: hier et aujourd'hui, ou pourquoi tout va si mal

Tout d'abord, rappelons-nous comment tout a commencé.
À la fin des années 90, les premières lettres html sont apparues. Simple, avec une utilisation minimale des capacités de HTML 4.01 et CSS2 (le premier projet de CSS3 apparaîtra dans quelques années de plus). En 1996-1997, les premiers clients de messagerie basés sur un navigateur ont commencé à apparaître. L'ère des clients Web gratuits prenant en charge le balisage html a commencé.

Interface Hotmail 1997

Le plus populaire d'entre eux était le service HotMail, et un an après le lancement, Microsoft l'a acheté. Soit dit en passant, Microsoft ne jouera pas le dernier rôle de notre histoire. Après l'achat de Hotmail, Microsoft lance son propre client de messagerie de bureau, Outlook. Assez rapidement, il occupa étroitement sa niche.

Depuis sa création, les lettres html ont été critiquées plus d'une fois. Les principales plaintes: elles sont dangereuses pour les utilisateurs, rendent pendant longtemps, «dévorent» la bande passante du canal Internet de l'utilisateur et ressemblent à des métiers étranges de concepteurs de sites Web novices. C'était en partie vrai, mais tous ces problèmes ont été résolus au fil du temps: la vitesse de la connexion Internet a augmenté, la conception des e-mails a été fondamentalement révisée, les problèmes du côté des développeurs de clients de messagerie, et en particulier les problèmes de sécurité, ont été résolus. Le progrès et le bon sens ont gagné.

En juin 1999, Microsoft a publié Outlook 2000, dans lequel il a commencé à utiliser le moteur Internet Explorer, Trident, pour afficher des lettres.

Le nouveau moteur s'est avéré ne pas être le meilleur pour les développeurs de sites et a entraîné un grand nombre de bogues, dont le plus célèbre est resté "en service" plusieurs autres versions du client de messagerie d'affilée. Le blocage automatique de toutes les images et le manque de texte alternatif, de fonctionnalités html-form inopérantes, de prévisualisations d'e-mails brisées avant l'envoi ne sont que la pointe de l'iceberg des problèmes Outlook 2000/2002 / XP / 2003.

Verrouillage automatique des images dans Outlook 2003

En janvier 2007, une nouvelle version du client de messagerie de Microsoft a été lancée. Cette version a apporté les changements les plus graves de l'histoire d'Outlook. Dans la nouvelle version de Microsoft Mailer, ils sont passés du moteur Internet Explorer au moteur de leur autre produit - MS Word. Ce besoin s'explique principalement par la «prise en charge des utilisateurs» et «l'augmentation de la sécurité du client de messagerie». En fait, cela a causé de sérieuses pertes dans la prise en charge des propriétés CSS et a créé de nombreux nouveaux bogues, compliquant ainsi la vie des compositeurs de listes de diffusion et des utilisateurs ordinaires.

Grands et terribles tableaux html

En raison du manque de capacité à positionner les blocs et à utiliser float, ainsi qu'en raison de la marge et du remplissage, les développeurs de la liste de diffusion ont dû faire face à une tâche difficile: ils devaient faire en sorte que les e-mails s'affichent aussi bien dans la génération précédente de clients de messagerie de Microsoft que dans la génération actuelle, rien sans casser ou oublier les autres mailers populaires de l'époque.

Et une solution a été trouvée: les tables html. Cela semble simple, mais en fait, cela revient à abandonner l'utilisation des capacités et des fonctionnalités modernes de HTML 4 et CSS2 et à revenir à des approches obsolètes (même à cette époque) pour créer la composition.

E-mail html typique à l'intérieur

La nécessité d'utiliser des tables html n'était pas la seule limitation: il fallait ne pas oublier les préprocesseurs utilisés dans les mailers. Dans les clients Web, html-letter, avant d'être rendu, passe par une étape où le code est analysé du point de vue de la sécurité et de la stabilité - prétraitement - à la suite de quoi des parties potentiellement dangereuses, telles que le code javascript, le contenu embarqué, ainsi que tout à l'intérieur des balises head et style et quelques autres choses.

Le temps a passé, la technologie n'est pas restée immobile, les spécifications HTML et CSS ont été envahies par de nouvelles fonctionnalités, mais Outlook, et avec lui 15% des clients de messagerie du monde (à l'époque), est également resté en place. Ce n'est qu'avec la sortie d'Outlook 2016 (restant sur le même moteur antédiluvien MS Word) que l'attitude de MS envers ses utilisateurs, ainsi que envers les développeurs de listes de diffusion, a commencé à changer. La société Litmus , connue pour son service de test d'envois postaux dans divers clients de messagerie, a conclu un partenariat avec MS.

Litmus a commencé à aider les développeurs d'Outlook à hiérarchiser les problèmes et à accélérer leur résolution, ainsi que les utilisateurs du service - avec la possibilité de vérifier leurs e-mails gratuitement dans ce client de messagerie. Cela a payé, mais cela n'a pas changé la situation: au moment de la rédaction, le client le plus récent de MS était Outlook 2019 récemment annoncé. Intéressant: il a ajouté le support svg, et la police Times New Roman n'est plus un substitut pour les polices web. Mais il "saigne" toujours MS Word avec tous les problèmes qui en découlent.

Différences entre la disposition et la disposition du site

Aujourd'hui, Outlook ferme les trois premiers avec ~ 10% des utilisateurs (en premier lieu - Apple Mail pour les ordinateurs de bureau / mobiles, dans le second - Gmail pour les téléphones Web / mobiles), mais c'est encore beaucoup. Par conséquent, malheureusement, nous ne pouvons pas encore nous éloigner des tables.

Heureusement, les fonctionnalités des moteurs Outlook nous sont désormais bien connues. Cela nous a donné plusieurs outils pour vous faciliter la vie avec les lettres: les commentaires conditionnels et le langage de balisage vectoriel.

Commentaires conditionnels

Beaucoup d'anciens qui ont fait les jours d'IE6-8 se souviennent de ce que c'est.
«Commentaires conditionnels» est un mécanisme d'extension du moteur IE qui vous permet de sélectionner des versions spécifiques d'IE et d'appliquer les règles dont nous avons besoin pour elles. Si nous devons ajouter certains styles uniquement pour Outlook 2000 et supérieur, nous pouvons écrire:

<!-- [if gte mso 9]> <style type="text/css"> /*     Outlook */ </style> <![endif]--> 

De plus, à l'aide des commentaires conditionnels, vous pouvez forcer le moteur à afficher certains blocs de balisage uniquement pour des versions spécifiques d'Outlook:

 <!--[if (gte mso 9)|(IE)]> <table width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"> <![endif]--> 

Souvent, les commentaires conditionnels sont utilisés en conjonction avec une autre fonctionnalité Outlook - VML.

Langage de balisage vectoriel

Le langage de balisage vectoriel (VML) est un langage de balisage vectoriel développé par MS pour décrire les graphiques vectoriels en 1998. Plus tard, il est devenu l'une des langues qui ont servi de base à la langue SVG bien connue. Depuis la sortie d'IE10, VML est obsolète et n'est plus pris en charge ni en cours de développement.

Comment les graphiques vectoriels, le langage de balisage non pris en charge et les lettres html sont-ils liés? C'est simple: l'image d'arrière-plan sans VML n'est pas possible dans Outlook 2007/2010/2013/2016. Mais apprendre pour une nouvelle langue est complètement facultatif: vous pouvez utiliser des outils en ligne prêts à l'emploi qui feront tout pour vous.

 <body> <div style="background-color:#7bceeb;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png"> </td> </tr> </table> </div> </body> 

Hélas, cela ne nie pas le fait que de temps en temps, vous devez toujours choisir le vôtre dans VML, car dans certaines versions d'Outlook, une mise en page d'arrière-plan est configurée.

Apporter la beauté

Les newsletters modernes ont une place pour divers éléments interactifs. Quelqu'un, par exemple, intègre le fil Twitter directement dans la lettre. Je vais parler de choses plus pratiques et utiles: les formulaires et les curseurs.

Formulaires

Les auteurs de emailmonks.com ont décrit une façon d'ajouter un formulaire de travail à l'e-mail. Le mécanisme est le suivant: les données du formulaire sont collectées par la fonction php en tant qu'attribut URL; cet attribut est ensuite stocké dans un document ou un tableau de données distant; plus tard, cet attribut est demandé à la source spécifiée et affiché sur la page.

La prise en charge de ces formulaires est assez bonne: dans Apple Mail, iOS Mail, Outlook, Gmail pour iOS / Android et dans le client de messagerie Android par défaut, ils fonctionnent prêts à l'emploi.

Sliders

Tout le monde sait ce que sont les curseurs et beaucoup de gens savent comment les utiliser avec JS. Cependant, vous pouvez créer le curseur en utilisant du CSS / HTML pur, et même pour qu'il fonctionne correctement dans les clients de messagerie modernes (à l'exception d'Outlook pour Windows - vous aurez besoin d'une solution de rechange pour les curseurs).

La magie de ce curseur est de 20 lignes:

 .slide1 { top: 10px; left: 321px;} .slide1-content {left: 0px;} .slide1:hover { background-color: #37B330;} #slide-1:checked ~ .slide1 {background-color: #37B330 !important;} #slide-1:checked + span + table .swoosh { left: 0px !important; } .slide2 { top: 66px; left: 321px; } .slide2-content { left: 600px; } .slide2:hover { background-color: #37B330;} #slide-2:checked ~ .slide2 {background-color: #37B330 !important;} #slide-2:checked + span + table .swoosh { left: -600px !important; } .slide3 { top: 122px; left: 321px; } .slide3-content { left: 1200px; } .slide3:hover { background-color: #37B330;} #slide-3:checked ~ .slide3 {background-color: #37B330 !important;} #slide-3:checked + span + table .swoosh { left: -1200px !important; } 

En fait, il n'y a rien de magique ici - ce sont juste des sélecteurs imbriqués et des blocs de décalage avec des images à leur hauteur lors du changement de l'état vérifié d'un élément qui commute les diapositives.

Autre interactif

Comme vous pouvez le voir, en utilisant cette approche, vous pouvez créer non seulement des curseurs, mais également d'autres éléments interactifs dans lesquels l'utilisateur doit sélectionner plusieurs états en séquence. Par exemple, des questionnaires.

Les détails de la mise en œuvre de cette option peuvent être trouvés ici .

Et ensuite?

De nombreuses grandes entreprises tentent de rattraper leur retard et d'apporter la technologie moderne aux lettres. Il n'y a pas si longtemps, Google a également décidé d'aider la communauté et de rectifier la situation. Leur projet AMP HTML Email prendra tout le meilleur de Google AMP et nous donnera l'opportunité d'utiliser des curseurs, des lightboxes, des formulaires et même une logique interne sans aucun piratage ou logique complexe. Cependant, alors que le projet est à un stade précoce et que tous ces charmes ne sont disponibles que dans l'aperçu du développeur Gmail.

Ayant rêvé d'un avenir radieux, nous reviendrons du ciel sur la terre. Au cours des 10 dernières années, les tableaux html sont devenus partie intégrante des lettres. Et malgré le fait que l'intérieur de la newsletter n'a pas subi de changements à grande échelle, l'extérieur est devenu beaucoup plus intéressant. Nous avons maintenant atteint le stade de développement des clients de messagerie, lorsque l'expérience interactive dans les lettres est devenue la tendance principale. Il est vrai que la rédaction de telles lettres est devenue plus difficile. Dans le prochain article, je parlerai des outils de développement et de test pour le mailing.