Here’s the desktop view:Īnd now, that same email on a mobile device: Yuck! Aren’t you glad you have a tool that will do this for you? But how does it look? You be the judge. When it comes to converting this to HTML, MJML does all the heavy lifting for you to insure your email looks good in all kinds of email clients. For example, we could refactor the above markup using HTML-like classes: Unlike HTML in email, we can even use a class structure for our styling. ![]() As we work in the app, we compose the MJML on the left and view the resulting rendered HTML in real time on the right:Ī closer look at the code on the left and you can see how the top of this email is created: Peruse the docs and you can be composing adaptive/responsive HTML emails in an hour or so. If you are familiar with HTML, it’s not hard at all to learn. With MJML, you compose the email using MJML markup. Let’s take a look at this same email in a mobile device:Įven with a retina screen, users will have to use their fingers to zoom & scroll to read the content. It has a masthead image, different font sizes, font weights, centered text, etc. Let's take a regular old HTML email and look at it in a desktop mail application: Plus, the email renders nicely in both desktop and mobile. This article was originally published on MarkCarlson.io and is republished here with permission from the author.įortunately, there is a tool which makes creating HTML email pretty easy. And of course, JavaScript is out of the question. Some email clients render only a small subset of CSS. Many email clients strip external CSS, leaving only inline styles. Slap a couple classes in your code and you can have a beautiful, or at least beautifully rendered, adaptive/responsive site in nearly every browser. Bootstrap and Foundation spoil front-end developers. A beta should come out soon, but let’s leave that for another post □! If you want to get involved with the development of this feature, you can see what the current implementation is as described here and come discuss about it.Creating HTML emails is hard - much more difficult than creating a web page in HTML. We’re now looking to resolve one of the oldest and toughest issues reported by our users, namely custom attributes. ![]() The full changelog is available here: What’s next ? Thanks to our contributors, there are additional features and fixes worth checking out in this version. It allows you to modify the input string right before it’s parsed. If you’re working with templating language inside MJML in NodeJS, then this pull request added preprocessors to our MJML parser. We hope you will enjoy this new feature and that creating gutter columns in your emails will now be as easy as creating responsive emails with MJML ✨! Templating Pre-processors and i'm so happy with those changes ! I'm in a gutter column. Without further ado ( drumrolls), let me introduce you to the inner- prefix! Now you can just set inner-background-color, inner-border or inner-border-radius to achieve the desire results on columns: I'm in a gutter column. ![]() still following me? No ? Yeah I'm lost too. Even worse, if you wanted to use a CSS border or border-radius,you needed to set it on each mj-column's children.Ī known workaround would be to use a css-class on mj-column, then a mj-style and target inner of mj-column. Previously, to create gutters, each children inside a column needed its own container-background-color to have the desired results. but I need to set background color on each node! Īs you can see, it was not that simple to achieve. but I need to set background color on each node! I'm in a gutter column. Below is an example of how it looked like. In MJML 4, following popular demand, we introduced a new feature enabling the creation of gutters between columns.
0 Comments
Leave a Reply. |