Email Development
A Fluid Hybrid Design Primer
Email Development
Fluid hybrid design is on the way to replacing media query-based design as the go-to framework for responsive emails. Also known as “spongy” design, this technique creates emails that look great on almost any device and in almost any email client. No, it doesn’t magically turn your email into gold in Lotus Notes 6.5, but come on, we’re not magical wish-granting genies here.
Fluid design has been around for a while. This technique uses content blocks that have width: 100%, and max-width: 600px; or whatever width the creator desires. In this way, larger screens will show a centered, 600px wide column of content, while tablets and phones will show the content filling the screen. The issue here is that Outlook (various versions) doesn’t support max-width. In Outlook, emails built using this technique will be blown out to the full width of the viewing pane.
To overcome this limitation, “ghost tables” can be used to constrain the email in Outlook. Ghost tables are fixed-width tables built around the fluid tables, but wrapped in MSO conditional tags. The conditional tags make sure that the ghost tables are visible only to Outlook desktop clients. This is the hybrid aspect of this coding technique.
Building on this technique, you can create two or three column layouts that stack naturally on smaller screens. Another ghost table (inside the outer ghost table and fluid container) helps to make sure that the inner fluid tables will work properly in Outlook. This inner ghost table can have two or three TDs, depending on how many columns you want to have in your layout. Want to really get into the code? Check out Creating a Future-Proof Responsive Email Without Media Queries.
This technique offers a number of advantages over responsive designs that depend on media queries. First, the design will be responsive in Gmail and the Gmail app. Because Gmail has such a large market share, this is a huge win. It will also be responsive in all web clients, making for a better viewing experience on laptops and smaller screens.
Fluid hybrid will also let you escape from the pain of “breakpoints.” You don’t need to worry about which screen size is the most popular with your users, or how the new iPhone 14S+ will affect your email development. Fluid designs will always expand to the screen size.
Many media query-based responsive designs use TD-stacking to create the responsive behavior. Essentially, two TDs that had been side by side on desktop will become stacked for mobile displays. The problem with this technique is that it doesn’t work with some versions of Android. The table-stacking method has better support, but comes with its own set of limitations. For example, on smaller screens it can be difficult to have multiple tables with align=left and align=right line up, as each will move to a different side of its container. Similarly, two tables of different height that are side by side will need to be aligned to the top or bottom of the table, not the center. Fluid hybrid can solve all of these problems.
We just came out with a fluid hybrid email template that’s free to download. Come grab it now, and get started coding your own fluid hybrid emails!
If you’d like to access templates like this, as well as white papers, our helpful forum, and tips & tricks for tons of email clients, join our Community today.
If you’d like to get more information on fluid hybrid design, check out these resources:
