Creating responsive email is not an easy task, and there are various reasons for that.įirst, there is no standard in the way email clients render HTML. However, if you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. I think for the most part that MJML is a tool that should become an essential part of an email developer’s toolkit to accelerate the development process and I recommend that you explore this and with minimal effort, you’ll be impressed with the effects that can be quickly achieved.Email is one of the best ways to engage with your users, especially during the holiday season. This involves more complex coding and is beyond the functionality of MJML at present. I also work with the eCRM team on exploring animated/more complex interactive effects that may be achieved within the confines/constraints of email development. It is a great tool to quickly build newsletters that work responsively. It is very self-explanatory and can be of great benefit when trying to avoid the perils of creating an HTML email template with pure raw code. There is not much of a learning curve with MJML. We now have the possibility of creating a new responsive email from scratch with a quick turnaround (less than one day) if content and image assets are at hand. There was a minor issue with Outlook 2007 (this is not essential in terms of performing well on this platform) however, this could be addressed if needed. It performed really well across most platforms. Running this through emailonacid produced positive results (as seen in screenshots above). With this in mind we tested our generated HTML file. It is great that this simplifies the build and significantly shortens the length of time unnecessarily coding mails, however, it is important to state that this is only viable if it’s tested and performs well across email browsers. You can toggle between mobile/desktop/raw HTML which is user-friendly as you don’t need to view in a separate tab.
#Mjml email how to
The starter templates are a good pointer on how to structure your code at the beginning. MJML also provides pre-built and starter templates, however, it is a very quick process if you start your own build. There are, however, tags like and which are tempting to use but they do not appear to perform well on all browsers so it is important to research the tags to see if they are supported across all.
The documentation is excellent and description of tags can be accessed here: This link will direct you to this online editor: The template tags are intuitively named and armed with images and content a mail can be created with a minimum of effort, however, if further explanation is needed the documentation can be referenced. Outlook is notoriously difficult to get consistency across all versions and conditional statements are often utilized to ensure performance is similar across platforms.Įxample of Outlook conditional statements:Īs with HTML, any opened tags in MJML must have a closing tag. This structure is used for the purpose of achieving consistency of aesthetic across all email platforms.
The archaic table layout that has long been replaced by div based layouts, layouts with flexbox and CSS grids for normal web design still prevail as the standard by which the email newsletter structure should be built. However, I have quickly learned that when it comes to HTML emails, most of the new progressive techniques used in developing for the web need to be reversed when addressing template creation for emails. When I started out assisting with HTML emails I considered myself well versed in HTML/HTML5 & CSS/CSS3. I have been helping the eCRM(email marketing) team in Smartbox with technical issues when it comes to HTML emails. Simplifying email template creation through the use of MJML framework
0 kommentar(er)
