Responsive emails have been around for a decade.
According to Litmus 2021 Email Client Market Share, more email is read on mobile than on desktop email clients. To be precise, 42% of email is now opened on a mobile device.
About 3 in 5 consumers check their email on mobile devices. 75% of people use their smartphones most often to check email. (Fluent “The Inbox Report, Consumer perceptions of email” – 2018)
These statistics show how important it is to optimize the email experience for mobile users. That’s why creating responsive emails has become a top priority.
Sadly, about 1 in 5 B2B email campaigns was not optimized for mobile devices as revealed by The State of B2B Email Marketing 2020 by SuperOffice.
Not creating mobile responsive emails can ruin the entire experience for your subscribers. So, what’s the big deal with it? How are responsive and non-responsive emails different?
Let’s find out…
What is a responsive email?
A responsive email is one that looks good across all devices like desktops, tablets, and mobile phones. A responsive email lets the users view the template correctly, irrespective of the screen size. It eliminates the need for any unnecessary scrolling or resizing.
A responsive email has an intuitive layout that automatically identifies the screen size and device orientation. It adjusts the design to fit the respective screen.
What are the advantages of designing responsive emails?
Responsive email designs have the following advantages:
1. As most responsive emails do not have any loading issues, they save the recipient’s time.
2. They impart a pleasant subscriber experience as they render well across all devices.
3. Responsive layout entails a single template. So, there is no need to update, save, and store different versions of the email.
4. Responsive email designs get adjusted according to the different screen sizes.
Disadvantages of responsive emails
- Customizing emails for different screens can get cumbersome.
- Certain email clients and devices will not display the visual elements or copy correctly in responsive designs.
- You need to hire expert developers who are well-versed in complex email coding. It can be somewhat heavy on the pocket.
- Sometimes, responsive email designs can take longer to load. It can be annoying for the readers and they might close the email before reading it.
- As some email clients strip the CSS styles and media queries added in responsive email codes, ironically, even responsive emails will not render well.
- You cannot convert every email into a responsive design. So, it needs to be designed accordingly. A grid layout works best for a responsive layout. If you want to create fancy emails with overlapping elements or too many visuals, you might have to do away with responsive designs.
What is a non-responsive email?
Non-responsive email template does not adapt to the size of the device it is accessed on. It renders well on desktops or laptops but is skewed on smaller screens of tablets and mobiles.
Technically, a non-responsive email is hard-coded at definite widths and does not adapt to different screen sizes. Generally, non-responsive emails are designed at 600 to 640 pixels.
However, almost all popular email clients consider responsive designing a best practice. Emails created at a fixed width of 600 to 640 pixels will not render properly or not show the entire email.
Advantages of non-responsive email design
1. You can easily create a non-responsive email with the drag-and-drop feature in the ESP or CRM.
2. If you need to send too lengthy emails, non-responsive designs are the best bet.
3. Rather than splitting the email into different columns to create responsive designs, it is better to have the entire email displayed on a single screen.
4. As non-responsive emails do not need advanced coding skills, they are light on the pocket.
Disadvantages of non-responsive emails
- Non-responsive emails show a broken layout on smaller screens.
- The emails will be inaccessible and difficult to read as the user will have to scroll to read them.
- Non-responsive email designs do not support full-width images.
- The design will have overlapping elements on tablets or mobile devices.
- As they are not optimized for mobile devices, they will impart an unpleasant experience to mobile users.
The Verdict
Responsive Email Designs are the way to go as they help communicate better with your subscribers. They ensure a smooth and delightful experience for the readers, thereby generating a better click-through rate and greater conversions. It will also increase the website traffic and help you get more leads.
How to code responsive emails?
Media queries work as CSS tags that are used to code responsive emails. They define the styling of different elements and how they should change if certain conditions apply. The developers specify some conditions in the media queries. They will be executed once the conditions are met.
They have the innate power to identify the device used to access the email.
For example, they recognize the width and height of the device, its orientation, and pixel density. In addition, they also check the width and height of the space available.
Accordingly, the developer can chalk out the HTML code of the email template.
Take a look at this code, for example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<style type=”text/css”>
@media screen and (max-width: 600px) {
}
</style>
</head>Source: Litmus
Here max-width: 600px rule reflects the screen size. If the screen size is wider than 600px, it will show the email’s fixed-width version. For screens smaller than 600px, the styles in the media query will be rendered. Any inline styles will be reversed to create flawlessly rendering designs for smaller screen sizes.
There are three types of techniques used to create responsive emails.
They are:
- Fully responsive
These email designs adjust the content into a single column, thereby warranting a seamless subscriber experience throughout all devices. They can either stack with the left column on the top or the right column on the top.
The former is known as normal stacking and the latter is reverse stacking
a. Normal stacking
Usually, the content in the left column is stacked on top of the content in the right column.
b. Reverse stacking
Emails with a Z-pattern or three rows can be coded with reverse stacking. It will make all the rows look similar on mobile devices.
- Scalable
Scalable designs resize themselves according to the screen sizes.
- Mobile First
According to this concept, mobile devices are given more significance when designing emails.
Some tips to make email navigation simpler on mobile devices:
1. Hide/Show navigation
Often, it so happens that you have a particular visual or any other text element in the desktop version of the email that adds to the file size and unnecessary scroll on mobile devices. You can choose to hide such elements with the help of hide attribute. The same applies to the show attribute. You can use it to show specific elements in the desktop or mobile email.
2. Dropdown menus
Just like responsive websites, you can have hamburger menus in responsive email designs. It will make the navigation all the more user-friendly for the subscribers.
3. Accordions
Accordions are used to stack up the content and send wordy emails without making the subscribers scroll too much. It helps categorize the content so that the users can read the sections that seem the most interesting to them.
Wrapping Up
While responsive websites were introduced long back, responsive emails are a relatively novel technology. There was a time when only two-column emails could be converted into a responsive layout. However, with coding advancements, responsive emails have seen a revolutionary rise in the adoption rate. Nowadays, we hardly see any non-responsive emails in our inboxes. That’s the bottom line of this debate.