![]() Option to keep comments in the HTML outputĪvailable values for the validator: 'strict', 'soft', 'skip' You can pass optional options as an object to the mjml2html function: optionĭefault fonts imported in the HTML rendered by HTML Hopefully, it will one day! Gmail clipping adds yet another layer of complexity to something that is already difficult to do.Import mjml2html from 'mjml' /* Compile an mjml string */ const htmlOutput = mjml2html ( ` Hello World! `, options ) /* Print the responsive HTML generated and MJML errors if any */ console. It’s finicky and does not use web standards. Can I effectively communicate my intentions if I use a simpler, more straightforward template or layout?.Am I writing too many blocks of content?. ![]() īased on this, as an editor, it is important to keep a few things in mind: ![]() Note: For the full technical, non-metaphorical explanation, see the appendix. So every time you create a new block of content, you’re really creating a whole iceberg - not just what’s on the surface. And since an email will contain many such icebergs, you can imagine that there’s a lot going on beneath the surface that you can’t see. For each iceberg tip, there’s more iceberg underneath that keeps it afloat. But there’s the rest of the iceberg that’s beneath the surface, which is the HTML that the developers wrote so it will look the way the designers planned. Think of each block of content in your email as an iceberg - the stuff you as an editor get to see and interact with is just the tip that’s above the surface of the water. This is especially important if you write emails using a template-based service like Mailchimp or an in-house one powered by a component library because, as an editor, you might not get to see the code that goes into making your email behind the scenes. ![]() You might wonder, “Why am I still getting clipped?”Īs mentioned at the beginning of this article, the key is to understand how much HTML is needed to produce the content you have. You’ve already cut down on the number of links you have and you don’t actually have that many words. Sometimes, this can be tricky to understand. We can make the design and code as simple and minimal as possible, but at the end of the day, the more content there is in the email, the more you will get clipped. Which looks simple but actually compiles into a very long string of highly nested HTML like: For example, with MJML, you can write: Button However, these markup languages still need to be compiled into plain HTML. Markup languages like MJML make it easy to build emails because they do the hard work of ensuring the email will display as correctly and consistently as possible across all clients. What about markup languages that simplify building HTML emails? Maybe class="footer-container-wrapper" can be class="ft-wrapper" instead? Classes are intended to be used multiple times, so try to avoid having long names. If you have a URL that looks like, it might be worth it to use a URL shortener (like Bitly) to shorten it to something like. Can these URLs and attributes be shorter? What is the bare minimum table you can write to render the design that works across all the email clients that are relevant to you? If your team only cares about Gmail and Apple Mail, which are more forgiving than Outlook, you might not need to have hyper-table-ized HTML. Can I achieve the same result in some other way that uses less markup?įor example, think about whether you really need to nest your code in yet another table (I know, sometimes another table is the only way to go. Rather than the equivalent: font-weight: normal font-size: 17px line-height: 25px font-family: Arial, sans-serif This means pondering questions like: Am I writing too many styles? Can I use shorthand declarations?įor example, you can write: font: normal 17px/25px Arial, sans-serif If clipping is a big deal for your product (it most likely is for many reasons, including sheer market share), then you need to think about whether the HTML and CSS you are writing are worth the bytes they cost.
0 Comments
Leave a Reply. |