

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. You can accept some degree of degradation on some older clients: you don’t mind if your email won’t look exactly the same (or even plain bad) in old Outlook clients, for example.

Mjml border 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.
