Formabridge Website - Development Overview

When Formabridge got in touch, they were looking to make enhancements to an already existing website. Formabridge was one of the more “old school” projects that I worked on. Generally, when dealing with the front end projects that I tackle, there is usually some form of React involved in the development process. With this client, the tech stack was vanilla HTML, CSS, and JavaScript. Not only that, but all deployments were done through FTP (File Transfer Protocol). It’s quite an interesting experience going back to these processes after being spoiled for so long by the fast-paced growth in front end technology.

Approach

The project was quite straightforward with the client; Formabridge wanted some additional pages, updated copy, updated graphics, and some simple animations to make the website more interactive. I started some of the work with the navigation bar.

The main modifications were responsiveness fixes (desktop and mobile navigation), added hover states (bolded font + yellow bottom border), and an animated expansion of the navigation bar on any dropdown links as seen below

Other than this upgrade, changes to all the pages were mainly aesthetic (applying brand colors, fixes to the hero section slider, properly implementing the wavy footer and link alignment, etc.). I developed a couple of additional informational pages which had been requested, and fixed the responsiveness for the pages which were already present when I hopped on the project.

The website itself is very static which makes total sense for its purpose however, to make the website a little more lively, I included some simple transition animations on element visibility with the help of the Intersection Observer API, to ensure animations were only triggered when specific sections came into view.

A final fix I made to the site was in their video series slider, which has multiple video thumbnails that, when clicked, open the respective video which the thumbnail belongs to. The slides were not properly indexing data and so, what would end up happening when looping through the slides is that the video descriptions were not in line with the thumbnail being displayed and clicking on a thumbnail would open the incorrect video. All those issues were properly addressed.

During the development cycle, I was notified that these changes that were being made to the site would be temporary (hence why the development work was minimal), as they were planning on developing an entirely new site and just needed a website in production while the new one was a work in progress. Regardless, it's always exciting to be able to bring these solutions to clients, even if they aren't long lasting.