The Non-Coder’s Introduction to Mobile-First, Responsive Email Design

AB TastyBlogMobileThe Non-Coder’s Introduction to Mobile-First, Responsive Email Design

This is a guest post by Julian Canlas.  Julian is Mailjet’s UK Marketing Assistant. He writes about startups, emails, design and tech innovation. Watch him wax lyrical tweets at @jic94.

Hi {{First Name}},

We know, coding isn’t your ‘thing’. You’re a great marketer with an even greater eye for design and content. You can create a banging newsletter that follows the cardinal rules of email campaign design. And there’s no denying that you have the click-through rate data to back your skills up.

But wouldn’t it be nice to know what your email developer has to go through to render your creations into working emails? Or to check if and how that amazing drag-and-drop editor you’re using creates emails that can be read on desktop or mobile?

Yes, {{First Name}}, here’s a gift for you: a guide on responsive email design you can easily plough through. Responsive emailing is not just some buzzword after all, but an email design approach. And learning this could benefit you greatly, even as a non-coder. We’ll walk you through the basic terminologies and aspects of responsive design, so that you can have better appreciation for the craft.

What is responsive email design?

First coined by web developer Ethan Marcotte in Responsive Web Design, emails with responsive design automatically adapt their layout to the user device. Click on this email template we’ve recently made.

responsive emailNow try changing your window size. What starts off as a two-column layout automatically changes into one column when you contract your browser width to the point that the screen size won’t be able to adequately show a two-column layout. Responsive emails can render into different layouts depending on the user’s device.

Of course, if you’re already reading this in mobile, it’d be in a one-column layout.

Cool, right?

One thing to remember, though, is that this shift is what defines emails as responsive or not. Scalable email design is another type that gets often confused with responsive email design. But there’s a fundamental difference – scalable design depends on a single column design, which is perfect for blog newsletter emails, like our weekly ones.


responsive newsletter

This newsletter retains its one-column layout in all devices, automatically adapting to the size and ratio of the screen.

Why adopt a responsive email design?

top email clients
Source: Litmus

You can see that mobile-based email apps are clearly dominating the email client market share, with the iPhone leading the pack.

As more people open emails through their phones, tech-savvy brands are having to adopt a more mobile-first approach to their emails. According to Litmus, the responsive approach has unsurprisingly led to a 15% increase in click-through rates and a 30% increase in clicks on the first link. 80% of users also delete emails that look bad on mobile.

Simply put, responsive email design is here to stay, because it takes advantage of various devices’ to provide an optimal display-based layout.

The mobile-first strategy

As you might have already noticed, with responsive email design, there is a certain emphasis on mobile friendliness. Well, responsive email design is a type of mobile-first strategy, which means designing an email first for mobile before desktop. Now, mobile includes many portable devices, including smartphones, tablets, and phablets (what an ugly portmanteau).

responsive email designClearly, there’s a direct link between the increase in use of mobile email client apps and the increasing market share of mobile against desktop. As the paradigm shifts towards mobile, with its growing functionalities, having a mobile-first email marketing strategy allows for an optimal experience for email users across different clients and devices. Efficiently reaching the widest range of relevant users is the goal of great marketing, after all.

How responsive emails work

Responsive design uses media queries to detect and adapt emails to the user’s device and email client. They are part of the CSS language, which is used to style websites and email campaigns. At the same time, width resizing in responsive design uses percentages to scale the email layout to the user device. Meta tags allow these emails to effectively scale for mobile devices and certain email apps.

Yes, all of this is probably garble-bobble to you, {{First Name}}, but by now we hope you realise the obstacles your email developer has to go through to make your emails work. There are so many email clients out there (over 50!), so optimising for each one can be quite a daunting task.

Choosing the right drag-and-drop editor

But even if you do not know how to code, you can already choose a visual email builder that can create responsive emails. At Mailjet, we are committed to design that works for all sorts of email clients and mobile devices. Our builder creates responsive emails without needing to code.

We have also made the process of creating responsive email campaigns much more efficient and streamlined by allowing users to collaborate on the same email campaigns, in real-time, and enabling batch updates for email campaign templates. For example, if you have updated your company logo, then with our builder you can propagate this change across different template campaigns, all while retaining responsive design.

To really hone in on this point, if you do know how to code we have developed an open-source templating language for responsive emails, MJML. This allows you to speed up the process of coding HTML by up to 10x.


{{First Name}}, we hope that this introduction was of some value to you. We also hope that you have realized by now that responsive email design is not just some buzzword but an actual strategy done to ensure that your emails look well on all devices.

While you still probably haven’t learned how to code responsive emails in between the time that you have read this, you can already make sure that the emails you’re sending are responsive. One pair of eyes is also not enough to make sure your emails are as fully optimised as they can be. Make sure that you collaborate with others to ensure that your emails are not only (possibly) responsive, but not spammy. Of course, the ESP you’re sending your emails with also matters – a lot.

Do you think responsive emails are the way forward? Tweet us @mailjet.

Share on Linkedin
Share on Facebook
Share on Twitter

You might also like...

Enable your product team to put users in the center of product strategy, while enabling engineering to deploy code faster.
Trusted by
Request a demo
Don't throw away hard-earned traffic.
Make your website work overtime - so you don't have to.
click-through rate
conversion rate
average order value
Trusted by
Request a demo