![]() Going mobile-first enables you to make sure that the most readable version is displayed by default in email clients that do not change the layout according to the device used.įor example, in, the mobile version will be displayed on both desktop and mobile (which is far more readable than a desktop version being displayed on mobile). MJML will transpile to responsive HTML, following a mix of the mobile-first and hybrid coding approaches. ![]() The component names are semantic, starting with mj-, so that they are straightforward as well as easy to recognize and understand: mj-text, mj-image, mj-button, etc. MJML is built in React, a JavaScript library developed and maintained by Facebook, and it leverages the power of React’s components. It just enables experts to streamline their development workflow, while still giving them the flexibility they need with lower-level components such as tables.įor instance, our example email was coded in 788 lines of HTML and reproduced in fewer than 240 lines of MJML. Example of an MJML component: carouselīeing easy to use doesn’t mean that MJML is not powerful. Responsive emails are no longer only accessible to a handful of experts anymore. Leveraging a semantic syntax and high-level components such as the carousel (yes, you can display an interactive image gallery within an email!), MJML is really easy to learn for anyone. This means you can forget about nested tables and conditional comments and, more generally, about making your email responsive. Just as jQuery normalizes the DOM and abstracts low-level interactions and animations, MJML abstracts the low-level hacks for responsive emails with an easy syntax. MJML is an open-source framework that abstracts away the complexity of responsive email. Abstracting Away The Complexity Of Responsive Email With MJML But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once. You might be familiar with some of them, such as the hybrid approach, the mobile-first approach or even the Fab Four technique by HTeuMeuLeu. Now, there are a few techniques out there to help email developers. On a good note, this is moving in the right direction with the Gmail update. Some email clients will just strip the head of your HTML file, including media queries, which is why inline styles are heavily recommended. Then, while email clients render HTML, many of them have very limited support of it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |