REQUEST A FREE 30 MINUTE MARKETING AUDIT

Call us now on 0161 7110 110

15 Oct 2013

Choosing a CMS: WordPress vs HubSpot's CMS

Untitled design (37).jpg

Here at Axon Garside, we're big fans of both WordPress and HubSpot. WordPress has developed from a blogging tool to a customisable and extendable content management system for rapid development and future-proof customisation. HubSpot provides a user-friendly blogging, landing page and email marketing system to build a platform to create and monitor your inbound marketing, and it does a really great job of it. I've always felt that the tricky part is getting the two to work together.

On the most recent incarnation of the Axon Garside site, I've created custom posts within WordPress, simply to allow the embed codes - used for the calls to action we've set up within HubSpot - to be stored in an organised fashion. It also means they can be specifically connected to any content on the site, be it in the main or the right-hand column. It's proved really useful with the new responsive design, allowing us to swap codes around based on the screen size they're being viewed on.

It's the same story with blogs and resources, where we've essentially created intros on the WordPress system that are then manually connected to relevant content within the HubSpot system. This whole link and embed code metadata relationship isn't a massive headache for us to keep track of. By compartmentalising a lot of the external HubSpot resources, we've ensured nothing appears that's no longer relevant and there are no dead-end calls to action on the site. However, it's certainly not the clean solution we'd like to ensure the system doesn't make the user have to get their hands dirty with code.

Ideally, we'd be keen to see a closer integration of WordPress and HubSpot, whereby the two communicate really closely to make resources on your HubSpot account connectable with a click of a button, ensuring that whatever you produce on HubSpot can easily integrate with the right sections of your main site.

However, this could be a bit of a logistical nightmare. The templating system alone probably means HubSpot would need to start producing its own themes to hook in calls to action and forms within the various page templates in WordPress. And there are plenty of other content management systems that would be crying out for HubSpot to play as nicely with their systems. Where would it end having to maintain all that?

COS2

Introducing the HubSpot COS...

HubSpot has decided that instead of trying to integrate more closely with other content management systems, it wants to become your complete content management system! Actually, it wants you to use its new Hubspot COS - that's content optimisation system - to build your entire site from start to finish. So what's on offer?

Well, in keeping with HubSpot's current systems, you'll be able to produce pages using responsive templates, so the content on your site should work across all devices perfectly. If you're not familiar with responsive web design, check out some of our previous posts.

In my experience of responsive design, even with a great system like HubSpot, the likelihood of things working as expected the first time round is somewhat remote. Like anything web-related, there'll be a bit of trial and error and code massaging to get things exactly how you want them. For me, this is beyond the scope of most designers' expertise, let alone that of a client, so the system will have to take that into account and handle the customisation as gracefully as possible.

HubSpot claims the Hubspot COS will be universally loved by designers. Assuming the new system has the flexibility to control how everything looks and works, it may be right. As a developer, I'm hoping HubSpot finds a way of making the template construction sufficiently controllable so that I don't have to revert to producing raw code each time, which has happened in the past when we've got ambitious with the design. There's nothing worse than having to tell a designer 'Sorry, can't do that - the system just won't do it out of the box…' Currently with landing pages and emails, I often find myself duplicating a template that is a rudimentary version of what we're trying to achieve, using the online editor to add, remove and move modules to get it closer to the design, then cloning out that template to a file for final code adjustments in an offline editor. Not ideal, and certainly not a process you'd want to repeat across a whole site.

A Personalised Experience

What the COS should do brilliantly is allow you to integrate all those lovely inbound calls to action, forms and landing pages directly into the site so you can fully exploit the efforts you put into those marketing materials. On top of that, the system promises to offer customisation and personalisation for returning visitors. That sounds great to us, as easing users down the conversion funnel in this way should be perfect for obtaining those sales qualifications.

In the HubSpot sales pitch for the COS, we've seen some graphics with a personalised greeting. To be honest, I'm hoping this isn't the extent of what the system will be capable of. I'd like to see an intelligent system that adjusts the content the visitor is shown without them even realising it. Like responsive design, it should tailor the customer experience based on where they've been, what they've already downloaded etc.

HubSpot says the COS will be faster than most content management systems. I'm not too sure about that one. You find a lot of sites are slowed down simply because the owner has implemented a dizzying array of plugins that need to be consulted before the output is returned to the browser. I would imagine this lightweight COS will in general be faster, but will that come at the cost of site functionality? There are rumours of extending the Marketplace within HubSpot to become a repository of plugins similar to the current WordPress setup. It'll be interesting to see whether or not HubSpot can still make these speed claims when users are bulking up the code with add-ons.

Overall, we're really excited at seeing what the COS brings, but we're not ready to ditch WordPress anytime soon. Having a rapid development environment with quick start-up and future-proof development, as well as the option to customise pretty much everything, equals happy clients. HubSpot's COS will have to go some way to compete with that. However, if you're already using HubSpot as the platform for your inbound marketing efforts and decide to build a new website at the same time, the COS may suit your requirements perfectly.

Request a free B2B inbound website consultation

You can connect with Paul on

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.


Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>


Survey
Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS">Answer One</a></li>
<li><a href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS">Answer Two</a></li>
<li><a href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS">Answer Three</a></li>
<li><a href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS">Answer Four</a></li>
<li><a href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS">Answer Five</a></li>
<li><a href="#" id="Choosing a CMS: WordPress vs HubSpot's CMS">Other</a></li>
</ul>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>


Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('Choosing a CMS: WordPress vs HubSpot's CMS');
}
});
</script>


CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - Choosing a CMS: WordPress vs HubSpot's CMS"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('Choosing a CMS: WordPress vs HubSpot's CMS');
}
});
</script>
</div>

This is the rest of the blog

When the page loads, or when it is being edited, this content will appear. When the page is loaded on the blog, the content will be hidden by the script until such times the trigger button is clicked or the trigger form is completed.

Topics: Hubspot

Blog Comments