- beehiiv Blog
- Posts
- Gain More Readers With Responsive Email Design
Gain More Readers With Responsive Email Design
Optimizing Responsive Design for Mobile Devices
Jacob Bear
January 18th, 2025
What happens when your reader can't even read your email? They’re not going to subscribe, click, or buy your product.
If they can’t read your email, they might even unsubscribe.
A bad user experience undermines all the best practices of email marketing and email design. It is the bane of email marketing. This is why responsive email design is so important.
Responsive design is the key to creating emails that your readers can comfortably view on any device. Email marketing best practices must include responsive design, or you’re just wasting resources.
This short guide is all about creating an optimal user experience through mobile optimization and responsive email design.
Table of Contents
Understanding Responsive Email Design
Let's start with a quick look at what we mean by responsive email design.
What Is Responsive Email Design?
Imagine three people reading the same email, but one of them is using their phone, another is opening up their email on a tablet, and the third is viewing the same email on a PC with a large screen.
They’re each going to have a different experience.
Responsive email design is an approach that keeps your email flexible, so it will look good on different devices and different platforms.
Responsive email design involves coding practices such as media queries that we’ll explain in more detail below.
Why Responsive Design Matters in Email Marketing
According to research compiled by Truelist, the use of mobile devices to read email has been increasing steadily since at least 2018, when 43% of emails were opened on mobile devices. This matters because the Truelist research also points out that 7 in 10 users delete emails that don’t load correctly on their phones, while 15% of them will unsubscribe.
If you're not using responsive design and optimizing your emails for mobile, you're losing readers and limiting the upside of all the hard work you put into creating content.
Fortunately, most email platforms automatically handle the coding and programming side of responsive email design.
We're going to show you how to optimize the part of responsive email design that's within your own control.
When you finish reading this guide, you’ll know how to create an amazing user experience that will get your readers opening, viewing, and clicking through your emails.
Key Elements of Responsive Email Design
There's a lot you can do to improve the quality of a responsive email design. it starts with a commitment to making your email look its best on the device that most of your readers are using.
Mobile-First Design Approach
When deciding on layout, images, and other design questions, aim to make your email look as good as possible on a mobile device. This is what the majority of your readers are likely to use.
There’s also an aesthetic reason for a mobile-first approach. A phone has a smaller screen than a PC or a tablet, which creates design and visibility challenges.
If you design your newsletter to look good on a phone, it should look great on a laptop.
We’ve included some best practices in this guide, but the overarching concept is to keep your email readable without the need to squint and to minimize scrolling.
Optimizing Images for Different Devices
As a rule of thumb, your images shouldn’t be wider than 600 pixels (px) on a desktop and 320 px for mobile devices.
However, there’s an important caveat.
According to Litmus, Apple is the most widely used email client. An email client is the service your readers use when they view their email. Apple uses a proprietary Retina™ display technology with higher pixel density.
When you design your most important images, make them twice the size you intend to display them. This creates high-resolution photos that look especially crisp on Apple devices.
Finally, keep in mind that your readers may have trouble deciphering text that is included as part of an image.
If an image contains critical information, such as the date of an event, include this information in the body text of your email as well.
Effective Use of Media Queries
A media query is a design rule that is only implemented if a specific condition is true.
For example, if the reader’s browser screen is less than 600 pixels wide, images should be no more than 320 pixels wide.
As your newsletter appears on different platforms and devices, media queries dictate the size of your images and other elements.
However, media queries don’t work with some email clients. The common workaround for this is to incorporate flexible layouts.
Flexible Layouts and Grids
In order to avoid issues with an email client that ignores media queries, you can design your email to incorporate hybrid or “spongy” design.
In hybrid design, the elements of your email are given a percentage value instead of a fixed number of pixels.
For example, where a media query might state that a column width is 600 pixels, a hybrid design might state that the column width is 80%, 90%, or 100% of the screen width.
To use media queries and hybrid design, your team needs to stay up-to-date on best practices for email design on multiple devices and platforms and write code accordingly.
If you have the skill and desire to write the code yourself, here is a useful guide to responsive design.
However, we recommend that you leave coding to the engineers and invest a few dollars on a platform like beehiiv, which will manage all the tech stuff automatically. Media queries and hybrid design are a part of the coding that is done for you.
As long as you follow our best practices, a good email platform lets you focus on building your business and ignore what’s going on under the hood.
Best Practices for Responsive Email Design
Here are some best practices to optimize your content for mobile viewing.
Simplifying Content for Mobile Viewing
Your email should be easy to read on mobile. With that in mind…
Design your email with a single column, which will ensure that your email will look good with a limited screen width.
Use short paragraphs.
Include a clickable table of contents, so your reader will be able to see what your email contains without the need to scroll.
Prioritizing Readability and Font Sizes
Use a 13-point font for the body text and a 20-point or larger font for the titles. Then, see how it looks on mobile.
Email platforms like beehiiv enable you to “preview” an email and view it under the same parameters as a mobile device.
However, these preview features aren’t always 100% identical to what your readers will actually see in their inbox. It’s better to send a test email and open it on a mobile device.
Once you have a design that looks good on mobile, save it as a template.
Clicking on a line of text can be tricky on a mobile device, where the text is much smaller than the width of your finger. Use a button whenever possible and follow these best practices:
Include a clear Call to Action (CTA) stated in a few words, such as “Get My Deal,” “Sign Me Up,” or “Save 20%.”
Use a button color that contrasts sharply with the background.
Stick to the ideal button width, which is 40 pixels for a mobile device.
Testing Across Multiple Devices and Platforms
It only takes a minute to open an email, and it’s worth taking the time to open it on more than one platform. Test your emails on all of your devices and email clients.
Many email marketers also test their email on a seed list. A seed list is an email list composed of friends, family, colleagues, or employees.
These people open your email and check it on their own devices and platforms, giving you a broad range of feedback.
Common Challenges in Responsive Email Design
Sometimes even best practices and the use of a top-tier email service won't prevent issues from coming up. Here are a few common challenges and tips on how to deal with them.
Handling Complex Layouts
Ideally, your email will have one column, and the images and other design aspects will be optimized for mobile.
However, sometimes you need to convey something visually, or there is a need for more than one column.
We suggest that you host this visual information on a web page and link to it with a button or an icon.
In order to address this problem proactively, beehiiv creates a personal blog for every customer and automatically posts every email on your blog. By default, there is a “View Online” or “Read Online” link to this post.
Dealing With Different Email Clients
As we mentioned already, an email client is the service your reader uses to view your email, such as Gmail or Outlook.
Every email client comes with its own idiosyncrasies. For example, Outlook will sometimes ignore media queries, and Gmail will clip messages that are too long.
You should be able to prevent most of these issues with an email service that uses responsive design and by following the best practices we listed above.
Remember that email clients have an incentive for the email to look right because they want to create a positive user experience.
If you notice a major issue, notify the service, and there's a good chance that their team will work on resolving it.
Ensuring Accessibility and Inclusivity
Most email clients and devices will enable your subscribers to make the text as large as needed or convert it to voice, so they can listen to it. All you need to do is use web safe fonts such as Ariel or Verdana.
You can easily make your email more accessible to people with visual impairments by including alt text for your important images.
Alt text is a short bit of text that describes an image. When viewers are unable to view the image, they will see the alt text instead.
Another accessibility issue that's often overlooked is color blindness. This is more than just an aesthetic concern.
If a person has color blindness, they may have difficulty seeing a button or link. This could cost you a new customer or subscriber.
Depending on the font and background color of your email, the entire message could be unreadable for subscribers with color blindness.
As a rule of thumb, blue is easy for most people to see, and color blindness creates ambiguity around shades of red and green. This may extend to reddish orange or yellowish green for some individuals.
Here are a few best practices to help you design email that’s accessible for readers with color blindness:
Avoid red/green combinations (such as red on a green background or vice-versa).
Consider using a blue border around buttons and CTAs.
Stick to black text on a white background (you can add color in your header, footer, and borders).
beehiiv has put together a complete guide to designing emails that are accessible.
Why Trust Me? All beehiiv writers are carefully vetted for their knowledge and experience. Jacob Bear launched his copywriting career writing a newsletter for a software company in 2009, right when mobile was becoming popular, thanks to the release of the first iPhone the year before. |
Tools and Resources for Responsive Email Design
You don’t have to adopt responsive design from the ground up.
Virtually all of the leading email platforms incorporate responsive design, which makes other factors such as quality, ease of use, and pricing more important.
Email Design Tools and Editors
We recently did a detailed comparison of the top email design tools and editors, and we found that they each have relative advantages based on what you’re trying to accomplish.
Here’s a short rundown:
Active Campaign is best for a large or medium-sized business that needs complex automations, CRM, and multiple channels of communication with customers.
Responsive email design is just a small piece of the comprehensive services that Active Campaign offers its users.
Intuit Mailchimp (formerly Mailchimp) is a good choice for small to medium-sized businesses that do a lot of email marketing and social media marketing.
This email platform enables users to create multiple customer journeys and attribute revenue to these journeys.
beehiiv is best for content creators and businesses that rely on a newsletter to attract and retain clients. The platform was built to simplify the creation, management, and monetization of content.
beehiiv seamlessly incorporates responsive email design and most of the best practices described in this guide.
Testing and Validation Tools
It’s important to know which metrics are most important for your email strategy.
However, optimizing responsive email design for mobile is likely to improve all of your metrics. This increases the importance of testing and validating as many design features as possible.
If there’s a “must have” in the world of email marketing, it’s A/B testing.
Pick a design feature and create two emails that are identical, except for your chosen feature. Divide your email subscriber list in half and send a different version of the email to each half.
If you notice a significant difference in open rates, clicks, or engagement, you can adjust your email design accordingly.
Another way to understand which responsive design features your readers prefer is to simply ask them.
The reader polling feature in beehiiv makes it easy to ask a simple question that users can answer right in the email with a single click.
An Example of Great Responsive Email Design
Marketing Brew is a slightly more focused spinoff of the immensely successful Morning Brew newsletter.
The folks at Marketing Brew made responsive email design a pillar of their newsletter, along with just having amazing content.
This is what their email looks like in Gmail on a desktop:
And here is the same email again on an iPhone:
As you may have noticed, the opening text block is wider in the desktop version.
The text is probably small and hard to read in the first image, which gives you an idea of how bad it would look on a mobile device if Marketing Brew hadn’t incorporated responsive design.
In contrast, the mobile version is narrower but also somehow more readable.
You may have also noticed that there is a section titled, “In today’s edition” with clickable links. The reader can click straight to the content they want, instead of scrolling through a long ribbon of content.
If you’d like to design a similarly responsive email, we’ve got a quick tutorial for you:
beehiiv theme setup: https://youtu.be/bUsQOBrMY8U?si=E38TQIhUSgKwLa_v
The Future of Responsive Email Design
Look back at the tech you were using as a teenager. This should convince you that the device you’re reading this on will seem retro before long.
You can’t predict the future, but you can learn a lot by observing what is happening now.
Emerging Trends and Technologies
One undeniable trend is the growth of wearable devices. Smartwatches like the Apple Watch have been around for years, and it's likely someone will read your email on their watch.
In the future, expect new innovations in glasses, virtual reality devices, and the touch screen instrument panels in a vehicle.
As text-to-voice and artificial intelligence (AI) continue to improve, your readers will have an increasing number of options for consuming your content.
In the near future, someone may listen to your email as they're walking or jogging, view it projected on their sunglasses or a windscreen, or they may literally step into the email in 3D via virtual reality.
How Responsive Design Is Evolving With New Devices
As devices become more diverse (and generally smaller), there will be more choices to make related to responsive email design.
From a content planning standpoint, a few key guidelines are becoming more important:
Be direct. Don’t make readers with wearable devices scroll through a long introduction before you get to the point.
Design your content for fast interactions. The real estate on a smart watch is even more limited than on a phone screen. Readers should be able to find your CTA quickly
Write compelling subject lines and headers. If someone is checking their email on a watch, they’re likely only checking for urgent messages. They’ll delete unwanted emails and read the rest later. Make sure they know yours is a keeper.
Responsive Design and the Future of Content Creation
Staying true to your voice and branding while optimizing your content for responsive design is a challenging puzzle.
Let beehiiv do the heavy lifting for you. Hybrid and responsive design are built into everything you create in beehiiv, with features like a View Online version of every email, so your readers never have to miss out.
beehiiv’s no-code editor lets you customize every aspect of your newsletter from header to footer with just a few clicks.
Even beehiiv’s lowest-tier plans include 3D analytics, A/B testing, and our entire suite of design tools – along with multiple ways you can monetize your newsletter.
Best practices for responsive email design are bound to evolve with new technology, but one thing that won't change is the value you get when you start a beehiiv newsletter.
Reply