Fluid Hybrid Template

Our Gift to You: A Free Fluid Hybrid Email Template


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.

 

iphone 5s

mobile email inbox

Email on acid coffee shop template

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.

 

 

 

20 thoughts on “Our Gift to You: A Free Fluid Hybrid Email Template”

  1. 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

  2. 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….. 🙂

  3. Boris,
    If you remove the line-height declaration from the

    , the image will stop being cut-off in Outlook 2007, 2010 and 2013. I ran into the same issue while testing this.
  4. 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!

  5. 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.

  6. 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!

  7. 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….

  8. 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!

  9. 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).

  10. 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!

  11. 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!!

  12. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies