---

What’s your biggest email design and development challenge? When we asked thousands of senders to choose their top three challenges, the task of creating responsive email campaigns was the first thing on the list. A mobile-first email design approach could make things a whole lot easier.

For some email developers, this is a bit of a mind shift. Many of us code for desktop first and then add media queries to adjust for smaller screens. But it may be time for you to flip that approach on its head.

Why responsive email design is important

You don’t have to look far to find email marketing statistics and studies showing the rise in smartphone use for email viewing. At this point, it’s safe to say that at least half of all email opens occur on mobile devices.

“The path to email engagement” from Sinch Mailjet found more than 75% of consumers are using a mobile app from major mailbox providers to access their inboxes. Many recipients will view an email in one environment and then go back to it later using a different device. That’s why you need to deliver an ideal experience no matter where the email is opened.

Even B2B brands with email opens that trend toward desktops and laptops should consider a mobile-first email strategy. Because you never know when your next big prospect is going to open an email on their smartphone.

Why is it challenging to build responsive emails?

We mentioned earlier that Inbox Insights 2023 from Sinch Mailjet found that email senders around the world identified responsive email design as a major challenge. It’s an especially big deal for those who code email campaigns.

While just over 36% of all survey respondents selected Responsive emails as one of their three biggest challenges, more than 42% of email developers selected that option. Find out more in our article on the email developer perspective.

So, what is it that makes responsive email design so challenging and how could a mobile-first approach change things?

For one thing, it’s easy to default to a desktop-first approach to email development. After all, that’s the environment in which we’re writing code. As a result, however, we end up developing emails for larger screens first, and that can make things more difficult in the long run.

For example, taking an email designed for desktop with a three-column layout and re-coding it to look right on various mobile devices is going to require a lot of development work. How should those columns stack? How will images and text need to change? What mobile breakpoints should you consider?

The more code you need to write to adapt for smaller screens, the more opportunities there are for minor mistakes that cause things to break. One missing curly bracket and suddenly the entire email layout is messed up.

On the other hand, when you start with a simple layout for viewing emails on smartphones, and then expand the design for desktop, it’s a different story. If subscribers viewing emails on desktop end up seeing the mobile layout for your email campaign, it will still look fine, and they can still engage.

But you can’t say the same thing about viewing the desktop version of an email on mobile. That’s why mobile-first email coding is a safer bet.

How to switch to mobile-first email coding

Arguably, the most popular way to achieve responsive email design with code is to use media queries.

Now, it’s certainly possible to develop responsive emails without using media queries. Fellow email geek Nicole Merlin has an excellent write-up on her process for coding responsive emails without media queries. However, in this article, we’ll focus on coding with media queries.

At this point, media query support for screen size is well supported across nearly all of the major email clients. That’s what I use for responsive email design. And when you code for mobile first, media queries are fairly foolproof. (Check out CanIEmail.com for the latest.)

The biggest switch for most people will be using min-width media queries instead of max-width. By simply doing that, you’ll be taking a mobile-first approach to email development.

Media queries: max-width vs min-width

When you learned to code responsive emails with media queries, there’s a good chance you were told to use the max-width property, which is essentially a desktop-first mentality. That may have made sense for a lot of senders 10 years ago, but things have changed.

So, what’s the big difference?

Desktop-first = max-width

When you use the max-width property, you are essentially telling email clients that your desktop styles are the default, and you use media queries to adapt for smaller screens. The max-width describes the maximum width before styles stop being applied. So, your styles should be ordered from largest to smallest.

In other words, max-width indicates that: If the screen size is less than or equal to X, then do Y.

Here’s how you might code a basic two-column email for desktop using a max-width media query that would stack the columns for mobile viewing:

<style>
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
    font-size: 16px;
    font-color: #222;
  }
 
  h2 {
    margin: 0;
  }
 
  .column {
    width: 50%;
    display: table-cell;
    padding: .5em;
  }
 
@media screen and (max-width:480px) {
  .column {
    display: block !important;
    width: 100% !important;
  }
 
  .column:last-child {
    margin-top: 2em !important;
  }
}
</style>

View this code on Parcel.

Basically, what we’re saying is that any code nested in the max-width media query should only trigger if the screen size or viewport is less than 480 pixels. When the screen for a mobile device, or a browser window on desktop, is under 480px, the columns will stack.

The class .column sets each div’s display property to table-cell, which allows the columns to function like a table. The media query says to use these styles when the screen size is above 480px. (Note: the parent div's display property needs to be set to table for this to work.)

Then you need to change the display property to block for mobile and set the width property to 100%. You also need to use !important to override the code above the media query.

Mobile-first = min-width

When you use the min-width property, you are telling email clients your mobile styles are the default, and you use media queries to adapt for larger screens. The min-width defines the minimum width before styles start being applied. So, you’d list your styles from smallest to largest (AKA mobile first).

In other words, min-width indicates that: If the screen size is greater than or equal to X, then do Y.

Here’s the same basic code for a two-column email layout. Except, this time we are using a min-width media query and coding for mobile first. It’s still set to 480 pixels, but now it will apply desktop styles when screens are larger than 480 pixels.

<style>
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
    font-size: 16px;
    font-color: #222;
  }
 
  h2 {
    margin: 0;
  }
 
  .column:last-child {
    margin-top: 2em;
  }
 
@media screen and (min-width:480px) {
  .column {
    width: 50%;
    display: table-cell;
    padding: .5em;
  }
  .column:last-child {
    margin-top: 0;
  }
}
</style>

View this code on Parcel.

One thing you may notice with the min-width example is that the code is actually a little cleaner and more concise. You only have to set the .column class in the media query to a width of 50% (instead of 100%) so that two columns display when desktop styles kick in. You don't have to set it as a block element, you just use display: table-cell.

I’m also using a pseudo-class .colum:last-child to add some spacing around the mobile or stacked version of the email, which gets overridden and removed within the media query.

When you take a desktop-first approach, you end up overriding a lot more than that in those media queries. However, if you do mobile-first email coding, most of the mobile styles you set will transfer to desktop.

Plus, if your media queries don’t work, the mobile styles will be displayed by default. Things may look smaller than you intended for desktop screens, but the layout won’t break, and subscribers may not even know the difference.

That means you actually have to change less when you do things mobile first. Plus, your desktop styles end up being much shorter rather than having really long mobile styles that override so much from desktop.

Using min-width is also helpful for those using the Gmail app with non-Google accounts. Those so-called GANGA accounts can have lots of rendering issues in which media queries break.

7 tips for a mobile-first email design system

Before you start coding emails with a mobile-first mindset, you may have to rethink the way your campaigns are designed to begin with. Responsive email design is faster and more efficient when you’ve got a defined system to follow.

If you’re not already using an email design system, this would be the perfect opportunity to start. And if you already have a defined system, you’ll simply need to make some adjustments. Here’s some essential advice...

1. Email design mockups

If you’ve been scaling down emails designed for desktop in an attempt to make them more mobile-friendly, you’ll need to rethink your approach.

It may be easiest to switch everything to one-column email layouts no matter the screen size. Simplicity is definitely important in mobile-first email creation. However, it’s not the only way.

Try rethinking your email templates with the beginning and the end in mind. In other words, how should an email template be displayed on the smallest and largest screens? Instead of thinking about how elements of a desktop layout will stack on mobile, consider how a responsive email could “unstack” or expand on larger screens.

Create mockups for mobile and desktop while keeping breakpoints in mind. The most common mobile breakpoint is 480px, but some smaller iPhones are 320px.

2. Font size

Take a close look at your primary font as well as any others you’re using in your font stack. Make sure the text is readable on handheld devices.

While 16px font is generally considered a best practice for accessibility, I chose to bump up the font size for mobile emails to 18 pixels in our design system. With the fonts our brands use, it felt like 16px was just too small for smartphones, especially with the high-resolution displays on some devices.

Remember that “best practices” aren’t hard rules, and they sometimes need to be adjusted for different situations.

3. White space

Give your mobile-first emails room to breathe. Adequate white space in email design is important for a good mobile experience.

Space between elements makes it easier to consume information and understand the message you’re delivering. Leaving white space around important features like calls-to-action or product images helps draw the viewer’s eyes to that part of the design.

Keep paragraphs nice and short because big blocks of text are harder to read on small screens. If you have text links that are very close together, it can make it challenging for recipients to tap the right thing.

4. Tap targets

Speaking of tapping, that’s one of the biggest differences between the mobile and desktop user experience. Your subscribers are tapping with a finger or thumb – not clicking with a mouse and cursor. No matter how compelling and creative your CTA button may be, if the touch target is tough to tap, your click rate is going to suffer.

The minimum recommended size for accessible tap or touch targets is 44px x 44px. That size is based on the average adult finger pad, which is around 10mm. You may want your buttons to be even larger than that. There are some email developers who recommend using full-width CTA buttons because it makes them easier to tap with a thumb if someone is using one hand to operate their device.

5. Columns

While a single column email design is going to provide the most mobile-friendly layout, there could certainly be situations in which you would use columns without stacking all the contents.

I did this recently for Email on Acid’s newsletter for April Fools’ Day, which mimicked the look of a Myspace page as a fun throwback. For the section of the email displaying the “Top 8” friends, I used a two-column layout on mobile and four columns for desktop viewing.

It wouldn’t have looked quite right if that Top 8 was single profile photos stacked on top of each other. But since these were just small, thumbnail-sized images, two columns worked fine.

You could also do something like this in an ecommerce email featuring a spread of product thumbnails. Or two columns could work as a mobile-friendly photo gallery in an email. What you don’t want to do is put body copy in columns on mobile emails as that would most likely be difficult to read.

For each campaign you create, carefully consider the subscriber experience on different screen sizes.

6. Retina displays

Most computer monitors have high-resolution displays as do Apple devices using Retina display technology. For these screens, you’ll want your images to look nice and sharp.

For that to happen, use images that are twice the size at which you want them to ultimately display on the largest screens. So, in our example from earlier, an image displaying at 600 pixels wide should be 1200 pixels for its actual size.

Doing this provides a greater pixel density, so that the images don’t look blurry on Retina screens.

7. Image file sizes

While you want those images to look crisp, you shouldn't slow down email load times with huge image files. This is especially important for mobile-first email development because you never know when recipients could be somewhere without high-speed internet. Plus, it’s good to be mindful that people may have limited data plans as well.

What you don’t want is to have subscribers staring at a blank screen waiting for the images in your email to load. So be sure to compress images and try to keep their file size to 200kb or less. Using too many animated GIFs in emails can also cause slow load times. Each frame in a GIF is its own image. Try to keep GIFs to less than 1mb.

Test your responsive email designs before sending

There’s only one way to be certain your email campaigns are rendering the way you want on mobile devices – and that’s by testing and previewing them before hitting the send button.

If you’re updating templates to support responsive email design, you can use Sinch Email on Acid to see exactly how they will render on the most popular mobile operating systems and devices. Take advantage of our Email Previews to see how the most important clients handle your code. You can even get previews for dark mode email testing.

Our email quality assurance platform also provides checks for accessibility, deliverability, inbox display, URL validation and more. It’s an ideal tool for optimizing campaigns and simplifying the complexities of email marketing. Every paid plan enjoys unlimited email testing. Take Email on Acid for a test drive with a one-week free trial.