Frontend Component Architecture for SEO & A11y

• Employer: ti&m AG
• Role:: Professional Software Engineer
• Duration: 3 months of active development, 2+ years of maintenance
• Technologies: Magnolia CMS, HTML, CSS, Javascript, Bootstrap, jQuery
• Public Link: ti8m.com

Project Overview

The project was born as a re-implementation, re-architecture and re-design of the original company’s website, with the goal of making it more modern and visually appealing.

I joined the project from the initial conception phase and participated during its entire development. I gave significant contributions to defining the project architecture, establishing coding conventions and closely collaborating with the marketing and development teams.

The Problem

The original website became hard to maintain, it was running on an older version of a CMS, and the UI was looking quite outdated. The main goal of this project was to modernize the website both technically and a visually.

The Solution

The website was built using Magnolia, a swiss-made CMS.

My work consisted in initially defining the architecture and component structure. Pages were entirely customizable by content editors so the majority of the work was not only about making the website visually appealing but to also provide a high level of flexibility and customization to the content editors.

Components were implemented using Freemarker Templates, the theme was built using SASS and Bootstrap, and to keep the styles maintainable I suggested adopting the BEM naming convention. Dynamic interactions and third party integrations with CRMs and analytics services were handled using jQuery and custom scripts, most of the code was written using standard browser technologies.

I was also personally responsible for the migration of the old blog data to the new one. I designed and created a set of custom Node.js scripts to perform the data migration from one version to the other.

Results & Conclusion

Being a publicly available website focused on marketing, a huge investment was made on optimizing performance, SEO and accessibility, and as you can see here, the Lighthouse’s scores of the desktop version prove the high quality and investment put into those optimizations.

Working on the company’s main website allowed me to learn and apply valuable lessons on how to make a fully customizable website using a CMS, I also leveraged my knowledge to the best of my abilities to make it performant, accessible and optimized for both humans and machines.

Of course most of the content editing was done by the marketing team, but the underlying technical implementation and optimizations are what allowed the department to quickly create content pages and successfully launch the website with a fresh new look.

---