
MJML is a project that was created internally by Mailjet, a company specializing in email marketing tools. Let’s look at an overview of both frameworks and compare the best use cases for each before drawing some conclusions. They also handle responsive design very well, albeit differently from one another. They also provide you with an established workflow you can follow, both alone and as a team. The biggest advantages in using either framework is that they have already solved for you most of the quirks of email clients. …then you will likely benefit a lot from using a framework.Ĭurrently, two of the most interesting and popular frameworks available are MJML and Foundation for Emails. You have little or no control on the original design.The job has to be carried out by a team of developers, who might change and/or have a variable degree of proficiency and experience with email implementation.You have to produce a lot of email templates with shared components.However, if any of the following points are valid for you: You prefer to solve your own bugs instead of having to solve possible bugs caused by the tool you are using.
Mjml font awesome code#
You have the kind of approach where you’d like to control everything in the code you produce and don’t like to rely on external tools.You have set up your own tools for managing components (for different newsletters which share some pieces of design), inlining styles (and yes, you should keep inlining your styles if your emails target an international audience), and have some kind of development toolkit in place (be it Gulp, Grunt or something similar) which will automate all of that for you.You have lots of experience, so you already know most of the quirks of email formatting because you’ve met them before.You are working alone, or on a small team.Boilerplates already address many of the quirks of different email clients and platforms. Option 2: Use a Boilerplate TemplateĪnother option is to use one of the various boilerplates available, like Sean Powelll’s, which you can find here. Screenshot of the same email design tested on different devices on Email on Acid. Fonts will render differently, margins will change, and so on. Expect some surprises, though, because often the same design does not look correct even on the same email client, if viewed on different browsers, or different operating systems. Both offer you a complete testing suite and previews of how your email will look like on a huge variety of email clients. After that, I recommend using automated test suites like Litmus or Email on Acid. Campaign Monitor has a great CSS guide you can reference during the build process and is sort of like Can I Use, but for email. Obviously, you need to test your design heavily.


Mjml font awesome how to#
You also have to deal with all sorts of webmail clients which, for security or technical reasons, have made their own opinionated choices about how to display your precious email.įurthermore, now emails are read from different devices, with very different viewports and requirements. You have to be compatible with lots of old email clients, many of which don’t even support the most basic web standards (floats, anyone?). Let’s take a look at a couple of different frameworks that set out to simplify things for us.

Building responsive emails isn’t simple at all, it is like taking a time machine back to 2001 when we were all coding website layouts in tables using Dreamweaver and Fireworks.īut there’s hope! We have tools available that can make building email much easier and more like coding a modern site. Implementing responsive email design can be a bit of a drag.
