Tips HubSpot COS developers wouldn't share easily

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 Inbound Mantra developer colleague had to say about HubSpot COS.

My initial days at Inbound Mantra 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.

HubSpot COS Developer
Drag and Drop with HubSpot COS

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.

Learning HubSpot COS is easy

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 only screen and (max-width: 600px){ body {font-size: 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.

div { width: 50vw; height: 100vh; }

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:

.hs-cta-wrapper a{ padding: 10px 20px; background: #f05a27; color: #ffffff; border: 1px solid #f05a27; border-radius: 5px; }

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:

input { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

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:

<p style="font-size: 16px; color: red;">Inline styling</p>

However the above method is incorrect.

The user should give styling in separate css files:

HTML

<p>Inline styling</p>

CSS

p{color: red;font-size: 24px;}

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

  1. Text Field
  2. Image Field
  3. Rich Text Field

Control Modules

  1. Boolean Field
  2. 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

<h1>Heading1</h1><h2>Heading2</h2><h3>Heading3</h3><h4>Heading4</h4><h5>Heading5</h5><h6>Heading6</h6><p>Paragraph</p><small>Small</small>

Output:

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

Paragraph

Small

Similar Posts

Recent Posts

Mu Sigma logo

G2 Crowd | HubSpot Reviews

★★★★★ 4.6/5
5,997 reviews
Mu Sigma logo

capterra | HubSpot Reviews

★★★★★ 4.5/5
‎4,091 reviews