Headless WordPress Case Study: Building Forbes Africa Website with Frontity

We are excited to share with you the details of our latest project – Forbes Africa. The Africa franchise of Forbes.com run by ABN Publishing (Pty) Limited, South Africa approached us to redesign and develop the website using Frontity after noticing our contributions to Frontity and our own website (Read the case study). 

Their existing site was built on WordPress using a premade theme and a WooCommerce store to sell printed copies of the magazine. The problem was that the site’s performance was poor and it was starting to reflect in their google rankings.

Key Parameters for Redesigning

The client had very clear ideas about the requirements which definitely made our work easier. They wanted us to 

• Ensure that the design/layout matches with the Forbes International website.
• Improve website performance.
• Use the latest technologies available including headless WordPress as backend and Frontity/React as frontend.

We spend a good amount of time researching on different type of layouts for the home page and the detail pages. It was definitely not an easy task to organise the different types of content and categories to put together and make an intuitive, readable and accessible layout. Our hard work didn’t go in vain, the first iteration of the design itself was approved with out any changes, which was done by Sreejith – our Senior UI/UX Designer.

Development

Based on the input from the client, we had a brainstorming session. We decided on the following regarding the development work. 

• Use Tailwind CSS as the frontend CSS framework.
• Rewrite/remap functionalities of old contents like adjusting videos, social media embeds, older image paths etc. 

The Challenges

The first challenge was dealing with the old content on the website. There were over 16,000 old articles including images and videos around which we had to work without breaking the site. Finally, we not only avoided breaking anything but also mapped and corrected the images and broken links.

We were also using the Tailwind CSS for the first time. We had zeroed in to the utility-first CSS framework because it lets you build responsive designs right in your HTML and makes it easy to be consistent with colour choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system. It was a bit challenging initially but we are sure to use it in our future projects. 

Contribution to Google Ad manager Package

The biggest challenge we faced was regarding the advertisements on the site. The client had expressly requested us not to leave the empty ad slots visible to prevent the blank spaces from showing up on pages. At present Frontity does not support such an option. 

Our super-developer Vinuraj ended up customizing the Google Ad Manager package. It solved our problem and we submitted it to Frontity as we strongly believe that knowledge should be shared with the community. We are happy to say that it has been approved by them. 

End Result

We have been able to deliver a website that is impressive and is sure to grab eyeballs. We have nearly tripled the loading speed. The site lazy-loads instantly with around 200 articles on the home page without any time lag. We have also ensured that there is a uniform layout for the articles, videos and images, even the old ones. 

Client Support & Feedback

The support we received from the client played a great role in the success of this project. It also helped that he is a developer himself with good knowledge in Frontity and helped us a lot in coding. He is all appreciation for Vinuraj, Sreejith and the team and has assured us of a long term association with more projects. 

We are sure that the upcoming projects too will be challenging but we are confident to rise to the occasion and deliver the best.