Hubspot Design Tools

[Smarr]

Hello! I am reaching out because of an issue we have been having with a few different pieces. We had written our own custom HTML for an email newsletter. I had done some research in putting this into “design tools” and then being able move this into an email template for us to use. That did not work…so what we did instead was started a blank email template. We added an HTML module from the ones you can select from, but when we copy and paste the custom HTML we had written, it looks fine in hubspot and when we send a test email none of the styling / CSS stays with it.  Our end goal is to have the custom written HTML be an email template for our Monthly newsletter. Thanks!

[Anton]

Hi @Smarr, 

first things first.

1. How did you write your template?
   Asking because there can be different reasons why it doesn't work. Could you provide the template? (I'll recommend to remove any personal data like links, names, phone-numbers etc. before you post it here)
2. How/where did you place your styling?
   E-Mails are working completly different than browsers. And every EMail client is different  (GMail is the best ... not). If you want to have a HTML template I always recommend to use something like mjml.io. This thing got it's own syntax, but it's very easy and saves a LOT of time when developing "static" templates. Also: After you've done your layout in mjml you can drop in your hubl modules and use it as you want to 🙂 
3. Which EMail client did you test? 
   As said - every client is different. Outlook Windows App is different than Outlook Online, different than Outlook iOS, different than Outlook 12... Apple mail is - in most cases - the best; GMail is just aweful. You can also take a look at all CSS options and which client will support which here. While speaking of campaign monitor - you can try their email builder, export the template to HTML, upload it to HubSpot and paste the necessary hubls into the template. (Never worked with the tool - but could be something). Also you can try stripo.email. Also a great email builder with a HubSpot integration -> up to you if you want to move the templates by one click or go the manual way by downloading the html, upload to HubSpot ...

Hope this helps. 

best, 

Anton

[Smarr]

Hey Anton thank you for the quick response. When you refer to how did i write the template and want me to post it are you just asking for me to post the HTML? i wrote it in the HTML module in email templates. and my CSS is in a style tag above my HTML in the same editor. I also tested it on gmail.. did not realise they were so different lol. But i did find an error underneath the text editor where i put my html. it said this " These tags are not allowed in this module: "body","html","head"You're using style tags in the body of your email. These aren't supported by most email clients. Try using inline styles instead. " Let me know what you think Anton. i find it hard to believe i would have to style the whole newletter using inline styling but im not sure. Thank you for your time!

[Anton · Accepted solution]

Hey @Smarr, 

yeah - I've asked for the HTML.

Writing a whole layout inside of the HTML module is not a best practise and can lead to problems (most likely like you have one right now).

I'd recommend to:

- create a new file in your design tools

 - select HTML+Hubl(predefined)

and

- select E-Mail (it won't work if you got a free account)

After that write your template in this file. 

Also - here's a good documentation how to write responsive emails

Yeah - body, html and head tags shouldn't be inside a module since the module will be placed in a HTML file which got them already. 

As for the clients. They're completly different. For instance: Outlook works on the Word Engine and most likely you'll need to write specific Outlook code like

<!--[if mso]>
     Outlook content
 <![endif]-->
 <!--[if !mso]> <!---->
     Non-outlook content
 <!-- <![endif]-->

to get your styling right. This makes a lot of fun (not). I hope you get the point how terrible this is.

GMail on the other hand will rewrite every line of your email and reconstruct it in a way which GMail wants it to be. In most cases it will cut a LOT of inline styling and also remove EVERY <style>-tag which is not in the <head>-tag. Furthermore it got a lot of problems with media-queries. So yeah - very developer friendly.

So my recommendation is: use a tool like mjml, stripo, campaign monitor(haven't tried that one) or something similar. They will output a source code/HTML which will work in almost every client just fine. 

best, 

Anton