It’s time for the thrilling conclusion of our journey into probably the most widespread e mail frameworks obtainable: MJML (Mailjet Markup Language). Okay, so it wasn’t an enormous cliffhanger or something. However we’re undoubtedly excited to share the second half of this interview with you.
Once we final left Nicole Hickman, she simply completed exhibiting us the fundamentals of how one can use MJML to shortly and effectively code responsive HTML emails. This time, we’re diving a bit of deeper to find superior MJML methods.
I requested Nicole a number of the commonest questions that I’ve observed e mail geeks questioning concerning the MJML framework. That features darkish mode, picture swapping, and overlapping content material in emails.
A part of the fantastic thing about MJML is its simplicity, as we noticed in Half 1 of this interview. However what occurs when you must take issues a bit of additional that the framework permits? Take a look at Nicole’s suggestions within the video beneath. And don’t neglect to subscribe to Electronic mail on Acid by Sinch on YouTube to catch new episodes of Notes from the Dev: Video Version.
(Go to our Useful resource Heart to view the total transcription of this episode)
Introducing the <mj-raw> tag
In relation to superior MJML methods and conventional HTML e mail growth, there’s a means you may get one of the best of each worlds.
I’ll reduce to the chase right here. The <mj-raw> tag is what you’ll want when it’s important to “get away of the field” of MJML, as Nicole put it. Mainly, at any time when she needs to code one thing for which there’s no easy answer with MJML markup, Nicole makes use of <mj-raw> to incorporate uncooked, responsive HTML.
Within the first installment of our exploration into MJML, you’ll recall how Nicole defined that parts like textual content, buttons, and tables all the time get enclosed in <mj-section> and <mj-column> tags.
The usage of <mj-raw> is an exception. It’s an ending tag that received’t embrace any MJML parts. As a substitute, you utilize it to code the identical means you’d in a traditional HTML file.
“There are lots of issues that MJML can do all by itself. However in case you have the necessity to do one thing that will be a bit of extra cumbersome to attempt to do inside the MJML itself, you may actually bust out and simply wrap issues in
<mj-raw>. That’s what it was developed for.”Nicole Hickman, Direct Advertising Developer, Fishawack Well being
To place it one other means, you’re not fully tied to the MJML framework if you use it to develop responsive emails.
Darkish mode and MJML
When Nicole confirmed us how she creates emails with darkish and light-weight variations, she defined that lots of it takes place up within the <mj-head> part.
For those who’ve seen any tutorials on how one can code darkish mode emails, you’ll acknowledge the meta tags which are used to let e mail shoppers know that your code gives each mild and darkish mode variations:
<mj-raw>
<meta identify="color-scheme" content material="mild darkish">
<meta identify="supported-color-schemes" content material="mild darkish">
</mj-raw>
Beneath the usual CSS styling in Nicole’s boilerplate for this e mail format is the place she continues including and defining darkish mode kinds, utilizing a root selector and the media question (prefers-color-scheme: darkish).
<mj-style>
:root {
color-scheme: mild darkish;
supported-color-schemes: mild darkish;
}
@media (prefers-color-scheme: darkish) {
...darkish mode kinds right here...
}
</mj-style>
Inside the <mj-style> tag above, Nicole contains darkish mode CSS lessons and tells e mail shoppers to cover mild mode photographs.
Nicole says it’s necessary to know how one can specify CSS selectors when coding with MJML. That’s what permits the e-mail to change to darkish mode preferences (background shade, textual content shade, and many others.) inside an <mj-section> based mostly on what you outlined within the kinds inside the top part.
That’s why, for instance, Nicole used a right-angled bracket in her darkish mode kinds when defining the background shade for tables in darkish mode.
.dark-mode-bg>desk {
background: #1E1E1F;
background-image: linear-gradient (#fec800, #fec800) !necessary;
}
Later, in an <mj-section>, you’d embrace the CSS class for the darkish mode background:
<mj-section background shade="fff" css-class="dark-mode-bg">
When this will get parsed to HTML, the category goes right into a <div>, however the colours really get utilized to the primary <td> in order that it seems within the cells of the desk. That’s why Nicole focused desk in her darkish mode kinds. In any other case, it wouldn’t override the backgrounds on her tables, which implies they’d nonetheless present a light-weight mode background.
Watching the best way different builders work is superb! Nicole had me rethinking the best way I goal darkish mode. However we’ll have to save lots of all that for one more episode.
Picture swapping and MJML
One other query individuals have about extra superior MJML entails picture swapping. Many occasions, you’ll need a picture that’s one measurement for desktop viewing and a distinct measurement that’s optimized for cell gadgets.
By the best way, Nicole takes a “cell first” method to e mail growth. For picture swapping, which means she finally ends up doing one thing that will seem to be counterintuitive.
Within the first grouping of kinds, she contains something that will should be utilized inline to the tag. Nicole does this as a result of GANGA (Gmail App with Non-Google Accounts) doesn’t assist media queries, that are used for concentrating on completely different display sizes.
So, by making use of the next code, she will inform e mail shoppers to indicate a sure picture on desktop however not cell:
<mj-type inline="inline">
.present {
show: none;
}
.cover {
mso-hide: all !necessary;
}
</mj-style>
Nicole additionally applies these lessons to the media question as you’d count on. Nevertheless, by including !necessary; to the top (see beneath) it overrides something within the desktop view.
@media solely display and (min-width:480px) {
.present {
show: block !necessary;
}
.cover {
show: none !necessary;
mso-hide: all !necessary;
}
}
Lastly, right here’s a take a look at the MJML code within the physique of Nicole’s e mail during which she contains each a 600 x 400 placeholder picture for desktop and a 320 x 400 placeholder picture for cell gadgets whereas making use of the suitable lessons:
<mj-section>
<mj-column>
<mj-image src="https://through.placeholder.com/600x400" css-class="present” />
<mj-raw>
<!—[if !mso]><!---->
</mj-raw>
<mj-image src="https://through.placeholder.com/320x400" css-class="cover" />
<mj-raw>
<!--<[endif]-->
</mj-raw>
</mj-column>
</mj-section>
When Nicole switches over to the parsed HTML, we see that the inline class is show: none. However as a result of she used show: block together with !necessary; that overrides the inline setting.
Additionally, discover that Nicole makes use of the <mj-raw> tag above so as to add conditional statements within the MJML that cover cell content material from Outlook’s desktop shoppers for Home windows.
Overlapping content material and MJML
One other approach that skilled e mail builders use frequently is overlapping components in a design. For instance, it’s your decision stay textual content overlayed on prime of a graphic. That means, the e-mail is accessible for display reader utilization, and essential copy will present up even when the recipient has photographs turned off.
To make this occur in MJML, the <mj-raw> tag as soon as once more involves the rescue.
Nicole used some superior kinds, which e mail super-geeks Mark Robbins, Steven Sayo, and Rémi Parmentier shared with the group. You possibly can study extra about these strategies for overlay and absolute positioning from Steven Sayo on Medium and from a publish on Good Electronic mail Code by Mark Robbins.
When you’ve found out how one can use these code snippets to attain the form of overlapping you need, it’s so simple as putting it into both an <mj-style> or <mj-raw> tag.
Nicole instructed me she selected to make use of <mj-raw> with an everyday <type> tag for organizational functions as a result of she needed to maintain it as its personal separate string.
Let the experimentation start
Now that you simply’ve been launched to the fundamentals of this e mail framework and a few superior MJML coding methods, it’s time to begin taking part in round.
Nicole talked about just a few occasions that she did must experiment with issues a bit to get all of this to work. However in case you ask me, that’s a part of the enjoyable of being an e mail developer.
And right here’s some excellent news… Nicole says that the MJML Neighborhood on Slack is tremendous pleasant and useful. So, as you begin attempting out superior MJML methods and hit roadblocks, head over there to ask questions and make connections.
Talking of connecting… we’re simply getting began with Notes from the Dev: Video Version. There are extra nice suggestions, methods, and tutorials coming your means quickly. Be sure you subscribe on YouTube so that you aren’t neglected.
Writer: Megan Boshuyzen
Megan is a graphic designer turned e mail developer who’s labored on all elements of e mail advertising. She believes good emails for good causes make a optimistic distinction on the 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 elements of e mail advertising. She believes good emails for good causes make a optimistic distinction on the 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.
