Reliable email HTML output by integrating the MJML email framework to every dedicated page within a website.

I decided upon using the power of the MJML framework and integrated it into the CMS enabling the build of responsive Outlook-compatible email templates on every single page of the website. By using a renowned and proven system, it would take away the cross-device/application formatting struggles and issues.

Within the back-end CMS, I built the functionality to retrieve content from any page on the PSU website and apply that to a choice of pre-built MJML email template sections (which contained the fields to pull in the content), that could be combined to create the final email. This meant that all team members could quickly and efficiently create and export clean & valid HTML to their email sending client, by simply using the CMS.

As well as pulling in data from its own dedicated page, I also created the functionality to retrieve page data from other pages within the website to allow linking to other website content within the email.

See below a "card" layout of links that were manually selected to feature in the email:

To bring it all together, initially, there was the ability to create the MJML templates within the CMS. These could then be selected on the edit page of the dedicated website page, along with further edits that could be made to the email content and layout. Upon reviewing the email, the MJML integration would create the formatted, clean HTML code.

The output HTML could also be configured to work with different email sending clients, including Mautic, Pure360 and ConnectWise. This would automatically configure special fields, unsubscribe links and tracking data to work in their systems.

Baseline email production time went from over an hour to less than a minute. Having reliable and solid responsive email HTML straight out of the box allowed for more time to be spent on messaging and content for our campaigns. The ability to create a webpage and almost immediately have an email built and ready to send was a game-changer. And this especially proved invaluable at times when there was a requirement to quickly produce and send out an email.

Testing options increased with the ability to quickly switch from one design to another and new design elements or whole template redesigns could be redeployed immediately.