Click to Sign Up for a 7 Day Free Trial!

Email Marketing

Our Gift to You: A Free Fluid Hybrid Email Template

Email On Acid

Happy holidays (yes, we know, it’s a bit on the early side, but we couldn’t wait)! As we head into 2016, we’re ready to bid adieu to media query-based design and offer a warm welcome to fluid hybrid design.

So what does this mean for email geeks everywhere? It means that we can FINALLY build email templates that are responsive, even in clients and devices with awful support for modern CSS. No more pinching and zooming with emails in the Gmail App or having a movie star meltdown when a new device comes out and messes up all your breakpoints!

To make sure you’re ready to take on the ever-changing landscape of email, we’ve coded a beautiful fluid hybrid template that will look great in the most popular devices and email clients.

If you already have an account with us or are an Email on Acid community member, you already have access to this template in our resources section! Simply log in and navigate to the resource center in the left navigation bar.



Your fluid hybrid template includes:

  • Preheader text area
  • 5 different content blocks
  • Fluid hybrid design that adapts to any screen (even Gmail app!)
  • Bulletproof CTA’s
  • Footer with social links

Need some insight into why fluid hybrid design? Check out our blog post breaking down this “spongy” design technique!

Always walk before you run…

If fluid hybrid design is new to you—and even if it isn’t—make sure to continue to test as you tinker with and customize your new template.

Email on Acid even offers a free 7 day trial, which includes unlimited email testing in the most popular inboxes so you can thoroughly test as you integrate this new approach into your emailing efforts.


About the Author

Mallory Mongeon

Mallory Mongeon

Mallory hails from Minnesota and earned her bachelor's degree in corporate communications from Elon University. The voice behind our email campaigns and social media channels, Mallory uses her background in research- and metrics-driven marketing strategies to inform her blogs on the non-technical aspects of email marketing.

Join the Discussion

Colspans and rowspans! Ouch raspberry Thank you for the freebie though!
ejoffe
Thanks smile
Such a nice email template. Supports almost all major email clients, even gmail app for android

Thanks again
Sajal Sarkar
Hey Mallory,

thank you and EmailonAcid on these amazing email templates. I have one small question. I tried to setup Hero BG Images that also works in Outlook. I have tried, but it doesn't work in Outlook 2007, 2010 and 2013. Do you have any idea to share with me how/where I need to implement the bg image to be visible in every Outlook.

Thanks a lot & kind regards,
Boris Ivankovic
Boris
Very well architected. I have been experimenting with fluid designs to solve the gmail mobile responsive complications. Thanks for the solution, easy when you know how right..... grin
hotech
Boris,
If you want to include a background image, you'll need to use VML to make it work in Outlook. Check out this post for more on how to do that: https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds

Happy coding!
Geoff Phillips
Hi Mallory,

This is a nice looking template. Thanks.
abusaeed14
Boris,
If you remove the line-height declaration from the <td>, the image will stop being cut-off in Outlook 2007, 2010 and 2013. I ran into the same issue while testing this.
Keith Stoneman
Boris and Keith,
The latest version of the template has this fix included. Thanks for pointing it out!
Geoff Phillips
Great. Thanks everyone. The team really wanted that template.
isocky
Hi guys.

First off, fabulous template and solves that awful Android/Gmail issue.

One question: I use double/larger/size images usually (for retina etc) but with the width="100%" method, Outlook is displaying the full sized image and ignoring the max-width inline-style. Is there a way around this at all, or indeed a better way to display HD images?

Thank you guys!
dwstanhope
Hi dwstan,

did you use an Outlook-ghosttable around your image with a fixed width (in our case 600 pixel wide)?
backclick
Thanks so much for making this template available. I found it easy to adapt and restructure as necessary, and it looks so much better in Android. Really appreciate all the commenting marking out the sections.
Karen
Thanks so much for this template, it has worked awesome for us design-wise.

Unfortunately, I put an email using this template through a spam test using Email on Acid today and for some reason the email is failing the Gmail filter. All of the other ones pass and the spam score is extremely low (1.6) on Spam Assassin.

I ran one of our old non-responsive templates through the same test today and it passed in Gmail and everywhere else, which leads me to think there is something in the hybrid template that is causing it to fail in Gmail.

Has anyone else experienced this? Any input from readers or the EOA team is welcome, thanks!
hatchearlylearning
Hello Mallory. Thank you for the valuable input. At 77 years old I need someone to help me start the first email, test it etc. Can you help, or
Recommend someone that can walk me through one....
Margie levy
Hey Margie,

I hope you are well. As a beginner, I would recommend you get in touch with an email developer to take you through the ropes. We actually have a list of some great email folks that would be more than happy to help you out. Check out our resource page for more information: https://www.emailonacid.com/blog/article/email-marketing/email_on_acids_resource_page
Mallory Mongeon
Hello,

Thank you for this very useful template.

I am having the same issue that dwstanhope describes above. My client likes to use retina (double size) images, that when viewed in Outlook appear at full pixel-width in fluid hybrid emails.

I've tried placing a fixed-width ghost table around the image and the problem remains.

At the moment I'm having to abandon my lovely retina-optimised images in order to use fluid hybrid coding.

If anyone has a solution, perhaps they would be willing to share it?

Thanks!
Chris Silk
Maybe I'm missing something but when I open this template in a browser then past it from the browser into a new email in Outlook for Mac v15.23 all the columns are stacked on the left side (all photos are on the left with wide text blocks beneath them).
LloydF
LloydF,
Unfortunately, this template doesn't work with Outlook. Outlook will convert all HTML code to use the Word rendering engine, which breaks a lot of fluid techniques. The template is intended to be used in an Email Service Provider platform, like MailChimp or Hubspot. We would love it if Outlook decided to really support HTML email, though!
Geoff Phillips
Love the template. Am using the Sushis alternate version that was bundled with it. However, while it displays beautifully in a browser, it's giving me multiple display issues in Outlook 2013. Is the Sushis template not coded as a fluid hybrid like Coffeeshop? I sent the email through MailChimp to myself so I know it's not a rendering issue on the sending side. Any thoughts / help are appreciated. Thanks!!
jroodman
jroodman,
Yes, the Sushis version is fluid hybrid. It should look very similar to the Coffee Shop version, other than colors and images. Did you try running a copy/paste test with the code?
Geoff Phillips

Leave a Comment