REQUEST A FREE 30 MINUTE MARKETING AUDIT

Call us now on 0161 7110 110

19 Jul 2016

HubSpot CMS: The CMS for designers and programmers

HubSpot-CMS-The-CMS-For-Designers-And-Programmers.jpg

If you're anything like many of the clients that we take on, you have started with Wordpress and added plug-ins as required. When considering moving to a platform like Hubspot designed with inbound marketing in mind, some still fear leaving behind Wordpress. After all, the great thing about WordPress is it’s open source. The template system is so straightforward, there’s tens of thousands of designers and developers all over the world who can work on your site, changing and adding functionality to it. Moving to a proprietary system like HubSpot COS compared to the functionality of Wordpress seems like madness surely?

The COS system is very much geared to being editable by marketing more than it is by designers and developers, but that doesn't mean it excludes designers from being creative nor HubSpot certified COS developers from creating custom functionality. Here’s a few reasons why you’re not tied to the original agency throughout the lifetime of this iteration of the your site, as well as why any designer and developer should be happy to work with the COS system.

 

Twitter Bootstrap

The Twitter Bootstrap is 'the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web’. It has been around for about 5 years now and is about to head into its 4th version. Any designer worth his salt will have used Bootstrap at one time or another for a responsive project, and it underpins the responsive elements of HubSpot's responsive framework, front end and in the template editor, and as such it should be a straightforward task for any web designer to jump right in and start creating pages in COS.

The template system is based on a 12 column layout, you can easily drag and drop, split and group modules to create custom templates on the fly. It’s a great system for working directly with clients, prototyping made easy right in the browser, you both can contribute to the design with the designer adding styling elements to the live wireframe afterwards. All our designers are COS certified and love the interface when they’re mapping out the structure of the templates. It really is rapid prototyping at its clearest and best.

 

No ground zero

As nice as a blank piece of paper is, there’s no point in re-inventing the wheel with each new site. Designers and developers alike, dependent on their experience, will have reports of resources they rely on with each new site they build. Creating in COS means they’ll perhaps have to rework some of those resources before they can deploy them into HubSpot, but we’ve been using COS from the word go and have built up a considerable library of code we can rapidly redeploy to the new sites to really speed things up and get the sites up and running and making a return on the ROI super fast. And the great thing about the HubSpot system is it’s all developed in house so it’s all of one mind. Unlike CMSs like WordPress and its plugins, everything in HubSpot is done in the same way, the code it produces is very predictable and reliable so it’s easy to extend the styling code and any custom JavaScript to fit.

 

Custom code

As a developer of over 15 years I’m as paranoid as the next web programmer about not having enough control of the detail when it comes to content managed websites. Having been used to PHP and mySQL systems where I have complete control of the inputs and outputs, it was a wrench shifting to WordPress, so you’d think my fellow developers and I would hate working with such a closed system, where you can only really get access to data via APIs.

The fact is the maturity of the system developed by a dedicated team of engineers at HubSpot has resulted in a fantastic system to develop on top of. HubSpot has worked through a series of technologies over the years and has settled on Java, which is a strong universal language that’s now popular with a lot of large web based companies like Google, Netflix, Facebook & Twitter. This means there’s always going to be people developing in it, and the libraries and functionality being developed in HubSpot will continue to expand and extend at an exponential rate. It’s very exciting!

The other advantage of this proprietary system is security through obscurity. The less people know how something works the less likely they are to find holes to exploit. WordPress has its army of ethical hackers, watching for bug and flaws and reporting them to the development team, which it really needs to survive the constant onslaught of kiddie scripts trying to force their way and do harm on the site. Other CMSs end up somewhere in-between the 2, but none really are without flaws. I won’t mention the name, but one left a known bug in its software for over 3 years as they thought it couldn’t be exploited. Until it was. Then they had to scramble to patch it. Not good!

The closed system of COS isn’t completely shut off to development. The API system they’ve produced has resulted in a massive library of add-ons being developed that bring extra functionality to the site. This can be extended even further by a developer with custom modules, which allows access to data fields and functions to create additional sections to a page, all of which are still editable through the familiar HubSpot interface, so there’s nothing new for the end user to have to learn, which is a bonus and not always true of extending CMSs. All our developers are COS certified and have fallen in love with the the cohesive, flexible and workable systems that COS runs on.

So there you have it, just a few points about the quality that’s already there within the HubSpot COS system, that will continue to evolve and extend long into it’s very bright future for you to exploit for your online marketing.

Download our free guide 

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="HubSpot CMS: The CMS for designers and programmers - 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="HubSpot CMS: The CMS for designers and programmers">Answer One</a></li>
<li><a href="#" id="HubSpot CMS: The CMS for designers and programmers">Answer Two</a></li>
<li><a href="#" id="HubSpot CMS: The CMS for designers and programmers">Answer Three</a></li>
<li><a href="#" id="HubSpot CMS: The CMS for designers and programmers">Answer Four</a></li>
<li><a href="#" id="HubSpot CMS: The CMS for designers and programmers">Answer Five</a></li>
<li><a href="#" id="HubSpot CMS: The CMS for designers and programmers">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('HubSpot CMS: The CMS for designers and programmers');
}
});
</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 - HubSpot CMS: The CMS for designers and programmers"><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('HubSpot CMS: The CMS for designers and programmers');
}
});
</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: Website Design

Blog Comments