REQUEST A FREE 30 MINUTE MARKETING AUDIT

Call us now on 0161 7110 110

08 Aug 2016

Does it take longer to build a HubSpot CMS site than a WordPress site?

Does-It-Take-Longer-To-Build-A-HubSpot-CMS-Site-Than-A-Wordpress-Site.jpg

We’ve been building sites with WordPress now for 6 years, so in that time we’ve gotten pretty good at it (we hope!) and have built up a considerable library of reusable code to redeploy from template to template to speed up the process of development. Because HubSpot COS is a cloud based solution it doesn’t work in quite the same way. That’s not to say that we haven’t built up a repository of reusable code for COS in all the time we’ve been HubSpot COS developers, but side by side how do the 2 platforms compare when it comes to the business of setup?

WordPress has it’s famous ‘5 minute installation’ claim, and that’s reasonably accurate, assuming of course you’ve got your hosting up and running.  And your FTP access. And you database all set up… And make sure you keep those passwords somewhere safe for all those elements as well! For us setting up WordPress on a new site is no biggie, there’s just a lot of time wasted in the setup of the install just to get the core up and running. You do have quick install systems on a lot of control panels which you can take advantage of. In my experience they tend to stick with default settings though which is bad for security so we tend to shy away from using those.  COS is cloud, which means you’re paying for the website pages system everything you need is immediately there, you don't need to setup any databases or store additional password or worry about the security of all that as it’s been taken care of for you.

WordPress has a dizzying array of plugins available for it. We tend to use a limited number, predominately because it reduces the security risk, but also because we have a development team, a lot of functionality required can be coded in without the bloat of having to use a plugin, which keeps the site from being slow. These plugins take a degree of setup time as well, you’ve got to remember all the right settings to get the best use out of them, and connecting them to the various APIs for full functionality can be a bit of a chore as well. HubSpot doesn’t have plugins as such. Its cloud system means that everything you have available in one portal in available in the next one you setup. It also allows you to transfer over any custom modules you’ve created in one portal to another just by selecting them and then the portal you want to transfer them to, so they’re all set up and ready to re-use.

We use well established and honed framework templates as our starting point on all WordPress sites. They’ve always being reviewed and updated so we do a new install as a theme starting point each time. We don’t rely on the responsive framework that comes with it though, choosing to work with a another trusted responsive css framework that uses something called LESS, which is a preprocessor for CSS, which essentially makes it easier to write repeatable code quickly. We like it so much we always use it for our HubSpot COS sites as well. It’s mobile first, which means we design everything for mobile and then add code on top for when the screen gets bigger. It’s often difficult to create repeatable blocks for site designs so you find yourself writing custom code for even the basic of building blocks for pages. There are plugins available such as Page Builder and Visual Editor which let you craft page layouts on the fly. They’re quite contrasting in their complexity. Ones probably a bit too simple for the real control you want as a developer and the other is too complicated for the normal end user to understand, which results in any changes being referred back to your agency, which isn’t ideal. But because the responsive system of HubSpot is part of the editor as it is the front end, you get from the get go a really strong but simple to use 12 column grid to work from. That sounds sort of limiting, but I assure you it’s not. The real power of it comes from the ability to quickly layout the content into blocks and then using the built in ‘class’ system it’s very straightforward to apply custom styling to those blocks. Which brings me onto really the key difference in ‘building’ a WordPress and HubSpot COS site.

Traditional website design tends to involve visuals, usually in a desktop publishing editor. Yes they’ve perhaps come from wireframes, maybe even paper ones, but still they’re static pretty pictures that don’t actually contribute to the build of the site, whether that’s in WordPress or HubSpot. The key difference you need to be thinking about is prototyping. The idea being you generate designs ‘in the browser’ so you can actually make use of the wireframes you create. No time is wasted superfluously. There are dedicated prototyping tools out there but they tend not to concern themselves with contributing to the final product, rather more giving you the browser experience from the get go.

For me this the future of web development and what will really reduce the time spent ‘building’ a website. The design. Actually creating in the CMS rather than desktop tools. And if you use HubSpot COS, that future is already the reality. The drag and drop module interface is really straightforward and intuitive so much so the designer and the client can work together to formulate final designs in a much more rapid fashion that with traditional web design. And if you’re already using HubSpot it really is a tiny jump to configuring pages through the design editor.

Request a free B2B inbound website consultation

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="Does it take longer to build a HubSpot CMS site than a WordPress site? - 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="Does it take longer to build a HubSpot CMS site than a WordPress site?">Answer One</a></li>
<li><a href="#" id="Does it take longer to build a HubSpot CMS site than a WordPress site?">Answer Two</a></li>
<li><a href="#" id="Does it take longer to build a HubSpot CMS site than a WordPress site?">Answer Three</a></li>
<li><a href="#" id="Does it take longer to build a HubSpot CMS site than a WordPress site?">Answer Four</a></li>
<li><a href="#" id="Does it take longer to build a HubSpot CMS site than a WordPress site?">Answer Five</a></li>
<li><a href="#" id="Does it take longer to build a HubSpot CMS site than a WordPress site?">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('Does it take longer to build a HubSpot CMS site than a WordPress site?');
}
});
</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 - Does it take longer to build a HubSpot CMS site than a WordPress site?"><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('Does it take longer to build a HubSpot CMS site than a WordPress site?');
}
});
</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.

If you're not using this section then you should delete the text in here.

Blog Comments