While Uplers remains your go-to hiring platform, if you need help with digital marketing services, head to our sister concerns…
Mavlers offers spot-on Design, Web building, SEO, PPC, and Marketing automation services.
Visit Mavlers
Email Uplers offers Templates, Campaign management, Automation, and Migration services.
Visit Email UplersFor digital marketing services, Visit Mavlers and for email marketing services, Visit Email Uplers
Welcome to the HubSpot COS Design Monastery. Here our disciples get to learn the vital design considerations if they want to attain the highest rank on the COS development platform. There are many things to consider from functionality and appearance, to navigation and coding integrity. Our monk will give you the mantra throughout this interactive pilgrimage to help you kick-start your development projects with an enlightened outlook.
The initial stage will set up the tone for scope, vision and procedures. The growth of every web designer will depend on how well they dedicate themselves to the pre-design stage. The following 4 steps should be reinforced along with every pre-design consideration.
This is without shout one of the most important considerations for web design. Its high time web designers became an active part in the marketers’ meetings to gain the ultimate knowledge on business goals. Goals will guide the designer to build relevant websites for prospects.
Your preachings could have more impact if you provide a good and relevant ambience. Usability and utility will decide the success or failure of the website. Personas make valuable revelations that will help in determining background color, fonts, and images.
COS Certified experts are the abbot of HubSpot COS design. They understand the design manager from the core and could embed the marketer’s needs into the design and improvise when needed.
After talking to the marketer, do you feel that their vision and your creativity could be justified on the HubSpot COS platform? Are there certain functionalities that couldn’t be attained on HubSpot? Talk to the marketer.
Now that you are aware about pre-design stage before the start of the tour, it's time now to see how to practically walk on the HubSpot COS path.
(Example: Design in a 12 column grid layout)
The layout should be based on 12 column grid layout like Twitter's Bootstrap framework on which HubSpot COS is built. It is easy to drag and drop the modules in “Template Builder.” At one time designers could have maximum 12 modules on a single row.
All drag and drop templates automatically include a minimal CSS file (layout.css) that makes the grid responsive across different screen sizes. While the file is based on Bootstrap 2, it has been stripped down to include only the code that is necessary to make the rows and columns of your layout stack on mobile devices.
Here is how you could determine
We term developing symmetrical designs on HubSpot COS as "What You See Is What You Edit" (WYSIWYE). That's because you could simply add the modules and customize their layout along with the content as the overall design is simplistic and is free for overlapping elements.
Overlapping and uneven placement of design elements causes editability issues. This example shows how complicated it gets when you want to edit the content of a particular module. When you select a module, you may get the content of a module that overlaps or underlays it. This editability constraint could affect the marketers, however a skilled COS developers will be able to overcome it.
This is a bad kind of proximity and you couldn't even dream creating a website like this one on the HubSpot COS module based system. In HubSpot COS design manager all the elements are wrapped in a module and no two modules could overlap. The elements couldn't spread across 2-3 modules.
When designing in HubSpot COS it is vital for designers to follow a good proximity. This is because the design manager on HubSpot COS is based on modules, which makes it mandatory to maintain the flow of all the elements to supplement each other and reinforce the essence of the message.
By default all web templates that you create on the HubSpot COS platform are 100% responsive. However, you could customize the mobile layout to meet some specific requirements.
The inbuilt "Smart Content" feature helps you reach your targeted customers using mobile devices with tailored content that is developed to adapt to different screen sizes. Just feed the content into the Smart Content section and select it for responsive approach.
Customization is not a big challenge on HubSpot. HubMonks have figured out that you could either edit them in the modules or generate a JS script that could be customized to add interactivity. Click the links given below to read articles by HubMonks about getting interactivity on various components:
Designers could work with modules in 3 ways on HubSpot
For the most commonly used elements of the webpage, you could use the standard modules. HubSpot provides in-built modules so that you don’t have to create these elements. Customization with these modules is quite simple.
You could create your own customized module that could be placed at your desired web pages. This is the best option for those who don’t want to be restricted to the standard modules pre-built in HubSpot.
When you make a global module, such as a header, you don’t have to create the same element for each webpage on the site. The same elements will appear across all the pages where a global module has been applied.
There is limited scope for interactivity on HubSpot COS. However, at HubMonks we have discovered the best practices to include or limit interactivity for optimal performance.
JS skills could be implemented to develop interactive mega menus on the COS platform. Mega menus could also be created on HubSpot COS.
It is tricky to develop forms with multiple background on HubSpot COS. It could be achieved with the help of skilled scripting resource to customize the form module. The same applies to forms with custom messages.
These grids are used for galleries or portfolios. It supports basic grid operations like inserting, filtering, editing, deleting, paging, and sorting. Basic HTML knowledge is essential to add these grids.
You could add media on HubSpot COS without writing complicated codes. They could be directly inserted into the modules. At page level it is very easy to upload all types of media. This requires the Hubl code expertise.
If you are planning to add videos into your slider modules, you will need custom development expertise.
You don’t need to create a different code for social media sharing and following as they are in-built in the COS platform. However, for some platforms like Pinterest you will have to create a custom code.
Calls-to-action could be created as global modules so that they could be utilized on multiple pages.
When combined with the best practices of web designing, the HubSpot design considerations given in this infographic will help you leverage the most out of the advanced web development platform. The MONK becomes stronger with these considerations to create a practical design that has all the right elements of inbound marketing success.
Hubmonks help you convert your beautiful designs in to functional & flawless HubSpot
COS templates. Websites, Landing Pages, Blogs, Emails & Newsletters
To know more email us on hello@hubmonks.com or visit www.hubmonks.com