Today, consumers are using more devices than ever before. Between desktops, laptops, smartphones, tablets, phablets, convertibles, and smartwatches, there’s no shortage of options – and consumers aren’t holding back. The average consumer owns 3.64 internet-connected devices.
This presents some unique challenges to email marketers. How can a marketer create optimized messages when each recipient has three or four different combinations of devices, operating systems, browsers, email clients, and screen sizes?
Traditionally, marketers’ answer was responsive design. Responsive email design does a fairly solid job adapting content for different screens, but it also has some notable weaknesses and drawbacks.
Responsive design became the standard largely due to a lack of viable alternatives. With the relatively recent addition of hybrid email design, this isn’t always the case anymore.
Whether you’re an email coding wizard or code makes your head spin, it’s important to know how to choose the right approach for your email campaigns. We’ll provide some basic explanations of responsive design and hybrid design, along with some tips on when to pick one over the other.
First things first…
Responsive email design is a method for adjusting the size/alignment of images, buttons, and text elements in an email, based on the size of the screen being used to view it. The idea is to make the same email look good on a phone, tablet, computer, and anywhere else a recipient might open it.
Without getting overly technical, a responsive email works through a code technique called a “media query.” Essentially, media queries tell the email to check for a certain screen size and change the styling of the email if the condition is met. This creates “breakpoints” – specific screen sizes where different styling is invoked, and the appearance of the email changes dramatically. In other words, a screen with a width of 501 pixels could see one version of the email and a screen with a width of 499 pixels could see another version.
One strength of responsive design is that it gives the designer a lot of control. In theory, you could create a nearly unlimited number of breakpoints and styles within the same email. One application of this is to create versions of an email specifically for targeted devices, using the exact dimensions of the screen as a breakpoint.
In addition to using breakpoints to create versions of an email, responsive design allows you to use fluid styles to adjust between breakpoints. For example, you could set a picture to be 50% of the width of the email, rather than a static 250 pixels.
On the other hand, the single biggest problem with responsive design is that media queries aren’t supported in every email client. Most notably, Gmail doesn’t support them at all. Without media queries, responsive design loses its ability to do much of anything.
Along the same lines, many of the styling tricks used to manipulate elements in a responsive email have spotty support. In certain versions of both Android and iOS, for example, there are issues lining up stacked elements. These issues don’t necessarily make the email unusable, but they do detract from the design and make it look less reputable to your recipients.
Now that we have an understanding of responsive design, we can take a look at its new rival, hybrid email design.
Hybrid email coding, also called spongy coding, sets out to do essentially the same thing as responsive design. It’s intended to adjust the appearance of an email to fit the screen being used to view it. The difference between the two is that hybrid design also sought to address a couple of key shortcomings of responsive design, most importantly the reliance on media queries.
Like responsive, hybrid design makes use of fluid styles; however, hybrid applies these styles by default, rather than just under certain breakpoints. In other words, hybrid designed elements are always set as a function of the area where the elements are located. To prevent these elements from getting obnoxiously big on desktops and other large screens, the email is constrained to a specific maximum width.
Obviously, a big advantage of hybrid email design is that it doesn’t rely on media queries. That means hybrid design works with a lot more email clients, browsers, and operating systems. That said, you can still incorporate media queries in hybrid design to further style incompatible clients.
Another advantage of hybrid email designs is the lack of breakpoints. Hybrid emails scale smoothly between various screen sizes. This eliminates the chance of an email displaying incorrectly because the screen size that came in just over or under the appropriate breakpoint.
The final advantage of hybrid design is that it offers more precise manipulation of email elements as the screen size scales. Due to the location of the styling in hybrid design, it doesn’t suffer from the same limitations and layout issues as responsive design.
As for drawbacks, most of the issues with hybrid design result from the tediousness of implementation. In order to work as intended, a hybrid email has to be able to limit the maximum width of its elements. The property that it uses to do this isn’t supported in Microsoft Outlook. As a workaround, hybrid emails use invisible “ghost tables” to perform the same function. These tables are coded in such a way as to only exist when the email is viewed in Outlook.
Because each element in a hybrid design needs a fluid style with a constrained width, each requires its own ghost table. This makes an email with anything more than a one or two-column layout very time-consuming. Likewise, designs that are complex or contain a lot of elements will suffer.
Okay, we’ve covered the options, so let’s see how the two are being used. Is there a clear favorite for marketers?
As you can see in the chart below, responsive design is in a strong position. With more than three-quarters of marketers using it and more than half using it exclusively, it’s clearly the standard in email marketing.
One way to interpret these numbers is that responsive design is working well enough for most marketers. Depending on the audience composition, it’s possible that display issues might not be a significant problem.
On the other hand, you could also come to the conclusion that hybrid design simply hasn’t been widely discovered yet. The low adoption rate could represent an opportunity to stand out from the crowd, particularly on platforms that don’t support media queries.
In general, the choice between responsive design and hybrid design comes down to your email, your audience, and your development time frame.
In general, hybrid email design has an edge over responsive design. Hybrid emails are more reliable than their responsive counterparts. They’ll show up correctly across more hardware/software combinations. If a significant portion of your audience is using Gmail, hybrid email design is really the only choice.
That said, responsive design can be a better choice under certain circumstances. If you have a complicated email design or a tight time frame, the straightforward creation of responsive emails might outweigh the potential display issues.
If nothing else, both are worth testing. Hybrid email design could give you a lift in engagement by fixing nagging display issues. If hybrid doesn’t deliver a meaningful improvement, you can continue with responsive design without worrying what could have been.
Let us know what you think:
- Do you use responsive design, hybrid design, or some combination of the two?
- In your experience, how do responsive design and hybrid design compare?
- If you don’t use either, which would you prefer to start with?
