#Mjml table code#

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.

#Mjml table code#

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.