When coding using the best practices will result in a high-quality website easy to manage and maintain by the business owner and easy to scale by the current or a different developer.
With HubSpot CMS its no different, we, as web developers, have to follow the best practices when building themes or modules either for a client or for sale.
Below you can read about some of the best practices we can address when coding HubL.
Web accessibility
WHO states that 15% of the world population live with some type of disability and in 1 in 4 Americans. It is very important to ensure that everyone can access your website content and information and can perform the same operations as everyone else.
When coding a website keep in mind that not everyone experiences the internet in the same way and always consider people with disabilities. We need to ensure that everyone can access the web content equally regardless of who they are and how they access your website.
By using the recommendations from Web Content Accessibility Guidelines (WCAG) that define the steps you can take to make your website accessible and following their four main principles: Perceivable, Operable, Usable, and Roboust (POUR) you will successfully reach your goal.
Addressing accessibility will solve UX, SEO, conversions, and potentially lawsuits.
You can test your accessibility by using axe DevTools extension for Chrome from the console and scanning your website. Also, you can manually test your website by using the TAB key and see if you can navigate through the page. For screen reading testing you can use VoiceOver on Mac or Narrator or NVDA on Windows. For visual impairment test the zooming from the browser.
Website performance
We all know by now how important the website performance is either as a developer or as an internet user and how frustrating it feels when a page is loading slowly. Keep in mind that nowadays there are so many other websites with similar content or information users tend to leave the website and use the one that loads in a decent manner.
I personally always advise my clients to focus on functionality and then on design as a pretty design that doesn’t work means nothing and will lead to zero conversions while a functional website will always get you the message delivered. It doesn’t mean that design is not important but design should be around functionality and now the other way around.
Definitions:
Website performance, sometimes also referred to as site performance, web performance, or site speed, refers to how long it takes for a browser to load and render all the elements of a web page.
Performance also includes how long it takes for your page to become interactive, after it’s been loaded and rendered.
Loading performance refers to how long it takes for the server to transfer all of your site’s files to the browser. This includes the many elements of modern websites, including the HTML file, JavaScript files, CSS files, fonts, images, videos, and anything else that’s needed on your web page.
Rendering performance refers to how long it takes the browser to take your site’s files and eventually paint the pixels to the page, so that your users can perceive the site’s content.
Time to Interactive, or TTI, refers to how long it takes for a page to become fully interactive. At a basic level, a fully interactive page will reliably respond to user inputs.
The main areas you need to consider when optimizing your website for performance are images, videos, javascript, CSS.
Optimizing your images is important as a large image can slow down your website. There are many ways how you can optimize your images either by compressing them using Photoshop or using tinypng but the best way to not lose quality and also decrease the loading speed is by using svgs, webp images. Don’t forget the lazy loading images which is supported in HubSpot CMS.
Optimizing your videos by avoiding autoplaying videos and if it is a must then ensure that the video is compressed and show a fallback image.
As for HTML, CSS, and Javascript optimizing use minification, compression, and caching. For Javascript use defer or async to the script. In HubSpot use require_js to choose the position, defer/async, same as require_css.
Check out the HubSpot Documentation on web performance
To test the web performance of your website use the Google Lighthouse chrome extension or page insights by google.
HubSpot custom modules and themes
Modules:
Being consistent in the way you name and organise the custom built modules will be helpful for you and for the content editor.
Use required fields only if but not being required it will break the module.
Use rich text fields instead of text fields with font style fields.
Themes:
Don’t repeat yourself in the code.
As a reference of best practices and also a great start when building themes you can follow on HubSpot CMS theme boilerplate available on github. Use it as the base of your new theme or as a guide.
We ignite creative sparks with passionate minds, transforming ideas into powerful brands that stand out. Our design gurus craft exceptional UI/UX experiences for a lasting impact.
