Understanding the New HubSpot CMS Drag-and-Drop Builder and Its Trade-Offs

At the beginning of April 2020, HubSpot announced that it had upgraded the CMS portion of its product and given it a new name: CMS Hub. CMS Hub offers benefits for both marketers and developers. One of the big features is drag-and-drop (DnD) pages, which give users greater control over layout without needing developers. In this post, we explore the trade-offs of using HubSpot’s new front-end system. 

As part of testing the new CMS Hub, we had one of our senior developers, Mark Ryba, convert Visual Builder templates to use the new drag-and-drag editor and to compare three separate ways of building a template: Visual Builder, drag-and-drop HTML templates, and non-draggable HTML templates. Below, we compare different attributes of the templates and assign a rating of poor, average, or great. 

Layout Flexibility

Visual Builder: Average

The layout can be edited by the template editor tool in the design manager by savvy marketers, but the vast majority of the time, a developer will need to be brought in for layout changes. 

DnD HTML Templates: Great

Marketers can rearrange and resize modules along a 12-column grid according to a desktop layout. Mobile options will come later, but no release date or estimate has been announced or hinted at. Further, editor-level style controls are only available for HubSpot default modules at this time (headers, images, rich text) and not for custom modules.

Non-Draggable HTML Templates: Average

Layouts are rigid, coded completely in HTML and CSS, with HubL tokens added only for editing actual content. All text and image content is editable and controlled in the page editor tool; however, layout changes beyond showing and hiding sections would require bringing in a developer.

Layout Resilience

Visual Builder: Average

Over-confident content editors could, in theory, break layouts, but the need to go into the design manager as a separate tool serves as a natural barrier between most marketers and developers.

DnD HTML Templates: Average

Content editors have nearly complete control over the content editing experience; however, the drag-and-drop tool is not as refined as other parts of the HubSpot editor, meaning mistakes are easily made. There’s an “undo” button, but there’s still a good chance a developer will be needed to fix some mistakes. Likewise, HubSpot offers marketers the ability to add in-line CSS styles, but with no option for mobile styling, there’s a greater likelihood of creating a poor mobile experience. 

Non-Draggable HTML Templates: Great

Layouts are extremely resilient because developers completely control what fields are available to editors. Layouts are still flexible in terms of adding repeaters and other input methods, but the editing experience is more like filling out a form—there’s no clicking and dragging. In practice, this means pixel-perfect pages can be achieved to match designs.

Responsiveness

Visual Builder: Average

HubSpot’s Visual Builder was built based on Bootstrap 2 (released in 2012) and followed a strict “Z” pattern, meaning once a screen shrinks, modules would always stack based on the desktop version’s layout from left to right. However, this tool allows developers to add CSS classes to rows and use CSS to override this default behavior, if desired.

DnD HTML Templates: Average

HubSpot’s new drag-and-drop editor also works off of the Bootstrap 2 grid, rather than updating to the more modern Bootstrap 4, which has more responsive options. However, because layout is determined at the page level in this tool, all responsive styles are done in-line as opposed to using CSS classes. This means developers can’t elegantly create overrides when stacking order needs to be different on mobile. Further, any changes made in the “style” tool for an individual module or section will be applied to all viewports, meaning adding white space to a module or section that looks appropriate on desktop can cause havoc when viewing on mobile.

Non-Draggable HTML Templates: Great

By separating out the content from the layout, we have complete control over how every section of a design will resize on both smaller and increasingly common 4k and higher resolution screens. Further, we are not limited by a 12-column grid, which makes overlapping sections faster to implement and harder to break. This allows us to use modern layout standards for all portions of the design, such as CSS Flex and CSS Grid. These methods use more concise code and do not rely on hacky practices that have been necessary when working in a traditional, float-based grid system like Bootstrap 2.

Code Bloat

Visual Builder: Average

The Visual Builder has always required some extra markup that is generated by the HubSpot tool and not by the developers themselves. This code mainly was for adding responsive CSS classes, as well as classes that the page editor could hook into in order to enable click-and-edit functionality in the page editor. This method results in about 10 percent of the page HTML source being HubSpot-generated code that we, as developers, cannot cut down or modify for performance reasons.

In building a hero banner, we found the Visual Builder generated a whopping 43 lines of HTML.

DnD HTML Templates: Poor

Building a new section purely in the drag-and-drop builder, at least in its current form, results in a large amount of generated markup, close to twice as much as the Visual Builder. In addition, the styles added to the modules and sections by content editors are added in-line in the HTML. This is instead of being compiled and cached in a separate CSS file, which could be referenced in one line and deferred so it wouldn’t affect page render speeds. The net effect of using these DnD templates is a less performant site, bound to be dinged by page speed analyzers and Google.

In building a hero banner, we found DnD generated 71 lines of HTML.

Non-Draggable HTML Templates: Great

The most performant websites have always been those that are coded in straight HTML (or compiled to function as such) with minimal CSS and JS dependencies. Traditional CMS systems have always had this trade-off between editability and performance. However, HubSpot’s templating language is actually surprisingly light when added directly to coded templates, leading to minimal (if any) extra classes. When using an HTML template (which is now HubSpot’s recommendation, with or without integrating drag-and-drop code), a developer has the option to add only the needed HubL tokens for editors to change text, images, and so on, and result in just a few—or no—extra lines of output.

In building a hero banner, we found non-draggable templates generated 24 lines of HTML.

Results

Overall, the winner in terms of these metrics are non-draggable HTML templates. Of course, there are other metrics that may be more important to you—this is largely looked at through the lens of a developer. Non-draggable HTML templates come with trade-offs, such as needing to know how to do front end development or pay for development resources, which may be at the expense of a timely marketing campaign you are pursuing. 

Although the new drag-and-drop features have a few drawbacks, they offer great flexibility for quickly building a site with less help from a developer. HubSpot will continuously improve this product as it has with its previous CMS additions, so these metrics may change drastically. 

There are also other possible ways to approach development that were not discussed here, such as a hybrid of these three methods. In order to get the best of both worlds, you could build a template where only specific portions have DnD capability. Users should also note that outside of the DnD builder, HubSpot allows stacking and re-ordering modules vertically (not horizontally) with flexible columns, as well as within “repeater” options in custom modules.

There is no one-size-fits-all answer for which methodology is best for a HubSpot website. What’s right is largely dependent on your own functional requirements, budget, web development chops, and marketing goals. As leaders in HubSpot development, SmartBug Media^® can help facilitate your next web project, ensuring that your functional and design requirements can seamlessly integrate. Hopefully, this article sheds some light on the data we’ve found. We look forward to updating our findings based on new metrics as HubSpot continues to add features to the ecosystem.