The Valvoline website development was a build where I led the Front End Development part of the project. From start to finish, I was involved with Creative, UX and Technology to build a world-class, mobile-first, responsive website to update the Valvoline online brand.
Home page showcasing the slideshow, carousel and navigation on Desktop and Mobile.
As the lead developer, I was brought in after strategy had been set. UX and Creative were beginning their portions of the project which gave us a chance to collaborate and make sure we were all aligned in building a great product, while staying under the budget and meeting the timeline.
Immediate challenges were working with Creative on a “full-screen” website. This website was being developed during the rise of the now-common trend of “full-screen” websites. With the way UX wanted to layout the content, mixed with the large images from Creative, I knew that on larger screens, this would become a layout mess. After showing this issue to UX and Creative in prototype form, they agreed that we needed to limit the width of the site within a certain breakpoint. I believe this still gave the Valvoline website a unique look in a landscape of “full-screen” websites.
Though the navigation on the left side of the website seems simple, it was actually quite a challenge. It’s 100% height of the site. When above our tablet breakpoint, it has a percentage width, until our 1440px media query. The icons are using viewport size values. The viewport size values were a great way to keep the icons relative to the viewport of the device the site as being loaded on. When below the tablet breakpoint, the main navigation folds up into a traditional hamburger menu. I pushed for a slimmed down navigation that used small icons, and text, to represent the important pieces users would be coming to the site for instead of using the more traditional “hamburger menu”. This was decided against and the “hamburger menu” was utilized on mobile.
When looking at the homepage animation, know that this was a custom built solution. SVG animation was being used lightly. Knowing that I was in charge of the entire project, framework and bug fixes, I decided to pull in a developer to handle the build of this custom layout and functionality. The depth of what was built is very much showcased when looking at it on multiple devices.
The rest of the site has many small widgets and sections that shine on their own. I am proud of this site and how well it has stood the test of time. We didn’t use tricks or poor development tactics to build this site. Our optimized, mobile-first build out methods have helped this site stay extremely relevant and custom in the growing world of responsive web development.