Writing code takes time. That features coding responsive HTML emails. A superb developer writes clear, concise code that will get the job executed. Some may even name it elegant.
What if there was a quicker technique to write lots much less code and make campaigns responsive on each e mail shopper and gadget? That’s the promise of MJML, a markup language that was created to make the job quicker and simpler. On this episode of Notes from the Dev: Video Version, Nicole Hickman joined me to stroll us via among the fundamentals of MJML (Mailjet Markup Language).
I encountered MJML after I first began creating emails. I do know a number of e mail geeks who swear by it. However I’ve by no means had the prospect to dive into it myself. So, I used to be tremendous excited for Nicole to inform me how she makes use of it and why it’s her most popular technique to code an e mail.
Try our second episode of Notes from the Dev: Video Version beneath and subscribe to Electronic mail on Acid’s YouTube channel so that you’ll you should definitely see future installments.
(Go to our Useful resource Heart to view the total transcription of this episode)
What’s MJML?
MJML is among the many hottest e mail frameworks on the market. A staff of builders from Mailjet created this markup language again in 2016 together with the assistance of others within the open-source neighborhood.
Earlier than it was launched to the general public, Mailjet used it for a yr as an inner engine to generate responsive e mail designs within the drag-and-drop e mail builder, Passport. And at this time, Mailjet by Sinch prospects are utilizing MJML to design their very own responsive e mail templates.
MJML is constructed on ReactJS and makes use of semantic syntax to assist e mail builders code responsive designs extra effectively. MJML’s open-source engine interprets (or parses) the markup language into HTML. It’s somewhat like magic in the event you ask me.
The result’s that e mail builders are capable of create emails quicker with fewer strains of code.
You’d suppose that responsive design could be an absolute necessity for many e mail entrepreneurs by now. However a 2020 examine from the CRM SuperOffice discovered that 1 out of 5 emails it examined weren’t optimized for cellular gadgets. I guess you’ve encountered a couple of of these in your personal inbox.
Nobody desires to be on the e-mail staff sending out campaigns that look horrible on cellular. And who wouldn’t need to develop emails in a quicker, less complicated manner? So, let’s dive into Nicole Hickman’s tips about the best way to begin utilizing MJML.
The fundamentals of utilizing MJML
Nicole is at the moment working for Fishawack Well being in San Diego as a Direct Advertising and marketing Developer. Apart from being an skilled e mail developer, she’s additionally labored as a print manufacturing artist. Nicole had lots to say about utilizing MJML, so we’re releasing her episode in two components.
(Look ahead to half two on superior MJML strategies coming quickly.)
Nicole obtained began by displaying us her MJML e mail boilerplate. If you wish to make one in every of your personal, yow will discover some easy MJML code snippets and fundamental recommendation in our Electronic mail Coding 101 tutorial.
Nicole defined that the <mjml> tag acts just like the DOCTYPE. That’s the place she defines the language of the e-mail utilizing the lang attribute, which tells display readers the best way to correctly pronounce phrases within the language recognized within the code. That’s an essential factor to incorporate while you’re coding accessible emails.
The <mj-head> tag contains all the knowledge you’d put within the head part of an HTML e mail. Nicole gave us a fast have a look at how the MJML will get parsed into HTML. At this level within the interview, Nicole’s cat obtained very excited. Possibly that was as a result of cats love the truth that MJML mechanically targets Outlook to deal with the e-mail shopper’s DPI scaling issues for you. That’s a serious timesaver.
MJML sections, columns, and elements
There are a couple of fundamental sorts of “constructing blocks that you just’ll use to code an e mail with MJML.
The physique of an e mail will get damaged down into sections <mj-section>, which might comprise a number of columns <mj-column>, which you’ll be able to then fill with quite a lot of totally different elements. Nicole stated she makes use of <mj-text> probably the most typically as that’s what’s clearly used to show e mail copy.
There are many different helpful elements that come commonplace with MJML. That features tags for pictures <mj-image>, buttons <mj-button>, and tables <mj-table>. As you may see, MJML is a really easy and intuitive markup language. There are additionally MJML elements for social media sharing, navigation bars, hero pictures, and rather more. Plus, it’s also possible to construct your personal MJML elements.
Simply do not forget that each part of your e mail might want to begin with <mj-section> and <mj-column> tags that get closed out in the long run. Right here’s an instance of how that appears:
<mj-section>
<mj-column>
<mj-text>
Good day World
</mj-text>
</mj-column>
</mj-section> So, in the event you want a two or three-column e mail format, you’d simply add one other <mj-column> and embrace the elements and content material you need in that column. The columns will mechanically stack on cellular.
You may also fashion the e-mail elements by defining CSS with <mj-attributes> within the e mail’s head part utilizing the <mj-class> and <mj-style> tags. Right here’s an instance of how which may look:
<mj-head>
<mj-attributes>
<mj-class identify="mjclass" shade="inexperienced" font-size="30px" />
</mj-attributes>
<mj-style inline="inline">
.blue-text div {
shade: blue !essential;
}
</mj-style>
<mj-style>
.red-text div {
shade: purple !essential;
text-decoration: underline !essential;
}
</mj-style>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text css-class="red-text">I am purple and underlined</mj-text>
<mj-text css-class="blue-text">I am blue due to inline</mj-text>
<mj-text mj-class="mjclass">I am inexperienced</mj-text>
</mj-column>
</mj-section>
</mj-body> Wish to mess around with MJML code? There’s a “strive it dwell” function on their web site.
Extra on getting began with MJML
In fact, that is solely the start of the numerous methods you need to use MJML to code responsive HTML emails. I’m certain at this level you’ve obtained a couple of questions. That’s why we’re engaged on the second half of this dialogue with Nicole.
Partly two, I’ll ask Nicole among the questions I hear builders asking about MJML:
- How does MJML work with darkish mode emails?
- How do you handle to code overlapping parts?
- How do you arrange picture swapping for cellular?
You don’t need to miss that video, So, ensure to subscribe to Electronic mail on Acid on YouTube.
Within the meantime, listed below are a couple of different locations to go and find out about MJML:
Use Mailjet’s MJML tutorials:
An enormous thanks to Nicole Hickman for sharing her experience on MJML with us. If you wish to join with Nicole, yow will discover her on Twitter and Linkedin.
And eventually, irrespective of the way you select to develop emails… don’t neglect to check! Use Electronic mail on Acid by Sinch to check and preview how your code renders on all main purchasers and dozens of gadgets. Repair points earlier than you hit ship and ship e mail perfection.
Writer: Megan Boshuyzen
Megan is a graphic designer turned e mail developer who’s labored on all points of e mail advertising. She believes good emails for good causes make a optimistic distinction on this planet. Megan is at the moment working as an e mail developer for Sinch Electronic mail. Go to her web site and study extra at megbosh.com.
Writer: Megan Boshuyzen
Megan is a graphic designer turned e mail developer who’s labored on all points of e mail advertising. She believes good emails for good causes make a optimistic distinction on this planet. Megan is at the moment working as an e mail developer for Sinch Electronic mail. Go to her web site and study extra at megbosh.com.
