Click to Sign Up for a 7 Day Free Trial!

Email Marketing

Future-Proof, Fluid Hybrid Email Template by Mailsheep

Email On Acid

With 75% of Gmail users accessing their accounts on mobile devices, you’re up a creek without a paddle if you rely on media queries to make your email responsive.

To spread some email love, we teamed up with Mailsheep to bring you a new fluid hybrid template. Now you can give your readers an exquisite experience in all email clients and devices, even the ones without media query support (we’re lookin’ at you, Gmail app).

Since Gmail boasts more than 1 billion users worldwide, this is a huge win. The template is responsive in all web clients, too, providing a better viewing experience on laptops and smaller screens.

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 new template leverages “spongy design” techniques and includes:

  • Hidden preheader text area
  • Hero image background with text area (even works in Outlook!)
  • 8 content blocks
  • Bulletproof buttons
  • Footer with social icons

Fluid hybrid design will let you escape from the pain of "breakpoints," as well. You don't need to worry about which screen size is the most popular with your users, or how the newest iPhone will affect email development. This is the “future-proof” way to code your emails.

New to coding with the fluid hybrid approach?

Whether you’re a pro with this spongy design technique or integrating this approach into your mailing strategy for the first time, it’s critical to thoroughly test your new template after you customize it.

Don’t fool yourself by believing that sending a quick test to your iPhone or Gmail inbox will do the job. An email that looks fabulous in Apple Mail 8 can look hideous in Outlook, since almost every email client displays HTML differently.

Get unlimited email, spam and image testing free for 7 days, and send out your new template with complete confidence.


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

Is there work around/hack for lack of support of background images in gmail app?
awoodford
Having the preheader text set to 1px font-size and calling it hidden... isn't that a bit 'wrong'? Would stuff like this get your mail flagged as spam?

Otherwise great looking template smile
UKcredit
UKcredit,
As far as we know, this doesn't have an effect on deliverability. Let us know if you find otherwise!
Geoff Phillips
@awoodford, read this article, it is the best tutorial, and the Basis for this template:
http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

In short, add the background to the body as an HTML attribute:
<body background="background.png" style="background-color:#ffffff;" >
Jono
The template, as is, adds a sliver of whitespace in front of the first "Guess the Author" button in Outlook 2007-2013. Is there any way to avoid this? It only does it with that first button, and not the second one.
countrycasualteak

Leave a Comment