Once installed, you can run the local development by typing the script in your terminal: yarn run dev Next, type the following below in your terminal to install the dependencies of the boilerplate: yarn install Then, open the terminal in Visual Studio Code. Make sure to install them if you haven't!Īlright, let's start by opening our project in Visual Studio Code. This is the link to the email template we'll accomplish by the end of this post, you can use it as your reference throughout this tutorial.īy the way, upon writing this post, I assume that you have some web development background and basic knowledge regarding npm, yarn, HTML and CSS. To start, you would need to setup your local development for MJML framework, I've written a separate post just for that, but you can also just clone the boilerplate to save time: git clone mjml-sample-edm If you're new to it, then you're in the right place because I'm going to build an email template using MJML framework in a step by step way so you can follow me along. Originally created by a team of developers at Mailjet, MJML's objective is to simplify the way people design responsive emails. It's called MJML - short for Mailjet Markup Language. Think of it like HTML.If you haven't heard about it yet, there's already an email framework that makes it less painful to build responsive email templates. Information on MJML can be found on I found their website very useful when learning about this language and it really helped me understand it. (Checked using the tabs as mentioned above!)Īt the bottom, I've added a footer containing contact details which when clicked, take you to the relevant form for contacting the company. In the below example, I have created a table, that shows items purchased, along with columns displaying a shipping/billing address, this displays well on both a mobile and a computer. I have added comments to the relevant sections, so if anyone was to view my code they would be able to scan and find the sections required easily. See how everything is nested within a tag, this makes for tidy code. I have provided some of the code used to create part of the mock email template - The best part of MJML, is that you can still add HTML tags into the code along with Google fonts & CSS, meaning you can still add your own flair and creativity to the email template, not to mention changing the colour/design layout making it more UI/UX friendly. This code can also be added to Github as a project if you wish - providing real-life examples and projects for potential employers. I personally love this option, as it allows me to update accordingly if part of the email isn't displayed properly on either device. UI/UX (User interface & User experience) can also be viewed and checked by clicking the computer screen icon or the mobile icon to display what the email will look like on both screens, you can even view the HTML for the code you have created. MJML can be installed via an extension to a code editor (VS code, for example) or you can use the live editor to make changes, which will update in real-time, allowing you to view and correct errors instantly. See below snippet of an email template that I have created, this is a mock shopping invoice. You may be familiar with these type of emails, for example, if a user is on a mailing list, they may receive a generic subscription email, or it could even be a shopping invoice, MJML was designed with reponsiveness in mind. and yes, it may not be one that is used or talked about frequently, but it is a little hidden gem that produces email templates and takes away the pain of coding a responsive email. MJML is otherwise known as Mailjet Markup Language An email responsive language I hadn't heard of up until recently. I have provided some links for you to view more about MJML and check it out for yourself. This article is short, sweet and is just an overview of some of the basics I have learned about this language.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |