Email designers cope with constantly changing standards across web and mobile devices, grappling with different resolutions, screen dimensions, supported fonts, and more.

On top of that, with over half of email campaigns opened on mobile devices and four out of ten emails now opened through mobile applications, it becomes increasingly important to design your messages for an optimal mobile experience. Your emails now need to be as viewable on mobile as they are on legacy platforms such as Gmail. That’s where responsive design comes in.

What is Responsive Design?

In 2010, Ethan Marcotte popularized the concept of responsive web design, or the practice of making web content adaptable and engaging across different devices and screen sizes. This practice arose to better meet consumers’ growing expectations around functional and engaging web experiences.

Responsive web design involves the use of fluid grids, media queries, and flexible images. These elements became common practice for web design, and now these CSS elements are also supported by a variety of email clients.

The principle of responsive design is easily transferable to email design and whether or not designers apply it can greatly affect the success of their email campaigns.

Responsive design is an approach to develop and design for the wide variety of clients you want to send emails to.  A responsive design adapts to users’ behavior, screen size, platform and orientation.

A key objective of responsive email design is to ensure that your emails are rendered correctly across both mobile and desktop.

To do so, designers aim to embed standards-based technologies into their designs.

Why is responsive email design important?

Achieving Maximum Value:

Email is an extremely valuable channel that offers a high potential for profits. Beyond that, with users shifting their attention to mobile experiences, it’s important that your emails render well across both mobile and desktop email clients.

Consider the following statistics:

  • Mobile clients account for 41.6 percent of email opens, according to Litmus
  • Subscribers first open their emails on mobile  25.6 percent of the time
  • Almost 70 percent of subscribers view their promotional messages on a smartphone
  • Email provides an average ROI of $42 for every dollar spent in this channel

Increasing Engagement

A key reason you’ll want to use responsive email design is in to increase your subscribers’ engagement and satisfaction with your email program. With more visually pleasing layouts and image rendering, your subscribers are more likely to open and engage with your content.

Improving UX

Optimizing your user experience across mobile and desktop is critical for your customers. If your email design isn’t adapted well for mobile viewing, your subscribers will likely become frustrated. No one likes to strain their eyes just to decipher your latest bagel promotion. If your buttons are glitchy, your text is unreadable, or your image sizes are out of proportion, users might just unsubscribe from your list. Think about making your message both easy and engaging to view and digest.

Types of Mobile Email Design Approaches

Fluid, Scalable, and Responsive Email Design

What are the options you have when it comes to your email design? The three main email design frameworks you’ll commonly hear about are fluid, scalable, and responsive email design.

Scalable Email Design

Scalable email design — or mobile-friendly, mobile-first, or agnostic design— refers to a design approach that makes emails easily readable and surprise, surprise—scalable!— across mobile and desktop experiences. A scalable design approach is less sophisticated than a fluid or responsive email design approach because it doesn’t require any code.

Typically, scalable designs will use a simple layout with a single column for all text  sizes, clickable CTA buttons, big text, and information on the left side. Scalable designs are simpler to implement than fluid and responsive designs because they don’t require the adjustment of image or table width between devices, a process that relies on CSS media queries.

Nonetheless, scalable designs give users a similar viewing experience across web and mobile devices without putting extra strain on your design and marketing teams.

Fluid Email Design

Similar to scalable designs, fluid email designs maintain a similar layout from one device to the next, but their elements also fluidly shift to fill in the vacant spaces in your emails.  

To achieve this effect, these types of emails use percentage-based sizing  to automatically shift table and image widths to accommodate every device’s screen size. Fluid designs are visually appealing because the content automatically flows to fill empty space in an email. For this reason, fluid email designs work best for emails that include a high volume of text. This approach requires the use of CCS media queries.  

Responsive Email Design

In contrast to fluid and scalable design, responsive design involves a more advanced technical approach. The end result is an email whose elements “magically” shift and may include or omit certain elements based on the device being targeted.

Let’s get into some basic tips for designing a responsive email!

5 Tips for Designing Responsive Emails

1.Evaluate the Performance of your Current Email Design Approach

Before you commit to this design approach, you should benchmark the success of your current email strategy before putting time into implementing responsive design.

What percentage of your subscribers are engaging with your emails on a mobile device? (Note that open rates are no longer an accurate email metric as of iOS15.) How have your email KPI’s changed over time? How is your deliverability?

*You’ll also want to keep in mind that to create responsive emails, you’ll need support from at least one team member who understands how to implement media queries, a concept we’ll get into shortly.

2. Know What You Can Achieve

You have a lot of creative freedom when it comes to deciding how you want your emails to render across devices. You might decide to alter the layout of your desktop email by reducing columns and increasing button sizes on its mobile counterpart. Doing so can make your email more readable and clickable!

Here are some things you can do with responsive design:

  • Modify or hide content
  • Include padding
  • Alter colors and layout
  • Increase font size
  • Change layout
  • Scale graphics

3. Implement Media Queries

Responsive emails leverage media queries to alter emails’ layout, text size, images, buttons, and the inclusion or exclusion of content across devices.

A CSS media query, or @media, is a group of styles that act as conditional rules for how emails render across devices. By embedding media queries in CSS, designers can introduce new layouts for each resolution range, which can change how the layout appears on different devices, for example.

Media queries are almost like magic! They can determine a device's screen size and deploy different sets of rules accordingly. Deploying media queries can be straightforward, or quite complex, depending on the use case.  

@media only screen and (max-width: 620px) {
  .btn-primary {
    width: 100% !important;
  }
}

4. Consider the Email Clients that Support Media Queries

Before implementing responsive email design, you should evaluate the platforms where your audience is opening your brand’s emails. Knowing what email readers your subscribers are using to access your content with will allow you to adapt your design approach accordingly. While many email clients support media queries, others still don’t. That’s why it’s important to stay up-to-date both on what platforms support media queries and understand the distribution of your subscribers across these platforms.

Media queries are triggered by the viewport size of the device in question. Viewport dimensions can vary widely based on screen resolution, device-pixel ratio, and phone screen size.

Here are some examples of some common email clients and applications and whether or not they support media queries.

Mobile Email Clients

Yes:

  • ✅ Android 4.4
  • ✅ Android Gmail app
  • ✅ iOS native
  • ✅ Inbox by Gmail on Android and iOS
  • ✅ Outlook on Android and iOS
  • ✅ Samsung Mail on Android
  • ✅ Yahoo! Mail app on Android and iOS

No:

  • 🚫 Android Gmail app IMAP

Desktop Email Clients

Yes:

  • ✅ Apple Mail 10
  • ✅ Outlook 2000-03
  • ✅ Outlook for Mac
  • ✅ Thunderbird

No:

  • 🚫 Outlook 2007-16
  • 🚫 Windows 10 Mail

Webmail Clients

Yes:

  • ✅ Gmail
  • ✅ GMX.de
  • ✅ Inbox by Gmail
  • ✅ Libero
  • ✅ SFR.fr
  • ✅ Web.de
  • ✅ Yahoo! Mail

No:

  • 🚫 AOL Mail
  • 🚫 G Suite
  • 🚫 Office 365
  • 🚫 Orange.fr
  • 🚫 Outlook.com
  • 🚫 T-online.de

5. Consider your Email Elements

Images

Generally speaking, you may choose for your images to render differently across mobile and desktop clients. For example, you may choose to make your images bigger on your mobile emails.

@media only screen and (max-width: 620px) {
  .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }
}

To optimize for high-resolution screens, make sure you save images at twice the size you hope to display them at. You should also make sure to set image height and width to avoid your images breaking in Outlook. Don’t forget to compress your images to reduce file size.


Layout

For best results, stick to a single-column layout, which is a simpler choice than adding multiple columns. Single column layouts around 600 pixels wide are often most readable for mobile devices. However, if you do choose multiple columns, you might want to try a hybrid design approach. These multi-column layouts are more difficult to implement for Outlook and mobile Gmail apps.

You should also remember to change the target area of your links and buttons in creating a responsive email. Failing to do so can lead to a displeasing user experience, with tiny links everywhere in your email.

@media only screen and (max-width: 620px) {
  .row .col {
    max-width: none !important;
    width: 100% !important;
  }
}

Content

You may also decide to hide certain email content on mobile. In thinking this through, you should evaluate what elements are most important to the message you’re trying to convey and what’s most reflective of your brand. Generally, you’ll want to put your most compelling design elements first.

@media only screen and (max-width: 620px) {
  .desktop-only {
    display: none !important;
  }
}

Curious to understand more about email branding?

Check out the following blog article..

>>Email Branding Tips For a Consistent Customer Experience