10 Tips that every HubSpot COS developer should remember...

Having worked on HubSpot for one and a half years, I have learned a lot, while still having a lot more to learn. Some seemingly minute details end up being very  important for every web developer or HubSpot COS developer, to keep in mind.

Here are 10 tips that I have learned to help use Hubspot optimally:

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 depending 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 seperate css files:


<p>Inline styling</p>


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:











Similar Posts

Recent Posts