Nicole got started by showing us her MJML email boilerplate. (Watch for part two on advanced MJML techniques coming soon.) Nicole had a lot to say about using MJML, so we’re releasing her episode in two parts.
Besides being an experienced email developer, she’s also worked as a print production artist. Nicole is currently working for Fishawack Health in San Diego as a Direct Marketing Developer.
#Contain image mjml how to#
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. No one wants to be on the email team sending out campaigns that look horrible on mobile. I bet you’ve encountered a few of those in your own inbox. But a 2020 study from the CRM SuperOffice found that 1 out of 5 emails it examined were not optimized for mobile devices. You’d think that responsive design would be an absolute necessity for most email marketers by now. The result is that email developers are able to create emails faster with fewer lines of code. MJML’s open-source engine translates (or parses) the markup language into HTML.
#Contain image mjml code#
MJML is built on ReactJS and uses semantic syntax to help email developers code responsive designs more efficiently. And today, Mailjet by Sinch customers are using MJML to design their own responsive email templates.
A team of developers from Mailjet created this markup language back in 2016 along with the help of others in the open-source community.īefore it was released to the public, Mailjet used it for a year as an internal engine to generate responsive email designs in the drag-and-drop email builder, Passport. MJML is among the most popular email frameworks out there.
#Contain image mjml full#
(Visit our Resource Center to view the full transcription of this episode) What is MJML? 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.Ĭheck out our second episode of Notes from the Dev: Video Edition below and subscribe to Email on Acid’s YouTube channel so you’ll be sure to see future installments. But I’ve never had the chance to dive into it myself. I know a lot of email geeks who swear by it. I encountered MJML when I first started developing emails. In this episode of Notes from the Dev: Video Edition, Nicole Hickman joined me to walk us through some of the basics of MJML (Mailjet Markup Language). 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. A good developer writes clean, concise code that gets the job done. That includes coding responsive HTML emails. The image is to be 639px wide, the height is determined by how tall the image is, but will generally be around 325px.Writing code takes time. Each content block is contained in its own file – content-block-XX.mjml where XX is the number of the content block.Įach content block is titled with an h2 tag which contains the title text, an image, body text, and a link.Įach image is named ‘ recently-MMYY-image-01.jpg‘ where ‘MM’ is the two digit month (leading zeros) and ‘YY’ is the two digit year.
This file contains all the content of the eblast. File is to be 639px wide, the height is determined by how much text there is, but will generally be around 256px.įile is to be named ‘ recently-MMYY-header-text.png‘ where ‘MM’ is the two digit month (leading zeros) and ‘YY’ is the two digit year. This PNG file is the header that contains the full intro text (underlined text). File is to be 639px x 160pxįile is to be named ‘ recently-MMYY-month.png‘ where ‘MM’ is the two digit month (leading zeros) and ‘YY’ is the two digit year. This PNG file is the header that contains the ‘Recently’ title along with the ‘Edition XX’ text. Only two of the three images need to be changed each month – the main logo / link will remain the same. This file contains all the header images for the eBlast.
0 kommentar(er)
