

Because headings and paragraphs use the same tag, I imagine screen readers struggle a bit with the content. I'm also a bit concerned about the accessibility implications. It won't help us at all if we dump a bunch of custom HTML inside an tag! Of course, MJML can only help us if we follow its conventions.

I definitely got more complaints about my hand-crafted HTML emails. Amazingly, I only heard from 2 or 3 people who experienced minor rendering issues. I sent an email generated with MJML to about 30,000 people, asking them to let me know if anything looked busted. Examining the compiled output, it certainly seems to be adding in a ton of stuff, presumably to address various quirks! The core promise of MJML is that it produces responsive, client-friendly HTML.
#FEDERAL MJML HOW TO#
It takes a while to figure out exactly how all of these pieces fit together, and how to combine them for optimal results.įor more information, and to learn about all of the building blocks included, be sure to check out the official MJML documentation. That said, there's definitely a bit of a learning curve. But for most of us, who just want to build a professional responsive email template, I think it's a fabulous tool. It's definitely nowhere near as powerful as modern CSS, and if you have a really ambitious layout, it might not be powerful enough. With these basic building blocks, it's possible to build most typical email layouts. For example, you can add social sharing links with, or expandable text chunks similar to details/summary with.
#FEDERAL MJML FULL#
You're granted the full flexibility of HTML, but without its guardrails, you're no longer guaranteed to have a consistent, universal experience across all email clients.įinally, there are some handy pre-built utilities you can use. MJML won't process anything inside an tag. You can create headings by applying cosmetic styles as inline attributes, like: It doesn't exactly map onto an tag - for example, we can add an href attribute, and it'll wrap that image in an anchor tag, linking to the provided URL.Ĭuriously, all text elements (paragraphs and headings) use the same tag. There are a ton of MJML tags for various things, like, which renders a stretchy responsive image. This is the fundamental thing that makes MJML emails “responsive”. On smaller screens, though, the columns stack vertically. On a large screen, columns will sit side-by-side, as if in a Flex row. Each section is meant to be a distinct visual chunk of the email.Įach section should have one or more columns, using. The MJML language provides a set of common tags you can use to structure your email.Įach email is a collection of sections, using the tag.
