Fontem Science

Developing a clear and concise website to display the most current and pioneering research into e-cigarettes.

Fontem Ventures is a consumer goods company that owns blu, one of the most popular brands of vaping products in the world. Fontem Ventures is committed to making significant contributions to the growing body of scientific research around e-cigarettes, displaying this under Fontem Science.

Initial Brief

Following the successful launch of the Fontem Ventures corporate webpage by Fast Web Media, the team were tasked with designing and building what would become the Fontem Science website; a site dedicated to Fontem Ventures’ approach to vaping science. The website would showcase published findings from the company’s research, highlight any key issues or questions in the industry, as well as act as a hub for the latest news in e-cigarettes.

Due to the broad audience Fontem Science appeals to, the website would have to be multilingual, with the ability for users to translate the content from English to French and Italian. The website also needed to incorporate a number of filtering options for its content, including the ability to search for articles from a particular date or with a certain description, meaning end-users could easily hone in on the exact articles they were looking for.

It was also important for Fontem Science to obtain successful search rankings, so the overall development brief was complemented with comprehensive input from the Fast Web Media search team, who provided recommendations on meta titles, descriptions and URL structures, to ensure the website was reaping the SEO benefits of a fully formatted website.

Development Process & Implementation

The Fast Web Media development team started the build by defining the required data structure for the website. This initial step included the required sections and attributes for each website segment. Once the blueprint for the content had been planned and completed, the development team were able to curate a custom content management system that allowed the team at Fontem Science to easily add and amend existing content.

User experience was at the forefront of the website specification, so using the latest in HTML5 technology, our development team equipped the site with a blend of parallax scrolling, subtle CSS animations and a persistent navigation; all with the end-user in mind.

As well as user-friendly navigation throughout the website, a full schema markup was embedded, in order to improve and enhance search engine presence.

The aesthetic of the website and overall functionality was mocked up with a mobile-first approach to the development. By developing a responsive design for mobile first, applying this design framework for other devices hereafter becomes considerably easier. The sections were split into separate components, which allowed for greater functionality, reuse and overall cleaner code.

The final stage of the build allowed the developers to explore various animations, effects and transitions to provide the end user with a better interactive experience. The website also needed to be fully translatable, so the development team installed the WPML (WordPress Multi-Language) plug-in and then assigned to the English content, which then syncs into a foreign language.

Challenges & Solutions

The main challenge for the website build was ensuring the best possible user-experience was provided, having to ensure that the parallax, skews and subtle effects were all cross-browser compatible. Remaining accessible for a number of devices was imperative for Fontem Science, so thorough and vigorous cross-browser testing was factored into the overall project time, ensuring that the design and build of the website was complemented regardless of the device it was loaded on.

Outcome

The Fontem Science website was completed with input from three major Fast Web Media departments: development, design and search. Vetting the website with input from these three departments ensured that the Fontem Science site benefited from accessible, edgy design work, optimised content and remained fully functional across a wide range of devices and browser versions.

We hope you enjoyed reading

Related Articles