17

Case Study – A Corporate Website in Joomla

In the previous chapter, we explored some of Joomla’s advanced features dedicated to access and security.

In this chapter, we’ll explore a case study, showing how Joomla has been deployed and used in a specific corporate scenario.

After reading this chapter, you will understand the following:

• How Joomla has been deployed in a corporate environment
• How Joomla has helped the company reach its goals
• How Joomla helps reduce the time to market for new pages

Introduction

In this case study, we’ll analyze the experience of Host.it, an Italian hosting service provider that was an early adopter of Joomla 4 for its corporate website.

Host.it has been involved with Joomla since its inception – in fact, it acted as a supporter and sponsor of the Italian Joomla community, providing it with free hosting infrastructure, co-organizing JoomlaDay Italy, and sponsoring localization activities.

The company offered a Joomla-compatible hosting service when other major hosting companies didn’t, and this allowed it to conquer an important market share among Joomla hosting services.

The Host.it website was originally built in 2017 during the company rebranding, and it was released as a monolith Java application that included the company Customer Relationship Management (CRM) system, the web shop, the client panel, and the public website. This was the natural choice since the core systems of the company were developed using Java and Java Server Page (JSP).

Over the years, the company realized that the marketing team was struggling to be more Agile and effective in publishing new web pages or changing existing ones given that each change to the public website needed a full release of the whole monolith software. This made the company less reactive in updating its website and increased the effort necessary to create marketing initiatives and campaigns.

Furthermore, the website was not brilliant in terms of performance, as it included many unused parts and styles inherited from previous releases.

During 2021, the company decided to rebuild its website – let’s see what the goals of the project were.

Note

The website analyzed in this case study is available in the Italian language only.

Project goals

The company launched the project to rebuild its website from scratch and established several goals that the new website should meet:

• Reduce the time to market when building new pages
• Reduce the time required to change or update the website
• Increase the website speed
• Increase the Search Engine Optimization (SEO) of the website
• Reproduce the same layout and look and feel of the previous website

The project wanted to decouple the public website from the monolith Java application, leaving the CRM and the e-commerce part untouched. The website mostly included product pages with information and comparative tables, service description pages, product comparison modules, and configurators to provide real-time quotations to customers.

Furthermore, the new website needed to integrate the company’s blog, which was built in WordPress and held over 300 articles. In the next section, we’ll see why the company chose Joomla to create its website.

Why Joomla?

Having been the patron of the Italian Joomla community for years and one of the most used hosting services for Joomla in the country, the company had great expertise on Joomla. Furthermore, Joomla was already in use for other public and internal websites in the company, since it powered Host Academy, an e-learning portal; several company landing pages used by the marketing team; and an intranet portal used by customer service to handle work shifts, vacation plans, and requests.

Besides the internal expertise, Joomla offered several advantages that influenced the decision:

• A brand-new stable version approaching (Joomla 4)
• A lightweight, powerful, and fast core
• Built-in multilanguage support
• A modular structure

Joomla 4, which was still in the Beta phase at the time the decision was made, looked future proof in the eyes of the company, allowing the use of cutting-edge technology, being based on a modern graphic framework such as Bootstrap 5, and supporting the future internationalization path of the company.

Let’s now see how the project reached its goals.

Reproducing the previous website using another technology

The first challenge was to reproduce the previous website’s look and feel. The company management wanted to make the release of the new website unnoticeable to visitors, so the whole website layout, navigation system, graphics, and color palette were reproduced in a Bootstrap 5 template for Joomla 4.

The development of this custom template, based on Cassiopeia, required a few weeks of work on the part of two experienced Joomla developers, Marco Biagioni and Alessandro Chessari.

The result was identical, as you can see in Figure 17.1 and Figure 17.2.

Figure 17.1 – Host.it home page developed in JSP

As you can see in the following screenshot, there are just small spacing and sizing differences between the two versions:

Figure 17.2 – Host.it home page developed with Joomla 4

Replicating the whole layout required the development of a series of custom modules, such as the customizable cards on the home page (visible in Figure 17.2), which show the product lines and their prices.

These cards are completely configurable in the backend as a specific type of module, as shown in Figure 17.3.

Figure 17.3 – Home page card module | Card details

The cards module, developed specifically for the website, allowed the creation of cards with information about the product, using the subform field to handle multiple items. Each card handles multiple fields, such as the title, icon, and price, and allows the style to be customized, setting the font size, the anchor text for links, and much more.

Another custom module that has been developed is the service configurator, a module that allows the website visitor to configure the product as desired and get the price in real time, as displayed in Figure 17.4.

Figure 17.4 – Service configurator module

The team also developed a module to look up for domain names. This module interacts with the e-commerce APIs to show the status of a domain name and allows the user to register or transfer it. The module includes a JSON import feature that allows administrator to load the list of managed Top Level Domains (TLDs) and their prices. The domain lookup module is shown in Figure 17.5.

Figure 17.5 – Domain lookup domain

There were also other modules developed, such as another card module to show the reasons to buy a certain product or service, a module to show calls to action, a customized breadcrumb module, and much more.

This approach, based on modules, allowed the team to build a completely customized layout and re-use some parts; in fact, the domain lookup module is implemented for two pages, and the card modules were deployed for multiple pages and places.

The use of modules avoided the use of page builders or layout builders, ensuring clean and lightweight code, which was directly reflected by the website’s performance, as we’ll analyze in the next section.

A fast and modern website

As mentioned earlier, one of the main goals of the project was to provide the company with a fast and modern website that was decoupled from the monolith Java application.

Joomla 4, since the tests conducted during the early Beta phase, achieved great results in terms of performance, with reduced response and loading times. Furthermore, performance was crucial for the company, which sells fast hosting services, and it couldn’t have a slow-loading website.

Starting from a lightweight frontend such as Cassiopeia, the use of modern standards for images, such as WEBP, and the minification of CSS and JavaScript allowed the website to be reactive and ensured fast loading times.

To check whether the goal was fulfilled, the company tested the old website and the new one with GTMetrix, simulating an unthrottled connection from London that was closer to their data centers.

The previous website (JSP) was graded C, with 66% as result for performance, as displayed in Figure 17.6.

Figure 17.6 – GTMetrix Results | Old website in JSP

Instead, the new website achieved an A grade, with 98% in terms of performance, as depicted in Figure 17.7.

Figure 17.7 – GTMetrix Results | New website in Joomla 4

All the fundamental performance metrics were improved, especially Core Web Vitals, which are appreciated by search engines and users.

The test on the new website was made right after the release of the website to ensure a fair condition and consistency with the previous test. The current website includes several new sections that might have altered the performance results.

In the next section, we’ll analyze how the technology change has been managed to retain the SEO position.

Keeping the position

A major challenge was minimizing the impact of the migration on the company’s current search engine position, considering that all the URLs of the website also changed due to the technological transition, moving from URLs that included the .jsp extension to URLs without any extension. This purpose requested the team to extensively map all the URLs of the old website using Screaming Frog and prepare an .htaccess file with all the redirects from the old URL to the new URL.

The hardest part was represented by the blog since there was the need to import – almost automatically – all the contents from the WordPress instance. This was handled using the CMigrator extension, which allowed the team to import all the articles and their images and categories. Again, all the URLs were mapped, and the redirects were setup in the .htaccess file.

After publishing the new website, the team still detected certain 404 errors, which were triggered by certain pages or resources that were almost hidden. The team then used the Redirect component of Joomla, which allowed the team to identify and address all the remaining errors.

All these activities allowed the website to keep its search engine position and minimized the impacts of the whole migration.

In the next section, we’ll see which extensions have been used in the project.

Extensions used

Besides the custom modules developed specifically for the project, there were a few extensions used on the website:

• CMigrator by CompoJoom: Used temporarily to migrate content from the WordPress blog
• Akeeba Backup: To quickly create backups on the fly while working on the website
• GDPR by J! Extensions Store: Used to manage cookie mapping and classification, displaying a cookie bar and complying with privacy regulations
• OSMap by JoomlaShack: Used to create and maintain an XML sitemap to be sent to search engines
• Phoca OpenGraph: Used to manage OpenGraph tags for the contents
• LiteSpeed Cache: Used to unleash the benefits of caching functionalities offered by the server

Overall, the team tried to keep the number of extensions used to the bare minimum to reduce security risks and the impact on the website’s performance.

With the list of extensions used on the website, we have completed this case study.

Summary

In this chapter, we went through a case study that demonstrated an implementation of Joomla 4 in a corporate environment, where the CMS was used to build a brand-new corporate website that needed to match some specific requirements in term of look, feel, and performance.

In the next chapter, we’ll analyze another case study – creating a learning portal with Joomla.