It’s time for the thrilling conclusion of our journey into some of the standard electronic mail frameworks accessible: 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.
After we final left Nicole Hickman, she simply completed exhibiting us the fundamentals of the way to use MJML to shortly and effectively code responsive HTML emails. This time, we’re diving just a little deeper to find superior MJML methods.
I requested Nicole among the commonest questions that I’ve observed electronic mail geeks questioning in regards to 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 should take issues just a little additional that the framework permits? Take a look at Nicole’s ideas within the video under. And don’t neglect to subscribe to Sinch E mail on Acid on YouTube to catch new episodes of Notes from the Dev: Video Version.
(Go to our Useful resource Middle to view the total transcription of this episode)
Introducing the <mj-raw> tag
Relating to superior MJML methods and conventional HTML electronic mail improvement, there’s a manner you may get the very best of each worlds.
I’ll lower to the chase right here. The <mj-raw> tag is what you’ll want when you must “get away of the field” of MJML, as Nicole put it. Principally, each time she needs to code one thing for which there’s no easy resolution 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 elements 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 gained’t embrace any MJML elements. As an alternative, you employ it to code the identical manner you’d in a standard HTML file.
“There are lots of issues that MJML can do all by itself. However if in case you have the necessity to do one thing that will be just a little extra cumbersome to attempt to do throughout the MJML itself, you’ll be able to definitely 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 manner, you’re not utterly tied to the MJML framework whenever 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.
In case you’ve seen any tutorials on the way to code darkish mode emails, you’ll acknowledge the meta tags which are used to let electronic mail shoppers know that your code presents 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>
Under the usual CSS styling in Nicole’s boilerplate for this electronic mail format is the place she continues including and defining darkish mode types, 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 types right here...
}
</mj-style>
Inside the <mj-style> tag above, Nicole consists of darkish mode CSS courses and tells electronic mail shoppers to cover mild mode photos.
Nicole says it’s essential to know the way to specify CSS selectors when coding with MJML. That’s what permits the e-mail to modify to darkish mode preferences (background coloration, textual content coloration, and so forth.) inside an <mj-section> primarily based on what you outlined within the types inside the pinnacle part.
That’s why, for instance, Nicole used a right-angled bracket in her darkish mode types when defining the background coloration for tables in darkish mode.
.dark-mode-bg>desk {
background: #1E1E1F;
background-image: linear-gradient (#fec800, #fec800) !essential;
}
Later, in an <mj-section>, you’d embrace the CSS class for the darkish mode background:
<mj-section background coloration="fff" css-class="dark-mode-bg">
When this will get parsed to HTML, the category goes right into a <div>, however the colours truly 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 types. 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 wonderful! Nicole had me rethinking the best way I goal darkish mode. However we’ll have to avoid wasting all that for an additional episode.
Picture swapping and MJML
One other query individuals have about extra superior MJML includes picture swapping. Many instances, you’ll need a picture that’s one dimension for desktop viewing and a unique dimension that’s optimized for cell units.
By the best way, Nicole takes a “cell first” strategy to electronic mail improvement. For picture swapping, which means she finally ends up doing one thing which will seem to be counterintuitive.
Within the first grouping of types, she consists of something which will have to 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 totally different display screen sizes.
So, by making use of the next code, she will be able to inform electronic mail shoppers to indicate a sure picture on desktop however not cell:
<mj-fashion inline="inline">
.present {
show: none;
}
.cover {
mso-hide: all !essential;
}
</mj-style>
Nicole additionally applies these courses to the media question as you’d count on. Nevertheless, by including !essential; to the tip (see under) it overrides something within the desktop view.
@media solely display screen and (min-width:480px) {
.present {
show: block !essential;
}
.cover {
show: none !essential;
mso-hide: all !essential;
}
}
Lastly, right here’s a have a look at the MJML code within the physique of Nicole’s electronic mail through which she consists of each a 600 x 400 placeholder picture for desktop and a 320 x 400 placeholder picture for cell units whereas making use of the suitable courses:
<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 !essential; 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 method that skilled electronic mail builders use usually is overlapping components in a design. For instance, you might have considered trying stay textual content overlayed on prime of a graphic. That manner, the e-mail is accessible for display screen reader utilization, and essential copy will present up even when the recipient has photos turned off.
To make this occur in MJML, the <mj-raw> tag as soon as once more involves the rescue.
Nicole used some superior types, which electronic mail super-geeks Mark Robbins, Steven Sayo, and Rémi Parmentier shared with the group. You possibly can be taught extra about these strategies for overlay and absolute positioning from Steven Sayo on Medium and from a submit on Good E mail Code by Mark Robbins.
When you’ve found out the way to use these code snippets to realize the type of overlapping you need, it’s so simple as inserting it into both an <mj-style> or <mj-raw> tag.
Nicole informed me she selected to make use of <mj-raw> with a daily <fashion> 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 just’ve been launched to the fundamentals of this electronic mail framework and a few superior MJML coding methods, it’s time to begin taking part in round.
Nicole talked about a number of instances that she did should experiment with issues a bit to get all of this to work. However when you ask me, that’s a part of the enjoyable of being an electronic mail developer.
And right here’s some excellent news… Nicole says that the MJML Group 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 ideas, tips, and tutorials coming your manner quickly. Be sure to subscribe on YouTube so that you aren’t ignored.
Writer: Megan Boshuyzen
Megan is a graphic designer turned electronic mail developer who’s labored on all features of electronic mail advertising and marketing. She believes good emails for good causes make a optimistic distinction on this planet. Megan is at the moment working as an electronic mail developer for Sinch E mail. Go to her web site and be taught extra at megbosh.com.
Writer: Megan Boshuyzen
Megan is a graphic designer turned electronic mail developer who’s labored on all features of electronic mail advertising and marketing. She believes good emails for good causes make a optimistic distinction on this planet. Megan is at the moment working as an electronic mail developer for Sinch E mail. Go to her web site and be taught extra at megbosh.com.
