Life Fitness
Image Credit: Tyler Kamigaki
While working at Vodori, I was one of a handful of front-end developers to work on the redesign of Life Fitness.com. While technically my role was "front-end developer", I ended up being involved in many different facets of the project.
Our collective goal was to deliver a redesigned site that would tell Life Fitness' brand story through rich imagery, carefully crafted content, and a delightful/intuitive UX.
UI Design
Image Credit: Tyler Kamigaki
Vodori and the Life Fitness team leveraged my past experience as a UI and Responsive Designer/Developer and consulted with me regularly during the interactive prototyping phase to solve complex UI problems.
I helped craft strategies and solutions for handling complex layouts and how they respond to a massive range of devices and environments.
Front End Development
Image Credit: Tyler Kamigaki
Webflow
Our team leveraged Webflow to create the interactive designs/prototypes. As an exercise to potentially save on time and budget, we opted to bring in Webflow's CSS/HTML into our production app code, going through phases of code parsing and purging. We learned a lot about this, which you can read more about here on my Codepen blog post.
CSS/LESS Development
While this was the first large-scale app I've contributed to, I was still able to implement code/practices that I've learned throughout the years.
Since this was such a large app, I knew it would be important to utilize Object Oriented CSS as often as possible. I was able to do this through creating design objects and patterns.
Handling Images and Focal Points
A large hurdle our team had to overcome was how to handle the changing aspect ratios of images across many viewports. Keeping the focal point in the center of our photography was very important in that they were part of telling the brand story.
The large challenge we faced was that in many contexts, we were forced to use the <img> tag, which restricted us from using the css property: background-size. This forced us to apply custom positioning with media query breakpoints to keep the focal point in the center.
We were able to modularize the set of positioning rules mapped to media query breakpoints so that applying them in various contexts would be simple and fast to implement.