If only I could get a sidekick to help me out with website development.
Someone like Jarvis for Iron Man.
I am yet to get one, but the HubSpot COS development tool has been a great help. It goes beyond traditional CMS and provides the optimisation of social media, headers, blogs, and pagination through simple tags. The built-in responsive designs can save a lot of time, resource, stress and IT costs.
Here is why, it works out so well. Yes marketers, HubSpot also has a few things for designers and developers.
Why HubSpot COS rocks?
There are a number of reasons. These reasons fall into these buckets.
- Software features
- Developer benefits
Software features
The following features provide compelling value to the developers building on HubSpot COS.
Integrated
Hubspot COS brings together all the important components of your marketing tool-kit in one place.
- Website pages - Imagine LEGO to make your favorite creations. That is exactly what this is about. Using a versatile web builder, a developer can quickly push out SEO friendly, responsive and fast loading websites.
- Landing pages - These are the gateways to marketing transactions. Similar to website pages above, landing pages within HubSpot give developers complete freedom to launch landing pages in a jiffy.
- Email templates - Building on the flexibility of the HubSpot COS, completely customisable email templates can be developed one-time for repeated usage by the marketers running campaigns.
Responsive
Mobile first. Isn't what the internet has become? Then there is a big list of devices with varying form factors - tablets, TVs, laptops, desktops and the mobile. It isn't just the user experience that matters, growth is also a factor. Google that drives most of the internet traffic today prioritizes mobile search traffic when doing updates to its search algorithm.
HubSpot COS delivers responsive websites straight out of production. There isn't any need for extra coding to make websites responsive. HubSpot COS modules are already flexible and responsive, like Pagebuilder in Wordpress. No extra effort required!
Personalised
Smart content capabilities allow HubSpot COS developers customise website visits by existing contacts by name, company and even country. Additionally, the COS allows developers to serve different websites on different devices. e.g. website A on laptop and a website B on mobile. Cool, isn't it?
Benefits for a HubSpot COS Developer
Here is what an Znbound developer colleague had to say about HubSpot COS.
My initial days at Znbound were all around Wordpress but later as I started with my HubSpot Design Certification, things started changing. As a HubSpot Partner team member, I discovered an entirely different platform for Website Designing after becoming a HubSpot COS Developer. Since my HubSpot Design Certification, it's been a bumpy ride as a HubSpot COS Developer. HubSpot COS came and left me mesmerized with its advanced features and in many ways, it made the whole process a lot easier. I didn't have to code much unlike Wordpress, but getting used to the process and method took some effort. This was one of the best learning experience as a web developer.
No PHP
No back-end coding for HubSpot. Wow. Please say that again.
Could life be any easier? I mean I only need to drag and drop modules and use HTML or CSS to make beautiful pages. Child's play, right? Well, it was only later that I found out it was not the same case for a Blog or Email templates. HubL is the language used for these pages we develop in HubSpot COS.
In case I need to add any advanced features, I can also create custom modules.
Self Taught HubSpot COS Developer
To learn HubSpot you don't need to join any kind of course or spend money. Of course, you have to spend money on buying HubSpot. But, as far as learning how to make websites on COS is concerned, you will learn 50% of HubSpot COS by the time you complete your HubSpot Design Certification. HubSpot already has so much information online and moreover, the HubSpot COS Developers forum is much more than supportive, you will get all the information required regarding the HubSpot COS. According to my personal experience, you do not need to wait for more than 24 hrs to get your questions answered. As I told earlier, HubSpot has a vast environment of online knowledge. You may find a few things about the HubSpot COS development here.
Make Dollars on HubSpot Marketplace
When you have spent so much time and effort on a template or page, wouldn't you like to sell it? HubSpot has a marketplace of its own. On Wordpress, you need to go to Envato or ThemeForest to sell your template, but with HubSpot COS you don't need to go anywhere, you just need to submit your designs in the HubSpot Marketplace. To know the submission requirements for HubSpot marketplace, you can click here or read our guide for submission into HubSpot COS marketplace.
You can also check out Inbound Mantra's HubSpot COS Templates in the HubSpot Marketplace.
After having worked on HubSpot COS over many development projects, we have also learnt best practices to use HubSpot COS better.
10 tips to use HubSpot COS better
1. Content Staging
If you are redesigning a website or any page of the website, it's important to know that there's more than one way you can do the same. There are still some developers who publish the new page after "unpublishing" the existing page. This however, is a wrong practice.
Content Staging, a Hubspot tool that helps us to replace new pages with a single click, is in fact the right way to go.
Navigate to content staging:
Content > Website pages or Contact pages
Click on More Tools > Content Staging
Select the existing page for staging
Create a new stage page > Publish to staging
Go to publish section > hit Publish
2. Media Query
Nowadays we see most websites in desktop as well as on mobile and tablet, on which the width of the screen is different. If the browser window is 600px or smaller, the font size will be 16px:
Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently at different screen resolutions.
Desktop:
Use a media query to add a breakpoint at 767px for tablet:
Use a media query to add a breakpoint at 480px for mobile:

3. Viewport Units
The viewport is the visible area of the screen that the user is seeing at a time on the web page.
The units VW and VH define the width and height to the size of the window. Use VW to manipulate dimensions according to the width of the viewport and the VH, similarly, for manipulating dimensions according to the height of the viewport.
In the above example, the element occupies 50% of the window width and 100% of the height of the window. While the settings in rates depend on the size of the original item, these units are relevant to the window size.
4. SVG
The latest of all the file types, SVG (Scalable Vector Graphics) is a vector image file format released in 2001 and is more powerful than other file formats suitable for the web. The size of "SVG" file is lowest among "png, jpg & gif” file. The “SVG” image is never blurred, and it is also available in code form. Due to its low size, the page loads quickly, which is beneficial for the page performance and SEO.
5. Global styling for Hubspot CTA
If you want the global CSS style for HubSpot CTA, you can manipulate the default CTA class in the CSS file:
Using this method would save us from having to repeatedly use "button" since “.hs-cta-wrapper” is the HubSpot's default CTA class.
6. Form submit button on IOS device (iPad/ iPhone)
Another observation was that if the form submit button was styled with CSS style, it looked fine in the desktop view but it looks unaligned on the IOS device (iPad/ iPhone). Using the following code will help fix this issue:
7. “Inline” CSS should not be used
Inline styles look and operate much like CSS, with a few differences. Inline styles directly affect the tag they are written in, without the use of selectors. Here's a basic HTML code using inline styles:
However the above method is incorrect.
The user should give styling in separate css files:
HTML
CSS
This method has been proved to be better for “SEO”.
8. Use CDN
If we are putting an image on a website page, then it is best to use the "CDN" link. Hubspot file manager provides two links to the uploaded image, from which there is a normal link and a "CDN" link. With the “CDN” link, the image loads faster, which is very important for the page load speed.
You can see in the image below:
9. Hubspot custom module
Custom Modules allow HubSpot designers and developers to create a custom group of editable content objects that maintain their style across individual templates and pages on HubSpot’s COS. If we have to use a section repeatedly, then we use it, in which we can change different content in all sections. It saves the developer time, remember DRY - Don't Repeat Yourself. It contains some fields which are as follows:
Basic Modules
- Text Field
- Image Field
- Rich Text Field
Control Modules
- Boolean Field
- Choice Field
10. Font size consistency
It is essential to uniform the size of the font in any website page to make the page easier to read. Also, the page would have a consistency to it, which is essential from the design point of view. For example, if we are giving a page heading, paragraphs, subheadings etc. then all sizes should be kept separate and uniform for each instance they are used for.
An example is as follows:
HTML
Output:
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
Paragraph
Small
