For those just joining the story so far here is the first instalment where I discover that there is such a thing called the Joomla 3 landing page, stumble across the designs for the new Joomla 4 landing page and realise there is a lot more to this than meets the eye.

In this episode, we unpack the wonderful work that Chiara Aliotta put into the landing page before the Joomla World Conference in Rome. Get to find out what the webmasters' team do and experience the synergy that goes into making the page happen.

Choosing the colours

The first challenge we faced was unpicking the subtle colour changes involved in the design layout. Chiara had not just designed one page, she had designed a theme of pages to last through the 4.x series.

Each minor release (4.1, 4.2) had a base colour. The landing page was designed to change over time as we progressed through the 4.x series. The various areas of the page were variations on that base colour. I'm not a graphics artist, so that's as technical as I get in my description. If you are muttering colourful language at the PC containing different hues, shades, tints and tones then a quick recruitment plug: we are always looking for more talent in the Marketing Department and your skills will be gratefully received. Back to the story in hand, the colours needed to be set as variables in the scss so that they could change over time.

Building process

Benjamin started the build process on his own domain to see how the then J4 Beta would stand up to the task.

I sorted images, the areas we wanted to cover and asked Josean Telleria and Sandra Decoux for opinions and help with images which they duly did.

The development work highlighted some issues in the template that meant we could not lay the page out as it was in the original designs, but undaunted, Benjamin proceeded to enlist Christiane Maier-Stadtherr and others to help put together some pull requests to fix issues and to broaden the template’s abilities, as well as pull requests already started by others which helped .resolve the issues encountered.

Removing the wrong Bootstrap CSS was an important first step.

This was a “sticky” one. “Banners can be displayed in a frontend module, but the module does not know which banners are pinned (sticky)”.

And finally, a pull request by Dimitris Grammatikogiannis with the lovely title “Tabs redo, Fixing what's broken”.

Overrides

For the benefits and features sections, we wanted to use the Articles Newsflash module. It can show certain information from articles in a specific category, use the image and has many other useful options. We also needed certain styles, which resulted in two nice overrides created by Benjamin.

As described below, we also added the lines needed to load the text from language strings instead of the article content itself.

Language

Being the Joomla Landing page, the ability for people to read the content in their own language was another need to be implemented. The product has great capabilities out of the box to make this happen, see: https://docs.joomla.org/J3.x:Setup_a_Multilingual_Site.

For the Landing page, it required some special attention as well; we wanted to bring the translation capabilities via our Crowdin Enterprise Platform to the community. This way it was possible to not only translate the content of the Landing page but more importantly bring the right message to everybody in the various languages used in the world.

Technically it required us to use another great feature, Layout Overrides, which makes it possible to change certain default output to meet your own needs. We used the Custom HTML Module to display the various text on the page and created overrides for every module used.

The override contains the required lines to load the language strings stored in the override.ini file for every language (https://github.com/joomla/joomla.org/blob/master/www/4/language/overrides/en-GB.override.ini), it makes translation management easier as we only have to update the file on a regular basis.

The files are publicly available on Github, the custom HTML modules here: https://github.com/joomla/joomla.org/tree/master/www/4/templates/cassiopeia/html/mod_custom

The translations can be done by everybody in the community via the Joomla Localization System running on the Crowdin Enterprise platform. The source files (en-GB) and all translated files are automatically synced with our Github storage and once in a while a volunteer checks the results and publishes it on the Landing page.

In the process, we found there was a missing feature within the product, by default Joomla always switches back to English for a missing string, except when using the override.ini feature. Thanks to Benjamin the feature has also been added to the product, https://github.com/joomla/joomla-cms/pull/35209

Performance, Accessibility, Best Practices and SEO

We knew that out of the box Joomla 4 was good but we wanted to keep that high score as we added images and weight to the page. Unlike many sites, we also needed to add the ability to be read in many languages.

Wilco’s first concern was the URL: was it strong enough from an SEO point of view? A good question and just because we had had /3 that does not mean we should have /4. Avocado green bathroom suites were all the rage in the UK in the 1970s along with Blue Nun wine as the height of sophistication. We should learn from our mistakes and not take for granted the wisdom of the generation before. So we called in the Big Guns and spent a Saturday morning running through the SEO points with Christopher Wagner.

He reassured us of the viability and also helped with some of the wording, metadata and structural considerations.

Wilco set about building the structure with Benjamin adding his code and I was occasionally asked to provide images or words while they performed the magic.

It quickly took shape with the one problem area being the language switcher.

Work from them both resulted in the clean looking switcher we have today.

And what of the Performance, Accessibility, Best Practices and SEO, I hear you ask? Well, you can test yourself! At the time of writing for desktop, we score 99 for Performance 100 Accessibility, 100 Best Practice and 100 SEO

Performance can be tricky, it depends on a lot of factors like Hoster, Server capabilities, the distance between visitor and site location and various other things. To increase the location-based performance we use Cloudflare to act as a CDN. This means that most of the site is temporarily stored statically on servers around the world. It then serves the file closest to the visitor rather than our main hosting server.

To decrease the amount of time needed on our website server to process all kinds of information, we used the LiteSpeed Joomla plugin. This can leverage additional benefits from the server software.

The project shows what can be done with the standard Cassiopeia template, many late nights of graft, a good design and great teamwork.