Creation of MJML:
MJML is a markup language that was created in the year 2015 by Mail Jet developers team of Passport department. Mailjet team found some disadvantages like user-unfriendly, out-dated fashion with HTML email and also nowadays people use smart phone and they surf anywhere using smartphones and tablets. So in that accord, accessing the email along with code responsive should be made easily and quickly and that is very important too. So, this was the cause for the birth of MJML. MJML gives the solution for conceptualizing the complexity of responsive HTML and generates automatically.
About MJML:
There are companies for web development in Coimbatore who uses MJML technique. The reason for using this to benefit the customers of web development companies in Coimbatore. MJML abstracts the complexity of responsive email. Moreover it is an open-source framework. When getting into detail about the MJML technically, we may know the forth coming facilities. The facilities are MJML normalizes the DOM, conceptualize the animations along with interactions and hacks of lower-level. This focus of abstraction or conceptualization of lower level components is to make is emails more responsive with the help of easy syntax. Using MJML is very easy technically because, the developer need not worry about the nested tables or conditional comments or making email responsive because MJML by default takes care of these activities. MJML is more powerful in such a way that it modernizes the workflow development, flexible enough to work with lower-level components like tables. MJML reduces the coding more than a half of the HTML email.
MJML Approaches:
React is a JavaScript library that was used to build MJML. React was developed by Facebook. MJML uses the influence of React’s components . The names of the React’s component start with mj- for example mj-button, mj-image, mj-text and so on. So the recognition will be easy for the developer. MJML uses mobile – first and hybrid coding approaches.
Mobile-first approach:
Mobile-first approach is a linear approach where the tasks can be arranged in order from top to bottom. Mobile-first approach is focused on content and ultimately focused on the users. In the outlook.com, this approach is used and the mobile version is used in desktops and smart phones as well.
Hybrid approach:
The benefit of this approach is, it resizes or restructures the layout as per the devices screen using fallbacks, conditional comments, nested tables and media queries. The special feature of this approach is, the multicolumn layouts of desktop will be restructured as single column on smart phones.
Components of mjml with examples
Here are few basic sample coding.
Mjml-social:
This example shows how to insert social media in our web page. Google and facebook social media are inserted in this example. The icons can be coloured and link can be given using our usual ‘href’ tag. These facilities are given in
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-social mode="vertical" display="google facebook" google-icon-color="#424242" facebook-icon-color="#424242" facebook-href="My facebook page" google-href="My google+ page" />
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Mjml-invoice:
This example shows how to insert the invoice in our webpage. MJML has a tag named <mj-invoice>. The invoice can be named as using a property ‘intl’. The items of the invoice can be named using the tag <mj-invoice-item>column titles can be given inside this tag as given in the example. <mj-invoice>should be given in <mj-column>
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column width="100%">
<mj-invoice format="0,00.00€" intl="name:Product Name">
<mj-invoice-item name="TV" price="549€" quantity="1" />
<mj-invoice-item name="DVD - Iron Man II" price="22.99€" quantity="2" />
</mj-invoice>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Mjml-table:
mjml-table will display the table which includes the rows and columns along with its heading and data within itself
<mjml><mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-table>
<tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
<th style="padding: 0 15px 0 0;">Year</th>
<th style="padding: 0 15px;">Language</th>
<th style="padding: 0 0 0 15px;">Inspired from</th>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Mjml-location:
mjml-location displays a google map for easy access.
<mjml><mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-location address="37 bis, rue du Sentier 75002 Paris" />
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Mjml-button:
mjml-button is the normal command button to perform any action. Here is an example for a button having a command not to click it.
<mjml><mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-button font-family="Helvetica" background-color="#f45e43" color="white">
Don't click me!
</mj-button>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Mjml-navbar:
mjml-navbar is used to insert a navigation bar with hamburger mode for mobile devices especially
<mjml><mj-body>
<mj-container>
<mj-navbar background-color="#ef6451">
<mj-column width="20%">
<mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
</mj-column>
<mj-column width="80%">
<mj-inline-links base-url="https://mjml.io" hamburger="hamburger" ico-color="#ffffff">
<mj-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-link>
<mj-link href="/try-it-live" color="#ffffff">Try it live</mj-link>
<mj-link href="/templates" color="#ffffff">Templates</mj-link>
<mj-link href="/components" color="#ffffff">Components</mj-link>
</mj-inline-links>
</mj-column>
</mj-navbar>
</mj-container>
</mj-body>
</mjml>
Mjml-hero:
mjml-hero is used to display any content within an image. The height of the image can be adjusted or fixed. The url of the image can be given within the
<mj-body>
<mj-container>
<mj-hero mode="fixed-height" height="469px" background-width="600px" background-height="469px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="100px 0px">
<!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
<mj-hero-content width="100%">
<mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45" line-height="45px" font-weight="900">
GO TO SPACE
</mj-text>
<mj-button href="https://mjml.io/" align="center">
ORDER YOUR TICKET NOW
</mj-button>
</mj-hero-content>
</mj-hero>
</mj-container>
</mj-body>
</mjml>
Thus the combination of these 2 approaches are used in MJML approach. Therefore this makes the work of web development easier than ever before. Thus the team of web development in Coimbatore uses the new technology like MJML to build the website. This is used not only for the benefit of the developers but also the customers. The wealth and the benefits of the new technology are used to build the website for the excellent and efficient usage of the customers and the end users. Consequently, the web development team of Coimbatore uses the new evolving technology, faces and tackles the cons of the same to deliver the pros of the new technology to satisfy the customers and the end users as well.