Understanding Responsive and Hybrid Email Design

SHARE:

BY  JASON RODRIGUEZ As mobile email opens consistently  stay above 50% , it’s increasingly clear that email campaigns need to be desig...

BY 


As mobile email opens consistently stay above 50%, it’s increasingly clear that email campaigns need to be designed with mobile subscribers in mind. Desktop-only email campaigns are quickly being relegated to the dust bin, as subscribers expect better experiences no matter where they are or what device they’re using.

Designers, looking for more control over their email campaigns, are now using two major techniques to ensure their emails look great everywhere: responsive email design and hybrid coding. The way they use those techniques, though, is the source of much confusion in the email world.
Today, we’re going to define and dive into both approaches to see how they can be used to make your campaigns better for your increasingly mobile audience.

RESPONSIVE EMAIL DESIGN

You’ve likely heard the term responsive email design before. While it’s been used a lot in the past few years, there’s some confusion as to what it means. We define responsive email design as:
USING FLUID TABLES, FLUID IMAGES, AND MEDIA QUERIES TO CONTROL THE LAYOUT OF AN EMAIL ACROSS DIFFERENT DEVICE SIZES.
Responsive email design is a direct descendant of responsive web design, first popularized by Boston designer Ethan Marcotte in his fittingly titled book, Responsive Web Design. While the implementation differs between the web and email, the principles are the same.
Responsive emails use fluid tables and images to make content flow across different screen sizes. How? By using CSS media queries to change fixed-width tables and images on desktops into fluid ones for smaller screens.
Let’s look at that in practice.

A STARTING POINT

Let’s say we have a section of an email with an image, headline, and bit of copy. The code looks like this:
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr>
        <td bgcolor="#00a9f7" align="center">
            <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">                
                <tr>
                    <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">
                        <!-- IMAGE -->
                        <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block;" border="0" class="responsive-image">
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">
                        <!-- HEADLINE -->
                        <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">
                        <!-- COPY -->
                        <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </td>
                </tr> 
            </table>
        </td>
    </tr>
</table>
You can see that, while we use a 100% wide container table for full-width background colors, the content is wrapped in a table that is 600 pixels wide. Likewise, the image is 600 pixels wide. On desktop, that section of the email looks like this:
hybrid-responsive-1
If we were to view that email on a mobile client, we’d see this:
hybrid-responsive-mobile
The fixed-width table and image are preventing that content from shrinking down to fit on the smaller screen. How can we fix that? How do we make those elements fluid? With a media query in the head of our HTML.

MAKING IT RESPONSIVE

Media queries allow us to specify how things should be styled under certain circumstances. We feed media queries some conditions and some styles and those styles are applied to our email when those conditions are met. In the case of email and mobile, those conditions are the sizes of the screen.
<!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>
The max-width: 600px rule is our screen size. In this case, any screens larger than 600px wide will see the fixed-width version of our email. Screens that are smaller than 600 pixels will force the styles in the media query to be rendered, allowing us to override inline styles in our email and optimize the design for smaller screens.
If you look back at our original table, you’ll see that the table has a class attribute of responsive-table applied. Likewise, the image has a class of responsive-image.
In our media query, we can override those fixed widths by targeting those classes and applying the appropriate styles.
@media screen and (max-width: 600px) {
  .responsive-table {
    display: block;
    width: 100% !important;
  }
   
  .responsive-image {
    height: auto;
    max-width: 100% !important;
  }
}
In email clients that support media queries, our email will be fluid and work well on smaller screens.
hybrid-responsive-mobile-good
This same technique of targeting classes and overriding styles can be used to change the layout of your email, too. In a two- or three-column layout, you can target the columns and make them 100% wide on mobile to create an easy-to-read, single-column layout. Media queries are also useful for adjusting the size of text, links, and buttons on mobile—increasing or decreasing the size of each to aid in readability and usability.

PROS AND CONS

The main advantage of a responsive email is that the designer has a ton of control over the display of content across devices. Media queries are very powerful and, when used well, allow designers to target and adjust the layout and style of content at a very granular level.
The major drawback is that traditional responsive design isn’t supported everywhere. Most notably, Gmail does not fully support styles in the head of an email, rendering (pun intended) responsive techniques useless in Gmail’s various clients. All of that control is thrown out the window in something like Inbox by Gmail, and the results can be disastrous.
Knowing that Gmail creates problems for responsive emails, what can a designer do? Let’s take a look at the hybrid—or spongy—coding approach.

HYBRID/SPONGY CODING

The hybrid coding approach, sometimes called spongy coding, is a direct reaction to clients like Gmail ignoring media queries. Pioneered by MailChimp’s Fabio Carneiro, and popularized by the likes of Mike Ragan and Nicole Merlin, it follows some of the same principles as traditional responsive design but implements them in a unique way.
Hybrid coding still uses fluid tables and images but, in contrast to responsive emails, those tables and images are fluid by default. Instead of using media queries to trigger those fluid states on smaller screens, hybrid coding favors Microsoft conditional comments to restrain fluid tables on larger screens. Sound confusing? It’s not as bad as it seems.
While there are variations to the approach, hybrid emails work on the following principles:
  1. Fluid tables and elements by default
  2. Max-width CSS to constrain widths on desktop
  3. MSO conditional comments to constrain widths in Outlook

THE BASICS

Using the same layout as before, let’s look at the code behind a hybrid table:
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr>
        <td bgcolor="#00a9f7" align="center">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">                
                <tr>
                    <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">
                        <!-- IMAGE -->
                        <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block; width: 100%;" border="0">
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">
                        <!-- HEADLINE -->
                        <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">
                        <!-- COPY -->
                        <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </td>
                </tr> 
            </table>
        </td>
    </tr>
</table>
You can see here that we use an identical structure. The only difference is that, instead of using fixed pixel values for the width of both the table and image, we are using fluid percentage values. This allows the content of the email to flow to fill different screen sizes.
If we were to leave it at this, though, our subscribers would see obnoxiously wide emails on desktop. To prevent that from happening, we can add the CSS max-width property to both the table and image.
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr>
        <td bgcolor="#00a9f7" align="center">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >                
                <tr>
                    <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">
                        <!-- IMAGE -->
                        <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block; width: 100%; max-width: 100%;" border="0">
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">
                        <!-- HEADLINE -->
                        <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">
                        <!-- COPY -->
                        <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </td>
                </tr> 
            </table>
        </td>
    </tr>
</table>
In most cases, this works to keep widths at bay. However, Microsoft Outlook doesn’t currently respect the max-width property. To account for this, it’s necessary to use conditional comments to make hidden, fixed-width ghost tables that only Outlook sees. Those look like this:
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr>
        <td bgcolor="#00a9f7" align="center">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <td align="center" valign="top" width="600">
            <![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >                
                <tr>
                    <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">
                        <!-- IMAGE -->
                        <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block; width: 100%; max-width: 100%;" border="0">
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">
                        <!-- HEADLINE -->
                        <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">
                        <!-- COPY -->
                        <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                    </td>
                </tr> 
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
That bit of code is essentially telling both newer (mso) and older (IE) versions of Outlook to wrap our content in the fixed-width table contained within that comment.
Since all of those elements are fluid by default, our email works very well on nearly every smaller screen. And, since it doesn’t rely on media queries to trigger those responsive styles, it works in problematic clients like Gmail, too.
It should be noted that this is a very basic breakdown of how hybrid coding works. There are a few variations on the principles outlined above which are outside the scope of this article.

PROS & CONS

Hybrid is brilliant when you need to support virtually any email client out there. Since everything happens in the body of the email, Gmail and any future clients that strip or ignore media queries won’t be a problem. Plus, you can always include media queries as an enhancement for clients that support them.
Hybrid gets a bit complicated, though, when you start using it on complex layouts. While there are techniques for dealing with two, three, and four-column layouts, they are harder to implement and more fragile than the corresponding “target-classes-and-override” approach of traditional responsive emails.

WHICH SHOULD YOU USE?

As we’ve seen, both traditional responsive and hybrid email design have pros and cons. When deciding on which one you should use, you should ask yourself these three questions:
  1. Do I need to support Gmail?
  2. How complex is my layout?
  3. How comfortable am I with complex code?
Hybrid coding is relatively new in the email industry. As such, many designers and developers are just now dipping their toes in the hybrid waters. It definitely takes some practice and experimentation to become proficient at developing robust hybrid emails. If you don’t have the knowledge, or time to invest in learning hybrid coding, traditional responsive might be for you. Likewise, if you have a complex design, implementing it in fluid, Outlook conditional-wrapped tables might be out of the question.
If, after reviewing where your subscribers open, you need to support clients like the Gmail app or Inbox—or want to make your campaigns ready for future email client updates—then hybrid coding is likely the best approach to use. While complex layouts can get confusing, and fewer designers and developers are familiar with hybrid coding, the time investment in learning and testing the approach will pay off in the long run.

NEED A STARTING POINT?

Short of time or resources to build your own responsive or hybrid templates? The Litmus Community now includes modern, high-quality templates that are free to download and use.
Each template comes with a responsive, hybrid, and mobile-aware version and can be used out-of-the-box in both Campaign Monitor and MailChimp. You can also download the plain HTML or export it directly to Litmus Builder to customize for the ESP of your choice.
Head over to the Litmus Community Templates and sign in to download. Not a Litmus user? Sign up for free to get started.

COMMENTS

Name

ad,8,affiliate,15,analytic,1,audience,5,automation,33,blog,18,brand,11,business,36,call to action,1,campaign,30,content,93,conversion,16,CTA,8,customers,14,deliverability,9,digital,30,email,557,entrepreneur,10,facebook,17,gmail,6,google,11,google analytics,1,graphic,1,headline,4,home,10,instagram,6,internet,14,IoT,1,landing page,19,lead,20,list,47,marketer,27,marketing,294,mindset,40,mobile,4,niche,5,online,36,opt-in,14,pinterest,2,ROI,1,segmentation,10,SEO,8,snapchat,1,social media,102,spam,13,stat,7,strategy,10,subject line,38,subscriber,30,success,15,test,13,traffic,20,trend,12,twitter,9,TYP,3,video,10,webinar,1,website,8,youtube,3,
ltr
item
#DIGITAL: Understanding Responsive and Hybrid Email Design
Understanding Responsive and Hybrid Email Design
https://1.bp.blogspot.com/-LX4C74fIcjo/WJdSMdJCffI/AAAAAAAAB9I/HCX2Fxh4NJ4N9vqJZLU2RvtZko_aOhZDQCLcB/s320/featured-image-hybrid-vs.-responsive-design-690x362.png
https://1.bp.blogspot.com/-LX4C74fIcjo/WJdSMdJCffI/AAAAAAAAB9I/HCX2Fxh4NJ4N9vqJZLU2RvtZko_aOhZDQCLcB/s72-c/featured-image-hybrid-vs.-responsive-design-690x362.png
#DIGITAL
http://www.infinclick.com/2017/02/understanding-responsive-and-hybrid.html
http://www.infinclick.com/
http://www.infinclick.com/
http://www.infinclick.com/2017/02/understanding-responsive-and-hybrid.html
true
7265473034940166968
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy