Writing code takes time. That includes coding responsive HTML emails. A good developer writes clean, concise code that gets the job done. Some might even call it elegant.
What if there was a faster way to write a lot less code and make campaigns responsive on every email client and device? That’s the promise of MJML, a markup language that was created to make the job faster and easier. In this episode of Notes from the Dev: Video Edition, Nicole Hickman joined me to walk us through some of the basics of
I encountered MJML when I first started developing emails. I know a lot of email geeks who swear by it. But I’ve never had the chance to dive into it myself. So, I was super excited for Nicole to tell me how she uses it and why it’s her preferred way to code an email.
Check out our second episode of Notes from the Dev: Video Edition below and so you’ll be sure to see future installments.
(Vist our to view the full transcription of this episode)
What is MJML?
MJML is among the most popular email frameworks out there. A team of developers from Mailjet created this markup language back in 2016 along with the help of others in the open-source community.
Before it was released to the public, Mailjet used it for a year as an internal engine to generate responsive email designs in the And today, Mailjet by Sinch customers are using MJML to design their own
and uses semantic syntax to help email developers code responsive designs more efficiently. MJML’s open-source engine translates (or parses) the markup language into HTML. It’s a little like magic if you ask me.
The result is that email developers are able to create emails faster with fewer lines of code.
You’d think that responsive design would be an absolute necessity for most email marketers by now. But a 2020 study from the CRM found that 1 out of 5 emails it examined were not optimized for mobile devices. I bet you’ve Dominican Republic Business Email List encountered a few of those in your own inbox.
No one wants to be on the email team sending out campaigns that look horrible on mobile. And who wouldn’t want to develop emails in a faster, simpler way? So, let’s dive into Nicole Hickman’s tips on how to start using MJML.
The basics of using MJML
Nicole is currently working for in San Diego as a Direct Marketing Developer. Besides being an experienced email developer, she’s also worked as a print production artist. Nicole had a lot to say about using MJML, so we’re releasing her episode in two parts.
(Watch for part two on advanced MJML techniques coming soon.)
Nicole got started by showing us her MJML email boilerplate. If you want to make one of your own, you can find some simple MJML code snippets and basic advice in our tutorial.
Nicole explained that the <mjml> tag acts like the DOCTYPE. That’s where she defines the language of the email using the lang attribute, which tells screen readers how to properly pronounce words in the language identified in the code. That’s an important thing to include when you’re
The <mj-head> tag includes all the information you’d put in the head section of an HTML email. Nicole gave us a quick look at how the MJML gets parsed into HTML. At this point in the interview, Nicole’s cat got very excited. Maybe that was because cats love the fact that MJML automatically targets Outlook to address the email client’s for you. That’s a major timesaver.
MJML sections, columns, and components
There are a few basic types of “building blocks that you’ll use to code an email with MJML.
The body of an email gets broken down into sections <mj-section>, which can contain one or more columns <mj-column>, which you can then fill with a variety of different components. Nicole said she uses <mj-text> the most often as that’s what’s obviously used to display email copy.
There are plenty of other useful components that come standard with MJML. That includes tags for images <mj-image>, buttons <mj-button>, and tables <mj-table>. As you can see, MJML is a very straightforward and intuitive markup language. There are also MJML components for social media sharing, navigation bars, hero images, and much more. Plus, you can also
Just remember that every section of your email will need to UAE Cell Number start with <mj-section> and <mj-column> tags that get closed out in the end. Here’s an example of how that looks:
