background

Some operations in the project needed to be notified to users by email, and I had my own ideas about emails, so I started writing them myself (12 emails so far).

Record and summarize the evolution of your own development process below:

In the beginning

Use drag-and-drop in the form of UI draft to drag out a basic framework, and then export the HTML code, and then modify the HTML according to the visual draft.

Advantages:

  • Once logged in, you can save your own template, and then drag and drop based on your template to reduce some of the rework.

  • It’s easy to drag and drop, and you can set a lot of properties.

Disadvantages:

  • The drag-and-drop generated export code is redundant, unreadable, and cumbersome to modify (eye damage…..) , the effect and source code is probably as follows)

  • Inline styles are cumbersome to write (and even more cumbersome to write in the exported HTML)

  • Unable to maintain continuously: Lazynet can only save the framework generated after the initial drag, subsequent development is based on exported HTML.

Results: preliminary feasible, hard to finish, compatibility problems in some clients will still exist, maintenance costs are too high.

Later versions of the project raised the need to optimize mail and identified compatible mail clients. (Web-Outlook & Hotmail, Web-Gmail), modified some of the original email styles and added a few new ones.

Recall the disadvantages of the above scheme…. Finally decided to seek a new path.

The following resources are found by various means:

1, www.litmus.com/ (it is said that the industry is using its solution, you can easily check the performance of mail on each client and other functions…. , unfortunately, there is a charge, free registration trial will also provide a credit card

2, www.campaignmonitor.com/css/ (also seemed a sell solution, but it lists each email client support CSS, calculate a CSS compatibility guide?)

3, app.postdrop. IO /

Based on the above resources, I have the following development process:

now

Develop directly on PostDrop based on the basic template it provides, as shown below.

Advantages:

  • The template provides some global Reset styles, taking into account some compatibility and mobile experience scenarios. (Always more than I think)

  • You can write some common classes (as shown below) and use them on the elements you want, which will be automatically converted to inline when exported.

  • Support template saving & online HTML editing, more flexible than drag-and-drop, new and old mail development and maintenance can be done in this web page.

  • Supports sending test emails directly to mailboxes that have been bound with authentication.

  • Support unlimited export/download

Disadvantages:

  • The free plan supports saving up to 5 templates.

  • The free plan allows up to five test emails per day.

  • The free plan can bind up to 2 recipients.

Conclusion: Compared with the scheme of pull easy network, this method has achieved a qualitative leap in both maintainability, convenience and development experience.

Fortunately, these shortcomings can be bypassed…….

Disadvantage 1- Maximum number of templates:

Solution: Just write one single email,

Advantages of the scheme:

  • Debugging is easier, you can see all the messages to the right, and you don’t need to verify compatibility one by one when sending test messages.

  • Common classes are also easier to reuse, without having to rewrite the class from template to template

Disadvantages of the scheme:

  • The last exported message is all in one HTML. (total can’t let backstage oneself to open a mail again….. Write a tool to split emails.)
// splitEmail.js const fs = require("fs"); const jsdom = require("jsdom"); const { JSDOM } = jsdom; // Const HTML = fs.readfilesync ("./uc_all.html", {encoding: "UTF-8 ",}); // Const HTML = fs.readfilesync ("./uc_all.html", {encoding:" UTF-8 ",}); const { document } = new JSDOM(html).window; / / extraction part of general const list = document. QuerySelectorAll (" table. The body "); document.body.innerHTML = ""; const bootstrap = document.children[0].outerHTML; const emails = [].slice.call(list); const outputPath = "./output"; if (! fs.existsSync(outputPath)) { fs.mkdirSync(outputPath); } else {// Clear existing folder const files = fs.readDirSync (outputPath); files.forEach((f) => { fs.unlinkSync(`${outputPath}/${f}`); }); } emails.forEach((email) => { const title = email.getElementsByClassName("title")[0].innerHTML; fs.writeFileSync( `${outputPath}/${title}.html`, `${bootstrap.replace("</body></html>", `${email.outerHTML}</body></html>`)}` ); });Copy the code

Disadvantage 2, 3- Maximum number of recipients, test messages:

Solution: Since you can export HTML an infinite number of times, write your own email tool.

const nodemailer = require("nodemailer"); const fs = require("fs"); // const HTML = fs.readfilesync ("./output/New application.html", Const HTML = fs.readfilesync ("./uc_all.html", {encoding: "UTF-8 ",}); let transporter = nodemailer.createTransport({ host: "smtp.exmail.qq.com", port: 465, auth: { user: "[email protected]", / / fill your own pass: "XXXX", / / fill your own},}); // recipient const tos = ["[email protected]", // "[email protected]", // "[email protected]", // "[email protected]", // "[email protected]", ]; var message = { from: "[email protected]", to: "[email protected]", subject: "Message title", html, }; transporter.verify(function (error, success) { if (error) { console.log(error); } else { console.log("Server is ready to take our messages"); tos.forEach((to) => { transporter.sendMail({ ... message, to }); }); }});Copy the code

So far, the above is the more comfortable HTML Emai development process I have explored so far.

Finally, note some compatibility issues encountered:

1. The email string will be automatically converted into a label and styled by the email client.

Solution:

Add the following class (note: @ media style will exist in the form of style of all in the mail, so eventually have to watch mail client does not support team style is put in the head, www.campaignmonitor.com/css/style-e… That’s what this page is for.)

Online editor:Export HTML:

Support the final effect of email client with style in head (outlook, Gmail, Hotmail support) :126 Mailbox failed:

2, the name of the class is the same as the internal name of the mail client, resulting in a style error.

There is inside qq mailbox.btnThis style:

Solution: Modify the custom class nameEnd result:

3, text color must be set to the target element, some client terminal elements do not inherit color