In this post, we talk about one of our HubSpot CMS development projects. You will learn about the challenges we faced, the solutions we offered, and the results we achieved.
Over the past few years, Hubspot CMS has gained popularity among brands and businesses due to its combination of simplicity and flexibility. The platform is easy to use, even for non-tech-savvy people, making it a powerful tool for multidisciplinary teams.
However, creating a truly unique page or integrating a custom functionality without professional assistance can be quite challenging and error-prone.
At P2H, we specialize in building and customizing websites by Hubspot CMS. Below, we will share the process of how a Hubspot-based website was built and why the results guarantee customer loyalty for years to come.
pr.co designs and builds custom newsrooms and cutting-edge software that makes writing and publishing news a breeze for communications teams. The platform allows publishers to manage relationships with media contacts via a CRM, collaborate with their teams, organize their media assets in one centralized hub, and much more.
We were contacted by Padraig McKee – pr.co’s Director of Product. He explained that the company widely used the HubSpot ecosystem to manage their sales and marketing activities, so when the decision to create a new corporate website was made, the choice naturally gravitated towards HubSpot CMS.
P2H is my go-to partner when I have low in-house development capacity. P2H is fast, reliable and always delivers quality work on time. And a special shoutout to Anya for her impeccable project management.
The client provided the designs of all the pages along with detailed specifications. Our task was to integrate those designs into HubSpot CMS and add some features to enhance user experience and meet pr.co’s specific business needs.
To get the job done, we used the staple web technologies: HTML5, CSS3, Flexbox, and JQuery.
Our task was to develop several web pages for HubSpot CMS. If we hardcoded them, though, the client would have a hard time maintaining and updating them afterwards. The solution was to develop a number of modules that the client could easily edit and use to create new pages.
We created two groups of drag & drop modules.
Global. These modules are used in areas found on every page of the website, most frequently in the header, sidebar, and footer.
Custom. These modules contain content that the client can change depending on the page such as a callout box with an image and CTA button. It can have different text for different calls to action.
Using these modules, the client can easily (and quickly) create new pages, adapting them to their needs.
In the era of handheld gadgets and Google’s mobile-first indexing, not having a mobile version of your website is unwise.
The client was well aware of that. Therefore, we made the pr.co website mobile friendly, adapting it for different screen sizes/resolutions and creating a sliding mobile menu based on the client’s mobile designs.
Because reading content on smartphones and tablets is so easy, the chances of losing visitors, leads, and customers have decreased significantly.
To make the website more engaging and user friendly, we added several animation and interaction effects.
Animation on scroll
Animation on hover
Animation on hovering over a grid with cards
Dots pulsing animation
Carousel
Filter
Sticky Header
These days, you can easily reach your target audience in virtually any corner of the globe with an Internet connection. This means your website should “speak” more than one language.
Because pr.co is a fast-growing company, it strives to reach an international audience. Therefore, our task was to add the multi-language feature to the website. Below, we share the results of the successful integration.
Currently there are two languages available on the pr.co site. There is always the possibility to increase this number whenever needed.
The client also commissioned us to create a new (second) blog with information on product updates. Using HTML and CSS, we converted the provided designs into two page templates: the blog listing page template and the blog post page template.
The blog listing page template
The blog listing page aggregates all the company’s product blog posts. As you can see in the screenshot below, the blog post cards are made up of the title, publish date, tags, and the body text. When the body text contains more than 500 characters, it’s truncated. Users can click a “Read full update” link to take them to the blog post page where they can read the entire update.
The blog post page template
This template is used for each post. The “All updates” link takes the user back to the blog listing page. There are 12 blog posts per page. The primary tags (New, Improved, Fixed) are color coded. The secondary tags share a similar design (Newsroom, App, PR, CRM, Virtual Events, Press Page).
The pr.co management wanted to speed up the process of creating marketing emails, all while making them engaging and visually attractive..
We handled this task by developing a number of custom modules that can be easily assembled into an email template by pr.co’s marketing professionals. All they have to do next is change the content of the modules and they’re good to go. Here’s an example of an email made up of our modules.
Our collaboration with pr.co is an example of how we’ve gained customer trust and loyalty through our work. After completing one task, the client kept coming back with more work for us over a long time span. That shows how satisfied they were with the quality we delivered.
Want to be our next happy client? Write to us.
Discover our latest case study featuring the Dinghy Daily Charter project. See how our expert WordPress team developed a mobile-first, responsive website to engage and convert visitors.
Webflow and HubSpot CMS are both cutting-edge website builders that claim to be the best WordPress alternatives and require no coding or low coding skills. If you're choosing between these two tools for building your own website, this post should give you a lot of valuable insights.
Discover how we used Webflow to redevelop a website as part of our commitment to giving back to society.
