{"id":5796,"date":"2023-10-11T13:41:49","date_gmt":"2023-10-11T17:41:49","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/understanding-responsive-and-hybrid-email-design\/"},"modified":"2025-01-24T09:56:42","modified_gmt":"2025-01-24T14:56:42","slug":"understanding-responsive-and-hybrid-email-design","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/understanding-responsive-and-hybrid-email-design","title":{"rendered":"Understanding Responsive and Hybrid Email Design"},"content":{"rendered":"

Now that <\/span>Apple\u2019s Mail Privacy Protection dominates reading environments<\/span><\/a>, email designs must accommodate several scenarios\u2014including webmail, desktop, and mobile\u2013often without a lot of visibility. When you don\u2019t have insight into where your audience is opening, using a hybrid\/responsive design is a must. It\u2019s a great way to guarantee a good experience for your subscribers everywhere, no matter where or how subscribers interact with your emails. Responsive or hybrid <\/span>email design<\/span><\/a> makes all the difference!<\/span><\/p>\n

But what\u2019s the difference between hybrid and responsive email design, why are the methods important, and which should you choose? Read on to understand which design strategy is best for your campaigns. <\/span><\/p>\n

What is hybrid email design?<\/h2>\n

Hybrid email designs adapt to device sizes without <\/span>using media queries<\/span><\/a> and breakpoints, which apply styles based on conditions like screen width. Since some email clients <\/span>strip or ignore media queries, <\/span>hybrid design helps you create a mobile-friendly experience across more environments. You can always include media queries as an enhancement for clients that support them.<\/span><\/p>\n

Hybrid email gets 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 \u201ctarget-classes-and-override\u201d approach of traditional responsive emails.<\/span><\/p>\n

What is responsive email design?<\/h2>\n

Responsive email design adjusts its size across different devices to maintain style and usability, which means subscribers have a great experience on any device or email client. <\/span><\/p>\n

Responsive email design uses media queries to change fixed-width tables and images on desktops into fluid ones for smaller screens. What does this mean for subscribers? Email marketing campaigns that use responsive design look great and maintain usability across devices.<\/span><\/p>\n\"example\n

How to design a hybrid email<\/span><\/h2>\n

Since some email clients ignore media queries, but plenty of your subscribers use those services, email designers can use a hybrid or \u2018spongy\u2019 email design. <\/span><\/p>\n

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.<\/span><\/p>\n

The hybrid coding approach, sometimes called spongy coding, was pioneered by MailChimp\u2019s <\/span>Fabio Carneiro<\/span><\/a> and popularized by <\/span>Mike Ragan<\/span><\/a> and <\/span>Nicole Merlin<\/span><\/a>.<\/span><\/p>\n

While there are variations to the approach, hybrid emails work on the following principles:<\/span><\/p>\n

    \n
  1. Fluid tables and elements by default<\/span><\/li>\n
  2. Max-width CSS to constrain widths on desktop<\/span><\/li>\n
  3. MSO conditional comments to constrain widths in Outlook<\/span><\/li>\n<\/ol>\n

    Let\u2019s look at the very basic steps to design a hybrid email.<\/span><\/p>\n

    Step 1: Create a hybrid table with <\/span>fluid percentage values<\/span><\/h3>\n

    A hybrid email design starts with a hybrid table. It differs from responsive code with media queries, though, because instead of using fixed pixel values for the width of both the table and image, we are using fluid percentage values. This method allows the content of the email to flow to fill different screen sizes.<\/span><\/p>\n\n\n

    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"> \n    <tr>\n        <td align=\"center\" style=\"background-color: #00a9f7;\">\n            <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">                \n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 40px 0px \">\n                        <!-- IMAGE -->\n                        <img alt=\"Example\" src=\"http:\/\/placehold.it\/600x300\" width=\"600\" style=\"display: block; width: 100%;\" border=\"0\">\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 20px 10px;\">\n                        <!-- HEADLINE -->\n                        <p>Announcing Some News<\/p>\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 60px\">\n                        <!-- COPY -->\n                        <p>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>\n                    <\/td>\n                <\/tr> \n            <\/table>\n        <\/td>\n    <\/tr>\n<\/table><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    Step 2: Add a CSS max-width property<\/span><\/h3>\n
    Percentage value width tables are helpful for mobile devices. Still, if we left the table as it is in step one, our subscribers would see obnoxiously wide emails on desktop. We can add the CSS max-width property to the table and image to prevent that.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"> \n    <tr>\n        <td align=\"center\" style=\"background-color: #00a9f7;\">\n            <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >                \n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 40px 0px\">\n                        <!-- IMAGE -->\n                        <img alt=\"Example\" src=\"http:\/\/placehold.it\/600x300\" width=\"600\" style=\"display: block; width: 100%; max-width: 600px;\" border=\"0\">\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 20px 10px;\">\n                        <!-- HEADLINE -->\n                        <p>Announcing Some News<\/p>\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 60px\">\n                        <!-- COPY -->\n                        <p>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>\n                    <\/td>\n                <\/tr> \n            <\/table>\n        <\/td>\n    <\/tr>\n<\/table><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    Step 3: Use conditional comments to account for Microsoft Outlook<\/span><\/h3>\n
    In most cases, adding a CSS max-width property keeps widths at bay. However, Microsoft Outlook isn’t like most cases because it doesn\u2019t currently respect the max-width property. It\u2019s necessary to use conditional comments to make hidden, fixed-width ghost tables that only Outlook sees to account for this.<\/span><\/p>\n
    That bit of code essentially tells Outlook to wrap our content in the fixed-width table contained within that comment.<\/span><\/p>\n
    Since all those elements are fluid by default, our email works well on nearly every smaller screen. And, since it doesn\u2019t rely on media queries to trigger those responsive styles, it works in problematic clients like Gmail, too.\u00a0<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"> \n    <tr>\n        <td align=\"center\" style=\"background-color: #00a9f7;\">\n            <!--[if mso]>\n            <table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">\n            <tr>\n            <td align=\"center\" valign=\"top\" width=\"600\">\n            <![endif]-->\n            <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >                \n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 40px 0px\">\n                        <!-- IMAGE -->\n                        <img alt=\"Example\" src=\"http:\/\/placehold.it\/600x300\" width=\"600\" style=\"display: block; width: 100%; max-width: 600px;\" border=\"0\">\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 20px 10px;\">\n                        <!-- HEADLINE -->\n                        <p>Announcing Some News<\/p>\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 60px\">\n                        <!-- COPY -->\n                        <p>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>\n                    <\/td>\n                <\/tr> \n            <\/table>\n            <!--[if mso]>\n            <\/td>\n            <\/tr>\n            <\/table>\n            <![endif]-->\n        <\/td>\n    <\/tr>\n<\/table><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    What are the pros of sending hybrid emails?<\/span><\/h2>\n
    Yes, creating hybrid emails takes a few extra steps. However, the effort is worth it (and we\u2019ll cover a way to save time further down)! \ud83d\ude00<\/span><\/p>\n
    Cross-client compatibility<\/span><\/h3>\n
    If every one of your subscribers used the same email client and the same device, your email design and testing workflow would be much simpler. However, the reality is more nuanced, and you need to adapt your email design for cross-client compatibility. Hybrid email design gives you the best chance of delivering an excellent subscriber experience across environments.\u00a0<\/span><\/p>\n
    Creative freedom<\/span><\/h3>\n
    You have an email design vision, and hybrid email design ensures email clients won\u2019t put their own spin on it. Setting up conditions in your email design gives you creative control over the look and feel of your campaigns.\u00a0<\/span><\/p>\n
    Dynamic content support<\/span><\/h3>\n
    Dynamic content<\/span><\/a> updates content and imagery for each individual subscriber and is a scalable way to create hyper-personalized experiences\u2014as long as subscribers can see it. Hybrid email design prevents the content from being hard to see or interact with on mobile devices.\u00a0<\/span><\/p>\n
    Improved deliverability<\/span><\/h3>\n
    Engagement metrics like click-through and unsubscribe rates <\/span>impact your deliverability<\/span><\/a>, and an easy-to-use mobile email contributes to the subscriber experience.\u00a0<\/span><\/p>\n
    Future-proofing<\/span><\/h3>\n
    Trying to keep up with the latest phone models and dimensions is a losing game, so you should use hybrid design to fit across devices, instead.\u00a0<\/span><\/p>\n
    Why an Email is Unresponsive<\/span><\/h2>\n
    An unresponsive email is one with a definite width that doesn\u2019t adjust based on device size or one with a multi-column layout that\u2019s too wide for mobile devices. Let\u2019s look at an example of an unresponsive email.<\/span><\/p>\n
    Here\u2019s what the code would look like for a section of an email with an image, headline, and a bit of copy.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"> \n    <tr>\n        <td align=\"center\" style=\"background-color: #00a9f7;\">\n            <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\"> \n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 40px 0px\">\n                        <!-- IMAGE -->\n                        <img alt=\"Example\" src=\"http:\/\/placehold.it\/600x300\" width=\"600\" style=\"display: block;\" border=\"0\">\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 20px\">\n                        <!-- HEADLINE -->\n                        <p>Announcing Some News<\/p>\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 60px\">\n                        <!-- COPY -->\n                        <p>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>\n                    <\/td>\n                <\/tr> \n            <\/table>\n        <\/td>\n    <\/tr>\n<\/table><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    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:<\/span><\/p>\n\"Example\n
    If we were to view that email in Gmail’s mobile client, we\u2019d see this:<\/p>\n\"Unresponsive\n
    And if we viewed it on an iPhone, we’d even start to lose text:<\/p>\n
    \"Unresponsive<\/figure>\n
    The fixed-width table and image prevent 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.<\/span><\/p>\n
    How to design a responsive email<\/span><\/h2>\n
    Responsive email design uses <\/span>CSS media queries to transform<\/span> fixed elements on desktops into fluid ones for smaller screens. You can explore a Litmus Community post about <\/span>coding a responsive email from scratch<\/span><\/a> or watch our <\/span>Responsive Email 101 webinar<\/span><\/a> to get an in-depth look at the code. For now, let\u2019s look at the basic steps to create a responsive email. <\/span><\/p>\n
    Step 1: Set a max-width rule for larger screens<\/span><\/h3>\n
    Media queries allow us to specify how to style elements under certain circumstances. We feed media queries some conditions and styles, which are applied to our email when those conditions are met. In the case of email and mobile, those conditions are the screen sizes.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<head>\n<title><\/title>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n<style type=\"text\/css\">\n\t@media screen and (max-width: 600px) {\n\t\t\n\t}\n<\/style>\n<\/head><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    The <\/span>max-width: 600px<\/b> 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.<\/span><\/p>\n
    Step 2: Create a responsive media query for tables and images<\/span><\/h3>\n
    In our media query, we can override those fixed widths by targeting those classes and applying the appropriate styles.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    @media screen and (max-width: 600px) {\n  .responsive-table {\n    width: 100% !important;\n  }\n   \n  .responsive-image {\n    height: auto;\n    max-width: 100% !important;\n  }\n}<\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    Then add the classes to the table and images that you want to make responsive:<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n
    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"> \n    <tr>\n        <td align=\"center\" style=\"background-color: #00a9f7;\">\n            <table class=\"responsive-table\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\">                \n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 40px 0px \">\n                        <!-- IMAGE -->\n                        <img class=\"responsive-image\" alt=\"Example\" src=\"http:\/\/placehold.it\/600x300\" width=\"600\" style=\"display: block;\" border=\"0\">\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 20px 10px;\">\n                        <!-- HEADLINE -->\n                        <p>Announcing Some News<\/p>\n                    <\/td>\n                <\/tr>\n                <tr>\n                    <td align=\"center\" valign=\"top\" style=\"padding: 0px 10px 60px\">\n                        <!-- COPY -->\n                        <p>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>\n                    <\/td>\n                <\/tr> \n            <\/table>\n        <\/td>\n    <\/tr>\n<\/table><\/pre>\n\n\n\n\n\t
    \n  
    \n  \t
    \n  \t\t
    \n  \t\t\t
    \n  \t\t\t\t
    Our email will be fluid in email clients that support media queries and work well on smaller screens.<\/span><\/p>\n
    \"example<\/figure>\n
     <\/p>\n
    Step 3: Target columns on mobile devices for an easy-to-read email<\/span><\/h3>\n
    You can use this same technique of targeting classes and overriding styles 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.\u00a0<\/span><\/p>\n
    Step 4: Adjust other design elements for usability<\/span><\/h3>\n
    Media queries also let you adjust the size of text (which helps if you have web safe fonts<\/a>), links, and buttons on mobile\u2014increasing or decreasing each size to aid in readability and usability.<\/span><\/p>\n
    What are the pros of sending responsive emails?<\/span><\/h2>\n
    Subscribers should have a consistently positive experience with your emails regardless of their device, and responsive emails help you send beautiful and usable emails. <\/span><\/p>\n
    Mobile optimization<\/span><\/h3>\n
    More than half<\/span><\/a> of all emails are opened on mobile devices, which means optimizing for smaller devices is just as important as desktop.<\/span><\/p>\n
    Enhanced user experience<\/span><\/h3>\n
    There are <\/span>300,000 potential renderings for every email you send\u2014<\/span>we even calculated how many different options for email rendering there really are<\/span><\/a>. Responsive email design gives you a better chance of your email displaying correctly across screen sizes, email service providers, operating systems, email clients, and image settings.\u00a0<\/span><\/p>\n
    Increased click-through rates<\/span><\/h3>\n
    Engagement metrics like click-through rates are arguably <\/span>more important than open rates<\/span><\/a>. Still, subscribers won\u2019t click on elements that don\u2019t display correctly. Responsive emails that are pleasant to interact with have a better chance of engagement.\u00a0<\/span><\/p>\n
    Brand consistency<\/span><\/h3>\n
    Consistent branding helps subscribers recognize and connect with your content, and you need emails to look the same across desktop and mobile.\u00a0<\/span><\/p>\n
    Accessibility compliance<\/span><\/h3>\n
    Content hierarchy and spacing are <\/span>email accessibility best practices<\/span><\/a>, and adjusting content to different screen sizes maintains usability.\u00a0\u00a0<\/span><\/p>\n
    Should you design a hybrid email or a responsive email?\u00a0<\/span><\/h2>\n
    As we\u2019ve 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:<\/span><\/p>\n
      \n
    1. Do I need to support Gmail?<\/span><\/li>\n
    2. How complex is my layout?<\/span><\/li>\n
    3. How comfortable am I with complex code?<\/span><\/li>\n<\/ol>\n
      Here\u2019s how your responses to those questions influence which email design you should use.\u00a0<\/span><\/p>\n
      When to Use Hybrid Email Design<\/span><\/h3>\n
      If, after reviewing <\/span>where your subscribers open<\/span><\/a>, you need to support clients like the Gmail app or Inbox\u2014or want to make your campaigns ready for future email client updates\u2014then hybrid coding is likely the best approach. 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.<\/span><\/p>\n