When shouldn't you use HubSpot CMS for B2B website design?

TLDR: This isn’t a high level discussion over the virtues of comparative systems, it’s a hands dirty fundamentals discussion over implementations of systems that will affect the day to day editing of a website.

There’s no denying that the Website Pages add-on in HubSpot has made it an excellent choice for your next B2B website design, married to the standard marketing and lead generation platform it’s a great ally for converting visitors to leads. But in truth it’s still very much in its infancy. More established CMSs such as WordPress have had much longer to develop with hundreds of iterations and a well stocked library of plugins to add extra functionality as well as access to core files to bend and manipulate the system to do what you need. If you go down the SAP philosophy route, HubSpot would probably say that if the system isn’t capable of realising your design and functionality ambitions with the default setup, then you’re probably focusing on the wrong aspects of what you’re trying to achieve with the website.

That’s all very well and good, but there are certain elements in web design that are, for good or for bad, often seen as useful to the user experience and omission from the platform could be a deal breaker as to whether you go with HubSpot COS as your CMS of choice.  Here I’ll address some of the issues we’ve certainly faced and you may face when it comes to including certain functionality for your website.

Some of the issues that you face with COS that you don’t get with something like WordPress stem from the fact it doesn’t have an MVC setup. There’s more of a blurred line between the model (the database where the information is stored), the view (the front-end code and CSS that defines how things look) and the controller (the functions that bind those 2 elements together) in HubSpot. It’s a difficult balance for HubSpot to strike, the system needs to useable by everyone, not just developers, it’s meant to be used by clients and marketers alike after studying for and passing the HubSpot Design Certification exam so it can’t go too technical, but the HubSpot developers have worked hard to try and open the system up a little more to do some really custom, really cool stuff.

Sliders

Sliders are the ugly stepchild, the stats about no one clicking on sliders or even bothering to read past the first slider are frightening. Sliders tend to be quite heavy and slow when it comes to load times, which is bad for ranking. In terms of images and code there's a lot to load in and that could cause the user to leave the page instead of waiting for it to load. Social proof has in the past has often required a lot of client logos to display in a restricted area, so a slider seems like a good choice, but you're much better off selecting a handful of logos with a strong message about the quality and quantity of people who trust in your services.  So are sliders completely out the question in HubSpot other than for these reasons? No.

There’s a gazillion slider options in WordPress. Some themes have them by default. Some plugins allow you to drop sliders into pretty much anywhere with the use of a simple shortcode or widget. Things are less rosy with HubSpot's offering. Perhaps it’s their desire like ours to steer you from using a slider all together, the default setup really doesn't work very well, so when we've been asked to deploy a slider, we've I’ve elected to employ an external solution to the problem.

If you scroll down to the ‘Our customers’ of http://www.obs-logistics.com you’ll see a slider in action. It’s as described above, a series of client logos with links to relevant pages. It utilises a responsive slider script, we recommend either owl carousel or flexslider, and you can simply use one of HubSpot's custom HTML boxes to drop in the required ‘slides’, adding in the styling and scripts in the header and footer spaces respectively to get the whole thing working. The issue with this is the disconnect it creates in the ability to add to and edit the slider. In WordPress your standard post and page setup includes a featured image by default, it’s such a straightforward job to setup a custom post type or a custom category to flexibly power a slider, it seems ridiculous not to be able to do the same with HubSpot!

In actual fact you can have an editable responsive slider, it just takes a bit more work. Essentially you can deploy a module which is called a ‘flexible column’ into the template. What this allows the end user to do is add in any of the other default modules to act as a sort of repository for the slides to power the slider. In this case you can simply use the default image module, as alt text and a link (including whether it opens in a new window) makes it perfect to act as a slide, and the flexible column system also allows you to reorder the elements within it by dragging and dropping, which is more straightforward than the usual numbering system you’d get in WordPress. If you wanted something more complicated such as a custom piece of text or a title then you’re into the realms of creating a custom module to power each slide, but the principal is the same, and it’s then just a case of deploying additional script that will collect the slides from the repository to build the panels and start the slider running. More round the houses than you’d like, but that’s just the mechanics. From a final output and editing perspective there shouldn’t be any difference from any other standard CMS solution.

Hero Images

A big image on the top of your site is instantly engaging, even more so a video. The visual impact is a key tool to getting people to stick around and read your messaging. The problem is you can’t just have a great big hulking image stuck at the top of the screen that your users have to scroll past, which means it needs to be a background image, which rules out the standard HubSpot image module to do the job.

WordPress can handle something like this with ease. There’s off the shelf templates with custom sections dedicated to the inclusion of hero images, though they’re often quite flawed when it comes to displaying responsively, and you often end up with minuscule text on mobile. A custom template would get round this, and you can deploy the featured image, or what we do more regularly, is allow the hero to be assigned to the page through the use of meta data, not to be confused with the stuff for search engines, this is extra data associated with the page over and above the content and title that can add and affect the content on the page. Our simple approach is to provide a dropdown list in the WordPress editor which displays a list of the images that have been uploaded to the media library already (which is the WordPress file manager for all images, videos, audio files and documents), with a preview of the image appearing on selection to help the user select the right one.  This isn't an out of the box feature in HubSpot, but the base elements (and really good elements at that) already exist in the editor, it’s just a case of tying them all together to work correctly by using a custom module.

If you’ve visited http://www.obs-logistics.com you’ll have seen that across the top of many pages there’s a hero image. This one was extra tricky for several reasons. First of all the images had to appear behind the navigation, which meant once we’d constructed the custom module, the information set within it had to be extracted and deployed elsewhere. A custom module in the HubSpot system is a really powerful series of fields, from text to paragraph text to form fields to image choice fields. It’s a way of building a component to be displayed on a webpage in such a way that with very little training someone can produce pretty complex looking elements on the webpage with a really simple and really straightforward editing tool. One of the great things HubSpot recently introduced (it’s still in beta on some accounts) was inline editing, where as opposed to being at the side of the page you’re editing, or in the case of WordPress, on a different page all together, you’re actually clicking on the live elements of the page to make changes, which in our experience makes peoples lives a lot easier.

The end result in this case was a custom module with a series of fields to be completed by the user that then outputs a live finished version right in the editor. You’ll notice in the visual we even gave the user the option to decide where the anchor point for the image was so they could decide at the time which fixed point the image was best expanding from so the focal point in the image always remained on screen regardless of screen size. In addition to this you’ll note the option of background shade level. Not all images are going to be the same, and unless you want to go back to the designer each time you get a new image, you’ll always run the risk that the image you put in the background of your hero image is too light and therefore clashes with the text that’s overlaid on it. The truth is we’ve had to set different levels of shade in the past for the same image as there was just an unfortunate clash on one set of text that wasn’t occurring with another, and that’ll take loads of effort going back and forth with the designer to achieve. Happily this solution allows you to apply various gradients of black to darken down the background image so the text really pops up over the top. You’ll notice in the screen shot the difference in lightness from the preview image on the left and the live image on the right with the filter applied. Pretty cool right? We’re working on another custom module at the moment that pushes beyond this using JavaScript to give a greater range of canvas colours to apply in various opacities for more psychedelic options!  Hot pink anyone?

Mega Menus

You’ve probably seen these in action even if you’ve not heard the term before. Visit http://www.hubspot.com and hover over the links at the top of the page (on desktop) with the + sign next to them and you’ll see a big band of colour appear with the menu items spread out across them. People go further with these implementing images etc to really jazz up the navigation and attract people to click.  Again many off the shelf templates and plugins in WordPress allow a really straightforward way of creating these mega menus. The default HubSpot menus are very basic affairs, clean and simple unordered list items (that just means there’s not numbers next to them), but they’re not very exciting.  Usually in a CMS you can apply custom classes, these are specific names you can apply to parts of the website, which can then be targeted in a stylesheet and script to look and act differently on the page. Unfortunately no such system exists in HubSpot, you can’t apply individual classes to the menus which seems to rule the option out. You can get round this in a couple of ways.

Firstly you can target items in a list by how far into the list those items are. Some css functionality called nth of type facilitates this, but the issue comes if you want to add or remove or reorder the menu, as you’ll probably break everything. There’s also the option of removing the the menu from the general module editor and taking it into code, but again that takes away some of the functionality of being to edit and update the menus, which kind of takes away the point of a CMS in the first place. There is another way around it though.

You can assign hashtags to the URLs for the main menu items. These are usually empty anyway and just there to act as triggers to the dropdown menus. You can then use script to target each of the individual menus and their dropdown menus to add additional wrappers to alter the styling and even add in custom content from something like a custom module, which keeps everything very editable whilst having a controlled but interactive output.

Widgets

You might have heard of these, essentially they’re a stalwart across many CMSs and their job essentially is provide content onto the page from other areas on the system, be it something custom like tweets or a preview of other pages on the site, such as latest blog posts. WordPress has an array of these out of the box that can be expanded on with plugins. Most good plugins will include a shortcode system so their output can be deployed into widgets for insertion around the site. We’ve produced a significant number of custom systems for WordPress over the years, often deploying them in custom sidebars. Don’t misunderstand the term sidebar in this case and when people discuss WordPress, a sidebar can go anywhere in the template and are often deployed the footer to share the same information across all the templates/pages on the site. These elements are easy to deploy site-wide in COS using global groups, so long as you retain the same information for each page. Customising elements for each page will take a bit more work.

With WordPress it’s straightforward to revert back to the use of meta data, or even work with the built in category and taxonomy settings to bring relevant components onto a page automatically. By default HubSpot gives you a few options for displaying other elements on the site such as latest blogs or blogs by topic or author, by default they're simple lists, but you do have access to the HubL which stands for HubSpot Markup Language which can output a more media rich experience. If you're wanting to push past the basic functions there’s two ways to approach this.

What HubSpot do provide and are continuously expanding and updating is an API. API stands for application programming interface, and it’s job essentially is to deal with requests sent to it by the codes and scripts and return data based on the original parameters it was supplied with. Basically, you ask it for a certain type of information and it gives you the answer back! The HubSpot blog API option would be good in this situation. You can have more than one blog on the site, and the word blog doesn’t have to appear anywhere on it, so essentially its a way of having a separate dataset if you like, where you can interrogate it for the relevant information.

This method isn’t fool proof, there’s lots of elements of the API that could be improved like trying to pull through the address of the featured image to use, but it can prove a really useful repository for updating site-wide without the hassle of doing it manually. Of course one of the strongest features of HubSpot is the call to action system. If you’re fine with switching these site-wide from a single point, then it’s the most straightforward solution. If neither of these is suitable you’ll need external help.

It’s possible to create a custom module, which is a self contained content scraper, that when it loads can take the parameters that you’ve set and go off and automatically populate its section of the page with the right information. Where you source the information is up to you. Ideally the blog solution would fit, but what if you wanted or needed to go more in-depth than the blog parameters? Well Google Sheets can come to the rescue on this one.

Google Sheets is part of the Google Drive system, and essentially it’s a spreadsheet in the cloud. A shareable spreadsheet in the cloud, and as anyone who’s ever seen a database in something like phpMyAdmin, you’ll notice it looks a lot like a big spreadsheet, a table with columns and data in each row.

This fully cloud based solution might not be as neat as WordPress can be, but imagine, because you can give various editing and viewing rights to the spreadsheet, it can be updated anywhere in the world by anyone you gave access to once they’re logged into their Google account. This external input creates an extra degree of flexibility to a site, and whilst it requires some additional coding to collect and parse the information onto the website, it can help keep the data you want to display in the site really organised.

So there you have it, a quick (or not so quick!) summary of some of the issues you may face when it comes to website design using COS, but most importantly, none of these are insurmountable, so long as you’ve done your UX research and you’re confident these features are vital, you’ll be able to find someone suitably able to implement them for you.