Mjml media query pro#
If you want to go pro (have a lot of emails to build and test), you might want to consider using Litmus, an email testing service. Last tip might seem obvious, but even so: make sure to view your email using real email clients when testing, because you can be surprised how many edge cases and quirks exist. Mobile email clients are often better at this compared to email clients aimed at desktop usage, so it might be useful to think in terms of (max-width). Remember that a lot of the email clients can’t handle media queries. This becomes problematic because: to get the same color on all links across multiple email clients, you will need to make sure there is both an !important rule and a normal rule inlined for the link color. When using the Foundation online inliner, multiple styles declaring the same property will be removed. In some email clients, styling can get lost or weird unless some of these tags are changed to tags instead. When Inky is translated to HTML, it often makes use of tags. No shame in copy pasting! Just remember to add your un-minified styles within style tags in the head of the document. Sometimes they come with a lot of dependencies, sometimes just a few.īut if you like me want to make the minimal possible effort, you can also use the the Foundation online inliner. There are both packages catering specifically for MJML as well as Inky and stand-alone ones. There are many ways of inlining css, for example using different types of npm packages. Even better! Inky with Gulpīecause some email clients remove css style tags or style links, all css styles have to be inlined in the HTML document. When you open your file in a browser, all of the Inky markup has been translated into normal HTML. Inky with inky-jsĪnother way to translate your Inky markup to HTML without using the big pink button over at Codepen, is to add this little script at the bottom of your Inky template. It seems to have been fixed since then, yay ?. Sadly, the day I wanted to do this, Codepen was having some bug issues, and the Inky to HTML translation never showed up. When you’re happy with your email you just click the big pink button at the bottom to open a new webpage where you can copy your email translated to plain HTML.
Mjml media query code#
You can fork the pen and rewrite the code to suit your needs. On Codepen, there is a starting Inky email template using Inky for laying out the content. Of course, if you are going to create a large amount of different emails, a more automated workflow would save you time. Since I just had one email and wanted to get it out as soon as possible, I chose to use Inky because of the very nifty integration with Codepen. The special templating language markup is then translated into normal HTML, authomagically complete with those pesky nested tables.īoth MJML and Inky offers different ways of installing and using, for example both have Gulp integration or can be used directly from the command line.Įven if the setup and installation seemed pretty straight forward with both tools, I’ve come to never underestimate the time it might take to get front-end tooling running as intended. The big deal with both of these languages is that they offer ways of avoiding having to write nested tables by introducing special markup for creating layout organised in more user-friendly rows and columns. The most popular email templating languages seemed to be MJML and Inky. My goal was to find a reasonably quick and easy workflow for creating a responsive HTML email that looked good across different email clients. But even if the code for creating so-called bullet-proof emails still lacks a lot of the features we take for granted when creating websites, writing it doesn’t have to be just as bad as I imagined. When I realized my business needed a new newsletter template, I did not exactly look forward to deep diving down a vortex of nested tables.
By Frida Nyvall Email coding has generally had a bad reputation, known for being stuck in old-fashioned coding patterns and practices:
0 kommentar(er)
