Responsive Email Templates
Proudly made with MJML
Making email templates responsive.
Responsiveness is no longer an option
Today, making responsive email templates is indeed a necessity for both web and email. Failing to integrate responsiveness at the heart of UX will most likely lead to disappointing up to half of your readers. That’s why we decided to build MJML with a hybrid coding and a mobile-first approach in mind.
This approach enables you to create responsive email templates with multiple columns that will appear side-by-side on PCs and tablets. But when your readers open your email on a mobile device, the columns will simply stack so the layout remains just as beautiful and your readers don’t become frustrated.
On top of that, you should also bear in mind that people receive tens, or even hundreds, of emails every day. This mean they’ll be quite judgemental towards your email: 80% of people out there would delete a message that doesn’t look good on their mobile device, hence the importance of using responsive email templates.
However, building a responsive email template can be confusing, if not just tedious. At least, it used to be. Now, with MJML, building responsive email has never been easier. And you know what the best part is? Thanks to its template gallery, you don’t even need to start from scratch!
Responsive email templates for everyone
The gallery provides a variety of responsive email templates that will allow you to efficiently communicate with your users, in multiple scenarios. These templates are guaranteed to be responsive on desktop, tablet and mobile for a variety of email clients. Have a look at the different categories of responsive email templates:
Marketing & Newsletters responsive email templates:
Transactional responsive email templates:
Ready to be customized
These templates are entirely written using MJML and fully responsive. Therefore you can use them as they are or simply customize them to meet your needs. This can be done either by opening them directly in the ‘MJML try it live’ feature or by editing them from your local environment through your favorite code editor.
We have a few tips on how to keep your responsive email template efficient:
1 - Alignment is key
Using MJML will definitely help in keeping your sections and columns aligned. However, as a best practice, avoid putting too many columns (ie, more than 4) in the same row.
2 - Images to text ratio
Adding images and GIFs in your email templates is a great way to break up big blocks of text. However, you should not rely solely on them to support your content. Keep in mind that there are various factors that can cause rendering issues: image size, irrelevant ratio on specific screen sizes or email clients not displaying images by default.
3 - Calls-to-action
If you want to successfully drive your users to your website or product pages, you’ll need to be creative. Your calls-to-action and links need to be easily identifiable by your readers through a clever use of size, position and colors. Again, when designing your calls-to-action, keep in mind that half of your readers will read your email on a mobile device.
4 - Content
Giving readers content that you know they’re interested in is key, but don’t overdo it. You don’t want them to feel overwhelmed by long paragraphs of written text in tiny fonts, especially while reading on mobile devices. Providing a snippet of the text and inviting recipients to read more on your website or blog is a good way to avoid text-heavy messages and also to drive traffic to your website.
5 - Hierarchy and priorities
Finally, you want to make sure your readers get your key message even if they don’t scroll all the way down the email. Try to design your messages in order of importance, with the most relevant elements at the top.
A community effort
MJML was built as an open-source framework from day one to ensure everyone can benefit from it, but also to allow everyone to make it better. We’ve already received many contributions from the community, including templates like Arturia and Proof. A big thank you to them for helping us improve our collection!