Hubl or drag and drop

[SAU]

What is the difference between using raw HTML code and the Hubl brackets or using the drag and drop method to build templates?

What the drag and drop offeres you does it off the same with the Hubl?

I have just found it easier at this stage to build using raw html and the Hubl brackets because i'll be punching out alot of page templates rather than having to spend the extra time nesting the drag and drop templates as i'll be the only one that will be modifying them?

[Jon_McLaren · Accepted solution]

I'm writing an article about this, so I'm going to basically post a rough draft of it here for you.

------------

The HubSpot CMS has two primary template types. Drag and Drop, and Coded templates.

Each type has sub types for email, subscription, error, password, blog, and page.

Both templates have unique advantages and disadvantages. A HubSpot site and portal can actually use a mixture of both drag n drop and coded templates.

I use both template types a lot. For the majority of client sites I use Drag n Drop, and that has nothing to do with my HTML or CSS skills and everything to do with my clients and pure efficiency.

Drag n Drop templates

These are the templates created with the GUI, dragging and dropping modules and groups. Marketers love the idea of drag n drop templates, and will often tell developers they want them. They're even willing to pay more for them in my experience than coded. The reason being they can go in later and make small changes to the templates without requiring the developer to step in again.

In my experience usually clients rarely ever go in and actually edit the templates but love the fact that if they needed to, it's not all in intimidating code.

One of the perks as a developer using drag and drop templates is consistency. If you build a lot of HubSpot sites you likely start to build kind of your own internal framework you use for building them faster and higher quality. If you use Drag and Drop Templates your code is going to remain pretty consistent because it forces some things on you, such as the header being wrapped in .header-container-wrapper and the footer being wrapped in .footer-container-wrapper. You will find over time you reproduce the same patterns a lot for HubSpot sites. You'll build global groups for the headers and footers. You'll have a copyright text module, you'll have a header menu, you'll have a mobile menu. You'll see the types of templates you build for clients even repeat. Pages with sidebars, pages without sidebars, pages with floating navs, etc.

With Drag n Drop templates it's pretty easy to hand off a project to another developer because they can visually see what's going on 99% of the time and can jump in and make whatever changes they need to. I work with a team of developers and we build and maintain hundreds of HubSpot sites. One of the advantages of using the drag n drop templates for us is we can all easily jump into a project even one from years ago that someone else on the team built and go "I know where this is" "To make this change I just have to edit this and I'm done". No hunting through included .html files. No stumbling upon a developers code where they were trying to be "clever".

We work with marketing agencies and one of the perks of using drag n drop templates is we can teach them how to make certain types of changes themselves. That makes the marketing agencies happier and prevents some of the last minute "hey we need these changes ASAP at 6pm on a Friday night". It also strengthens our bonds with those agencies as they - like the client, like the ability to jump in and make their own changes. Marketing Agencies we've found are way more likely to actually do this than the end clients. We actually do mind this with drag n drop templates for the most part because if we teach them well there's nothing to worry about. If we gave them a coded template and said here go do whatever you want. That would be more problematic. They aren't developers. They may look up some code on the internet that does something like what they want but not actually understand it, paste it in, and then contact us last minute to fix whatever they broke, AND do the thing they were trying to do in the first place. Oh and it has to be done yesterday.

Some minor perks:

• You are also linking assets to the template in a more dynamic way which lets you click right on the css or js file you have linked to go in and edit it.
• Easy to visualize the page right off the bat. Yes you can read a coded template and understand it's structure too. It's hard to argue though that seeing a literal wireframe of the page isn't easy to quickly understand.
• Very easy to set template level defaults for custom modules and their fields.(still possible in coded templates but you need to know the attribute names and know what format the data needs to be in.)
• Global groups - you can't create them in coded templates.
• Global modules - you can't create them in coded templates.
• GUI for HubSpot's base modules - some HubSpot Custom Modules can be hard to know what the fields do, and the explanation HubSpot provides via the GUI helps. An example is the menu module, which has options for depth, flyouts, flow and root type, which can be hard to understand or remember what means what right off the bat, but the GUI explains.
• Drag n Drop templates can be converted to coded templates. The opposite is not possible.
• You can scaffold out the layout of a site in just a few minutes and let marketers start adding content while you're focused on styling the rest. Enabling both teams to be productive during the early phases of the site.

Disadvantages

• HubSpot adds wrapper classes to modules,
• you don't have full control over the code structure. You have to include semantic HTML tags inside your custom modules because HubSpot doesn't use them by default.
• Drag n Drop templates are not accessible via FTP.

Coded Templates

Coded templates are what developers generally want to use: gives you near full control of the template's code. Minus some required header and footer code.

You can do a lot with coded templates, such as using includes, where you can componentize the templates themselves, nesting them as many levels deep as you need, allowing you to abstract things a little bit and re-use common HTML

Coded templates have some distinct advantages that come with full code control, it's generally easier to build upon as you can structure the code any way you want, using any frameworks you want.

The ability to FTP in and edit a coded template is also a huge advantage over drag n drop templates, allowing you to set up build processes and even use pre-processors locally with your HTML files.

Probably the biggest bonus to HTML templates which no one really talks about is the fact they are able to be any type of template, Password, 500, 404, Subscription? Coded templates can do it all. The reason this is a big deal, is that you can clone coded templates to use them for any of these types. Whereas with drag n drop, because a template cannot be converted to a different sub type, you cannot make a 400 error page, clone it, then use it as a base to build your subscription preferences or password page.

I'm not going to list "minor advantages" here as everything I said above is a big advantage, and I don't have much more to add.

Disadvantages

• Some HubL supported tags are complicated and verbose, like the new x and y drag n drop regions. The code makes sense but isn't as immediately understandable as the visual equivalent in a drag n drop template.
• Clients usually want drag n drop templates from my experience, because it's something HubSpot kinda sells them on. The ability for them to make a lot of changes that previously only a developer could.
• In order to use global groups or global modules you have to use a drag and drop template to create them, it's not possible otherwise.
• HubSpot has a lot of documentation for working with drag n drop templates, which marketers can take advantage of, with coded templates you're kinda responsible for that.

My Recommendation

If you are new to HubSpot build a few sites with the drag n drop builder first. If you don't you'll miss a lot of functionality and features HubSpot has baked in, and likely shoot yourself in the foot trying to do something HubSpot already has a solution for. It also gives you a good understanding of a lot of the concepts in HubSpot which you might not connect the dots on, if you start off in coded templates. I've seen it dozens of times, new-to-HubSpot developers diving into coded templates because it's what they're used to. Only to code themselves into holes because they didn't realize there were features they could have used instead. The Drag n Drop interface makes these more visible, which enables you when you're building coded templates to go "oh I need one of these things here to solve this problem, HubSpot has a solution for this."

Once you've used drag and drop templates a bit you'll have a better understanding of the CMS and be ready to go all in on coded templates. That said, because of the unique advantages and disadvantages of drag n drop and coded templates you'll likely use a mix of them, using the template type that is most appropriate for the problems you're trying to solve.