What Do Scalable, Fluid, Responsive and Hybrid Email Design Mean?

When I was first involved in email marketing 10 years ago, there were no smartphones. We “only” had to struggle with Microsoft Outlook, Lotus notes and some local email clients and until we obeyed the standard email width – 600 px – we were ok to go.

I didn’t know too much about how email code works, and how complicated it can be code an email template which would work properly on all email clients back then.

I rather spent my time on the design and marketing side of things and was always looking for ways to create something which stands out from the crowd.

Over the years I had to learn a bunch of things about email coding, and I’ll sum up part of my learnings in this article for you.

If you want to learn more about email design, check out our other articles in our series. All of them are unique and will give you deep understanding on each topic covered.

The goal of this article is to give non-developer email marketers a bit of technical glance into some of the most commonly used email coding approaches.

Comparing Scalable, Fluid, Responsive, and Hybrid Email Design

Mobile opens now account for 56% of opened emails, which places a spotlight on the need to support growing mobile audiences.

Now with designers and marketers looking for more control over their email designs, their focus has shifted towards newer methods of engagement, like responsive and hybrid email design. These techniques make it easy for emails to be viewed on both desktop and mobile devices, without any important content differences, only a change in the layout.

But what is the difference between these two methods? What about simpler and older techniques, such as scalable and fluid email design? In this article, we will discuss the characteristics of each method of email design, provide examples for comparison, and help you decide which method is the best option for you.

Scalable Email Designs

Scalable email design is readable and clickable regardless of the size of the device that it’s read on. This makes it fairly easy to implement a scalable design due to its’ simple layout, and it can be viewed on desktop and mobile devices interchangeably.

There are a few simple components that make up a scalable design and they include a simple layout that is often a single column scalable for all sizes, large ‘attention grabbing’ text, important information on the left side of the email, and large clickable call-to-action buttons.

These components allow for a consistent display on desktop and mobile devices. Also, since the size of displays can vary among different devices, it is recommended to place the most vital information of your campaign on the left side of your email where it will be the most visible. This way, in the event that the entire email is not visible to users, they will not miss any of the key information and calls to action if they don’t scroll to read the entire email.

Scalable designs are a good starting point for companies that want to make the transition towards mobile-friendly email design. It allows your emails to be viewed as virtually the same on desktop and mobile devices. However, more advanced solutions are available for those that want greater control over their marketing campaigns.

The image below depicts a simple and scalable email design with a single column layout on the desktop as well as mobile devices. The email design scales to the chosen display screen’s size.

Source: Litmus

Check out the following email from Pinterest that uses a scalable design. The desktop view is on the left side, and the mobile view is on the right side. Notice how there isn’t a very big difference! Both copies use the same scalable design, and only the font size of the footer has changed between the two copies.

Desktop View

Mobile View

Source: Really Good Emails

Fluid Email Designs

Fluid designs make use of percentage based sizing to automatically adjust the width of tables and images to the device’s screen size.

Similar to scalable designs, fluid designs maintain relatively the same layout among different devices. But the difference between them is that fluid designs will fill up space in the email, like fluid, and the resulting email copy will only depend on the size of the user’s chosen device. Fluid email designs are made without the help of media queries.

Typically, fluid email designs are more suited for text heavy emails. Another thing to note for this design is that it is necessary to set the maximum width for emails that use fluid design, otherwise the content will flow to fill up the display on a larger screen.

In the example below, notice how the widescreen display affected the design and the text didn’t wrap around. This is not a very appealing email to send to your audience!

Source: Litmus

In the next example, fluid design is used to allow the content to fill up the empty spaces of the email. This is a nice example that renders well on both desktop and mobile devices.

Source: MailChimp

Responsive Email Designs

Now that we explained scalable and fluid email designs, what about an approach that makes the best of both worlds?

Responsive email designs are all about providing content that is customized for your user’s chosen device. With responsive design, you can send email templates which can change depending on what screen size they are viewed. The changes might be significant or only minor, like hiding some elements of the desktop on mobile or the other way around.

This also means you can provide different calls to action depending on the size of your user’s device screen, truly making this a mobile-friendly design strategy. This is a unique feature of responsive email design because you can tailor your emails with device specific call to action buttons.

As the future continues to introduce new devices and screen sizes, another great feature of using responsive design is that these emails will always render correctly regardless of the device it’s viewed on. This is great news as our favorite devices continue to rapidly change, and even more, devices are being introduced into the market.

Responsive email templates are affordable for everybody especially since there are tons of free resources online. Check out our recent article and download 900+ free responsive email templates.

At Chamaileon.io we believe in responsive email design and have developed our own email generator engine that produces bulletproof responsive email code automatically.

We have built already 200+ responsive email templates with the software, that you’ll be able to use without limitations, and of course, you can build your own templates too.

Join thousands of users below and help us make our software truly the best and most flexible email builder on planet Earth.

How does responsive design work exactly?

Responsive email designs use CSS media queries to produce two different copies that depend on the size of your user’s screen. Media queries will automatically adjust the email copy’s layout, content, and text size to the user’s device screen. Thus, you can make two completely different copies!

For example, a responsive email design on a widescreen display may have a multi-column layout, while the same email will appear with a single column layout on a mobile device.

Depending on the type of device – whether it is viewed on a mobile device or desktop – the displayed content, call-to-action buttons, and colors can also vary.

Even better, responsive designs are rising in popularity and are now supported on nearly all of the major email clients – and this is just a recent change. In September 2016, Google started supporting media queries and thus, responsive email designs.

With this recent update, now 75% of email clients support mobile responsive designs according to Litmus. Now, email marketers have more control than ever over how their messages are displayed on different devices and among email clients!

In the following image, Twitter makes use of responsive design to produce the same email but on two different devices. The desktop version produces a wide email template, while the mobile version is optimized for a smaller screen. Both email copies provide the same content to recipients, but in a different way and both copies are visually appealing!

Source: Litmus

Another cool feature of Twitter’s email design is the differing call to action buttons at the end of both emails. Notice in the image below how the “Try it now” is visible on the desktop version, while “Get the app and try it now” is shown on the copy that is optimized for mobile users. The copy optimized for mobile also makes use of the user’s inclination to download a mobile app, as they are already using their mobile device and they can do so in just a few clicks.

Hybrid Email Design

Hybrid email design is similar to responsive email design, but without the use of media queries. Instead, the hybrid design uses fluid, or percentage based, tables and images and maximum width properties to produce email templates.

A common method of hybrid design is to set a maximum pixel based width (i.e. 600 pixels), in addition to a percentage based width. Thus, hybrid emails will render similarly to different sizes of display screens.

However, max width properties are not supported on Outlook, so hybrid designs are not ideal for all email clients.

The following image shows an email layout that uses a hybrid design to optimize two different copies for desktop users and mobile device users.

Source: Email on Acid

The following email from Indochino makes use of a hybrid design. This is evident because the mobile version of the email stacked the desktop copy into a single column, without the use of any media queries.

Desktop Version

Mobile Version

Source: Really Good Emails

Which technique is the most common for email marketers?

In a 2015 survey, Email on Acid asked 3,500 marketing professionals in the United States about their email design habits. Over half (56.9%) of survey respondents preferred to use responsive templates, while only 7.9% chose a fluid hybrid design. 19.9% use both styles of email design and the remaining 15.2% indicated that they use neither.

Responsive design is clearly the choice of many!

Source: E Marketer

A Responsive Email Design Case Study – PGE:

PGE, a utility company, decided to adopt a responsive email design after noticing that over a third of their clients were opening their emails on mobile devices. In addition, their newsletters were text-heavy with an overabundance of content.

The left hand image below depicts PGE’s text-heavy, scalable email design. On the right, PGE adopted a responsive design and opted for quality over quantity by including more engaging and relevant content.

Source: DEG Digital

By adopting a responsive email design, PGE experienced a 20% increase in click-through-rates (CTR) with their very first responsive email.

After six months, their click-through-rate grew dramatically, by 112%, from 2.92% to 6.21%.

A Quick Summary

The key pros and cons of each style of email design are presented below:

Pros

• Scalable Design
• Easy to implement and code
• Consistent rendering among email clients and different devices
• One single design
• Requires limited knowledge of coding
• Fluid Design
• Uses percentage based sizing so it will always flow to fit the display screen size
• Doesn’t rely on media queries
• Best for text heavy emails
• Responsive Design
• Most control over email design
• True “mobile first” strategy design
• Supported by most email clients, even Gmail!
• Larger call-to-action buttons
• Improved engagement for your users
• Hybrid Design
• Supported by most email clients
• Doesn’t require media queries

Cons

• Scalable Design
• Same simple design for mobile and desktop users
• Mobile version might not be as easy to read
• Fluid Design
• May be difficult to read on wider display screens
• Not ideal for emails with several graphics
• No text wrapping
• Responsive Design
• Requires extensive knowledge of coding
• Requires two designs for desktop and mobile
• Time consuming
• Hybrid Design
• Max width properties aren’t supported on Outlook
• Harder to implement complex layouts
• Time consuming

In Conclusion

Now that we’ve discussed the four main methods for email design, there are clear pros and cons to consider for each. How can you decide which one is right for you, your business, and your audience?

Consider the email habits of your users, how often you send out email newsletters, and your user’s favorite devices to view the content you send them. And while responsive designs are typically complex to create and code, they can be easily produced and customized in Chamaileon.

Chamaileon’s bulletproof email template generator produces easily customizable templates that render well on all email clients including Outlook, Gmail, and all Apple and Android devices too, so you never have to worry about rendering or deliverability issues.

Join thousands of users below and help us shape the product!

Note: since this article was written we came up with a new email coding approach called Drop Calc method to create responsive HTML emails. If you are an email developer, you’ll like this article, I promise.

If you want to be notified about new blog posts automatically via email, just subscribe below in the footer.

Keep up the great work and if you have anything to add, just tell us in a comment!