As an email designer or email marketer always on the lookout for the biggest win for your email campaigns, you might often wonder: What's the most important thing to do? In a world where mobile opens now account for up to 70% of all email opens, the answer to that question is easy.Making sure your emails are readable on a mobile device is THE most important thing you can do to make your email campaigns as effective as possible.Knowing that mobile optimization is essential is the easy part. But actually implementing mobile emails can be more challenging, especially if you don't know the basics of mobile email design.Though responsive design was technically invented in 2010, and mobile-optimization techniques were in use long before that, we know there are many designers who still struggle with exactly what it means, and which type of optimization to choose. If you're in that boat, read on.We'lltake a look at different approaches to mobile email design and dig deeper into responsive design, probably the most well-known (if not most-used) mobile design systems. What exactly is responsive design, and why is this the preferred mobile design method for so many email designers? Let’s demystify exactly what responsive design is and also clarify what some of the mobilebuzzwords that you hear so often really mean.Here’s what you need to know about responsive email design.
Responsive email design is a set of design and coding techniques that are used to optimize viewing experience on different sized devices.
In other words, a responsive email is one that totally adapts to the screen size of a tablet or smartphone—layout, font size, images, and padding can all change—so that the message is easy to read and looks great.Litmus does a nicejob of showing all the ways in which a responsive email can change between screens in this graphic:
The position and size of everything from navigation to images to fonts can change from device to device when an email is created with responsive design.Here’s a real-life example of a responsive email from Refinery29, viewed on desktop...
...and on mobile:
As you can see, in the mobile version, the email changes significantly:
- The layout goes from two columns to one
- The header design is simplified: the navigation menu is hidden
- The images are sized differently: the Maybelline ad, for instance, is compressed vertically so it takes up less space in mobile
- Some content is hidden: The intro text under “The Worst Skin Mistakes You’re Making” header is gone, as is the green “Skin Sins” tag on the header image, as well as the social sharing buttons
Most of these changes serve to simplify the design so it renders elegantly and cleanly on a smaller screen. Without these responsive changes, the aboveemail—and countless others like it—would be unreadable, or extremely difficult to read. The body text would be too small, multiple columns would look squeezed together, and the complex layout would not render properly.These are just some of the pain points email designers have when designing for mobile screens that responsive design aims to resolve. The top challenges for emails rendering properly on mobile devices include:-Images: Text-based images or images with text overlays on top of backgrounds can be impossible to read on mobile devices if they're not resized properly through responsive design.-Typography: Some fonts won't work on mobile—they can be too hard to read on a small device, or the device won't recognize them ordisplay them properly. That's why the BEE editor uses only email-friendly fonts that we know will render well on both desktop and mobile.-Columns: Many traditional emails are multiple-columns (usually two, but sometimes three). Without responsive design, a two-column email won't work on mobile: the content in each individual column will be shrunken and impossible to read.Do you struggle with any of these when designing emails for mobile? Read on to find outhow responsive design can help.
How responsive email design works
Responsive design is coded using CSS3 (or cascading style sheets). In the CSS for a responsive email or website, there are conditional statements known as media queries that detect the exact screen size of a device. The CSS calls for adjustments to the email design based on the results of those queries. So, the media query could detect if the screen size is only 400px, for example, and then activate the CSS that determines the style of the email design for that size screen (increase font sizes to 20px, add 10px of padding, hide content, etc.).In short, with responsive email design, CSS media queries can totally alter the design of the email for easy viewing on mobile devices. Your readers will have the optimal user experience on all devices, no matter where they are reading your email. And you'll get the benefit of them being able to interact with your email properly, and transact as you want them to.Of course, responsive design isn't perfect. Unless you use an email editor that automatically converts your email to responsive, responsive design means extra time and a learning curve for whoever codes your email templates. Additionally, not every email client can handle media queries, but most,including iPhones and most Androids, do. Campaign Monitor has a useful list of compatibility across clients.The pros of responsive email design definitely outweigh these cons, but we know that designing a responsive email isn't easy, and you may not have access to developers who can walk you through the nitty gritty of CSS. That’s why we made sure all emails designed in our free BEE editor are 100% responsive (you don’t need to worry about a single line of code).
Responsive email design is different from other mobile design approaches.
Responsive design gets talked about a lot because it’s the most robust approach to mobile-optimizing an email. However, depending on factors like audience and resources, other design tactics might be used. Before you make a decision about whether to go responsive, it's important to understand the other mobile design approaches, what they offer as compared to responsive, and the pros and cons of each approach.
Skinny design
Emails with a “skinny” design are built for the narrower width of mobile devices (typically around 500px). So even if viewed on a wide window of a desktop, the width of the email will remain skinny.What happens on mobile: It looks the same as the desktop version. The desktop version looks skinnier than typical desktop emails.The main benefit of skinny design is it's easy, and you only need to design for one single device/look. However, there are some drawbacks to skinny design. There's noguarantee it will look good on allscreen sizes, there are limited design options, little text fluidity, and you can't make table or image width adjustments.Buzzfeed uses skinny design for their array of email products. Take a look at this example from Buzzfeed Parents. This screenshot was taken on a desktop view, but you can see that the width of the email is the same as it would be on a mobile device.
Scalable design
Scalable emails—sometimes called “mobile friendly” emails—have been designed specifically with mobile in mind. Large fonts and images that are easily viewed on small devices are used so the email looks okay on both desktop and mobile devices.What happens on mobile: An email scales down (from, say, 600px for desktop to 400px for mobile) but is otherwise the same.The benefits of scalable design are that you can create a simple, single design, and your emails are easy to code. However, like skinny design, emails are not guaranteed to look good on various screen sizes.Scalability not supported by some Android email apps, and there are limited design options.
Fluid design
Fluid emails are similar to scalable ones, but tables and images within the email resize based on percentage-based sizing.What happens on mobile: All text reflows to always take up 100% width of the window, and table and image widths shrink to fit the width of the window. The general layout, hierarchy, and design elements remain the same.Fluid design is a simple design approach that does requiresome basic coding (not as complex as responsive). However with fluid design, you have limited design options since it's a less versatile approach, and you might be able to buildas creative or flexible emails as you'd like to.Mailchimp offers a nice look at how a sample email resizes with fluid design here.
Adaptive design
Adaptive design is similar to responsive design, but instead of the email design changing based on the exact pixel width of the screen, the code includes breakpoints that determine which static layout is viewed. So, you might design three versions of your email: one to be viewed at 500px for a mobile device, one at 800px for a tablet, and one for 960px for a desktop browser.What happens on mobile: The width of the screen determines which version of the email appears; in theory, readers see an email that’s well-designed to fit the screen.Adaptive is a similarly robust option to responsive design, and requires some one who knows how to code it. As with responsive design, not all email clients can handle media queries, but most can.
How about “mobile-optimized” emails?
Mobile-optimized emails are emails that are designed specifically to look great on mobile through various techniques; there is no standard set of specifications. Design elements of a mobile-optimized email can include a combination of approaches, many of which are best practices for your mobile email design:- Single column layout- Concise, large-sized, easy-to-read content- Minimalistic design (no complex headers, no clutter)- Tap-friendly navigation and bulletproof buttons (with appropriate padding)- Smaller image file sizes (allowing for quicker load times)- High-contrast design for mobile screens set to low brightness- Not solely comprised of images (and all images used have great ALT text)- No need to typeWhen deciding your approach, make sure you know your audience and test how your email looks across devices and email clients.Responsive email design is a powerful technique, which is exactly why we made sure all emails created in BEE are responsive, optimizing how your message looks for your subscribers. Give BEE a try today and let us know what you think!
.jpeg)
.webp)
