CODEWITHSUNDEEP
node.jshtml-email
Marko Rochevski
Marko Rochevski

Reputation: 1275

Send email with HTML and CSS

I want to send custom emails formatted with HTML and CSS, so basically my templates look something like this:

<html>
    <head>
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
        <style>
            .first {background-color: green; color: black;}
            .second{background-color: red; color: white;} 
        </style>
    </head>
    <body>
        <div class='col-sm-8 first'> Hello <%= typeof name!='undefined' ? name : 'user' %> !</div>
        <div class='col-sm-4 second'> You have been registered! </div>
    </body>
</html>

I am using ejs to parse the template. Everything looks okay when I open the email from Thunderbird or Outlook, but when I open the email with Spark, it just shows plain text (Hello David! You have been registered!). Spark displays formatted emails from other services perfectly, but has trouble displaying the emails I send.

Is there anything I can do to avoid this kind of behaviour in email clients or fix this in Spark ?

Upvotes: 0

Views: 819

Answers (1)

gj-wes
gj-wes

Reputation: 932

You need to build HTML email differently to normal websites. Best practice is to use table-based layouts and inline styles, this is because email clients don't work like a browser (for example, MS Outlook renders it's content using Word engine). Bootstrap won't work at all, external stylesheets aren't widely supported and external JS will be blocked everywhere.

Some good resources to learn a basic layout:

https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/

You could also try and tool like MJML. Which uses it's own simple syntax and renders out into HTML email.

Upvotes: 0

Related Questions