CMS Development

ckieran
Member

Help! HUBL + HTML Email responsiveness without using CSS Flex or Grid

I have a HUBL + HTML template being used in an Email and unfortunately using the drag and drop editor is not an option for the work I have been assigned.

 

How are you all making your custom emails responsive for email clients like Gmail, if Flexbox and Grid are not supported by those clients?

I asked HubSpot via chat and they keep trying to get me to purchase templates which is not something I'm able to do.

 

Any help is appreciated, thank you!

0 Upvotes
1 Reply 1
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Help! HUBL + HTML Email responsiveness without using CSS Flex or Grid

@ckieran 

 

In short - you either need to write CSS (that gets inlined) to make the them responsive, or use a combination of custom CSS and an email building framework such as Zurbs "Foundation for Emails" (used to be Ink) or MJML.

 

Both of the above tools allow you to write shorthand HTML that gets transpiled into the nested tables required to tackle responsive emails from scratch.

 

You'll need a little knowledge of the command line for both the tools above - if thats not something you're comfortable or able to do - you can still just do it the old fashioned way and write CSS to inline in your template file using the method below:

<style type="text/css" data-hse-inline-css="true">
/* All Breakpoints */

/* Mobile */
@media screen and ( max-width: 650px ) {
/* These rules will be applied only for mobile devices. You'll probably need to use a bunch of !important tags because of specificity - which is fine because these rules all get inlined as style="" attributes. */
}
</style>

Email development is admittedly a giant pain in the butt and you'll likely come across weird issues for specific things on more complex layouts that will drive you nuts - especially on Outlook.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com