Advanced MJML coding techniques for email development

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

It's time for the exciting conclusion of our journey into one of the most popular email frameworks available: MJML (Mailjet Markup Language). Okay, it wasn't a big cliffhanger or anything. But we're definitely excited to share the second half of this interview with you.

When we last left Nicole Hickman, she had just shown us the basics of how to use MJML to quickly and efficiently code responsive HTML emails. This time, we're diving a little deeper and discovering more advanced MJML techniques.

I asked Nicole some of the most common questions I've seen among email geeks about the MJML framework, including dark mode, image swapping, and overlapping content in emails.

Part of the beauty of MJML is its simplicity, as we saw in Part 1 of this interview. But what happens when you need to push things a little further than the framework allows? Check out Nicole's tips in the video below. And don't forget to subscribe to Sinch Email on Acid on YouTube to see new episodes of Notes from the Dev: Video Edition.

(Visit our Resource Center to view the full transcript of this episode.)

We introduce: label

When it comes to advanced MJML techniques and traditional HTML email development, there is a way to get the best of both worlds.

I'll get straight to the point. Tag is what you need when you need to “break out of the box” of MJML, as Nicole put it. Basically, whenever Nicole wants to code something that doesn’t have an easy solution using MJML markup, she uses to include pure, responsive HTML.

In the first part of our exploration of MJML, we explained that components such as text, buttons and tables are always in And Keywords.

The usage of is an exception. It is an end tag that does not contain any MJML components. Instead, you use it to code like you would in a regular HTML file.

“There are many things that MJML can do all by itself. But if you need to do something that would be a bit more cumbersome within MJML itself, you can of course just do it in . That’s what it was developed for.”

Nicole Hickman, Direct Marketing Developer, Fishawack Health

In other words, you are not completely tied to the MJML framework when you use it to develop responsive emails.

Dark mode and MJML

When Nicole showed us how she creates emails with dark and light versions, she explained that much of it is at the top of the Section.

If you've watched tutorials on coding emails in dark mode, you'll recognize the meta tags that let email clients know that your code offers both light and dark mode versions:

2. <Meta Surname=“Color scheme” Contents=“light dark”>

3. <Meta Surname=“supported color schemes” Contents=“light dark”>

4. </mj-roh>

Below the default CSS styling in Nicole's boilerplate for this email layout, she adds and defines additional dark mode styles using a root selector and the media query (prefers-color-scheme: dark).

2. :root {

3. Color scheme: light dark;

4. supported color schemes: light dark;

5. }

7. @media (preferred color scheme: dark) {

8. …Dark mode styles here…

9. }

10. </mj-style>

Within the Tag above: Nicole includes CSS classes for dark mode and tells email clients to hide images in light mode.

Nicole says that it is important to know how to specify CSS selectors when coding with MJML. This allows the email to be based on what you defined in the styles in the header area.

That's why, for example, Nicole used a right angle bracket in her dark mode styles when defining the background color for tables in dark mode.

1. .dark-mode-bg>Table {

2. Background: #1E1E1F;

3. Background-Image: linear gradient (#fec800, #fec800) !important;

4. }

Later, in a you would include the CSS class for the dark mode background:

background Color=“F f f” CSSClass=“Darkmode-bg”>

When this is parsed into HTML, the class goes into a