Case Study: 8050 Vero Beach
I was tasked with executing a responsive single-page webpage for one of Brooklyn United’s residential development clients. The site is built utilizing Craft as our CMS with the following development goals:
- A fluid and responsive layout.
- Intuitive interactions and navigation that would be simple for any prospective clientele to use.
- An interactive, downloadable floor plan preview section
- A contact form built as a custom Craft plugin PHP mailer.
- Fast load times using the webpack module bundler
- Well organized CMS template for the client to be able to change content and images quickly and independently
Webpack as Module Bundler
Because the site carried a lot of heavy assets (images mostly) it was extremely important to have the code as lightweight as possible without sacrificing performance. Gulp and Grunt are popular build systems that can accomplish this task, but for our purposes, Webpack was the best way to bundle our assets because of its modular nature.
Though it requires a fair amount of customization, the end result is fast readable code that is a very effective bundler. Below is the way I set up the build (all sensitive code was altered but the point should be clear)
In the end we have a simple build in one file that dramatically shrunk our codebase without sacrificing any performance or functionality
Instead of focusing on pixel perfection with very specific breakpoints accommodating certain screen sizes, we wanted the site to fluidly respond to all possible screen sizes.
I used the Rupture utility for media queries in combination with nib for my mixins. Because components in the site contained video, a carousel, and interactive menus, the ease of using Rupture breakpoints was invaluable and a great tool for this project.
The design team asked to add some flourish and draw attention to data being pulled about local temperature, weather and tide conditions. We used a parallax scrolling effect throughout the site to highlight this information alongside images of local flora.
I hooked up these elements to the Craft Admin area so they could be easily changed by the client. I used Skrollr to implement the parallax effect.
Incorporating smooth, intuitive animations is an important aspect of modern web design that improves the user experience. For this site, I designed and developed customized animations for the menu, image carousel, and interactive floor plan preview section.
I then animated the transition from the hamburger menu icon to the exit icon with CSS animations. I began in codepen (seen here) to experiment with different approaches before settling on the final implementation.
The next and most complicated animation challenge was the floor plan preview section, which included a number of different technical requirements. The floor plan images and content needed to be hooked up to the CMS so they could be updated by the client. The images needed a smooth transition as different rooms are selected. Then each image needed to be linked with it’s coordinating information.
Here I created the JSON object in the templated HTML through a simple script.
Now finally we see the end result in action.
Custom PHP Mailer Craft Plugin
The final challenge for this project was to create a custom Craft Plugin in the form of a PHP mailer. For this to work, the mailer script had to be in the custom Craft Plugin format where it could then be installed via the admin panel and tested on the development server before making it live.
As for the PHP script, it was a matter of wiring up the form fields to different variables and returning with the appropriate titles (email address, name, number ect…) in a typical email form.
I also created a subject title that would help the client understand when these email leads came through and tested it extensively before successfully launching it on the live site.
This site was a great learning experience for me as a developer. It provided me some interesting front-end challenges and a great opportunity to experiment with designing and developing interactions and animations in the interface.