Skip to main content

Using Mail Jet Markup Language to help create your email template

Submitted by daniel on

Earlier this year I was asked to set up an email newsletter template. While not necessarily appropriate for the task in hand, someone did recommend using Mail Jet Markup Language (MJML). On a more recent assignment I had to create an campaign email from scratch and as there were no specifications for how this should be done, I decided to give MJML a go.

Some of you may be wondering what on earth is MJML and what benefit is there in using it? Well for those of you who have worked on email campaign previously will know, designing an email to work well across the myriad different email clients can be challenging, due in part to the lack of standard compliance we are used to seeing in modern browsers today. This means creating a new template from scratch can be a laborious process, especially when it comes to having to test it for consistency across the myriad different email clients, and of course Outlook is akin to a legacy browser while Outlook 365 will strip out certain tags etc that can also affect how your email looks etc etc

Therefore using a framework to create your email cmapaign may save you considerable effort. Step forward MJML, a component based Email Framework created my Mailjet and then released to the public as open source. MJML is written in React which by design is very modular and therefore it is possible to extend this framework by writing your own components. To get started you probably want to use the standard components that cover a range of use cases and can then be easily customised to suit your own purposes. 

I recently used it on a recent project and was very helpful in helping to create a component based email template and if you are in a similar position I would certainly recommend you have a look to see if MJML can help you with your own email template requirements.

 

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.