Homepage for 8050verobeach.com — Design by Brooklyn United

Case Study: 8050 Vero Beach

Developing a responsive website using HTML, CSS, Javascript, PHP and Craft as a CMS

8050verobeach.com

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:

  1. A fluid and responsive layout.
  2. Intuitive interactions and navigation that would be simple for any prospective clientele to use.
  3. An interactive, downloadable floor plan preview section
  4. A contact form built as a custom Craft plugin PHP mailer.
  5. Fast load times using the webpack module bundler
  6. Well organized CMS template for the client to be able to change content and images quickly and independently

The site is programmed utilizing HTML5 with Twig as the templating language, Stylus as the CSS preprocessor, Babel (for JavaScript ES2015 support) and jQuery for site interactivity.

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

Responsive Layout

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.

Single page layout — Design by Brooklyn United

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.

Responsive breakpoints

Parallax Scrolling

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.

Parallax scrolling

CSS Animations

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.

Menu animations

First I created a navigation menu that would allow the user to easily locate different sections on the long single-page site. I began by making the menu expand when clicked using JavaScript with an event handler used to toggle classes and the expanding animation.

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.

Icon animation

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.

I stored the images and data in an object so that the appropriate information was properly linked together. I then layered the images on top of each other and used CSS animations with a JavaScript event listener to implement a fade animation once the event was triggered.

Here I created the JSON object in the templated HTML through a simple script.

And here is the JavaScript for interactions.

Now finally we see the end result in action.

Floorplan animations

The final animation challenge was to create an image carousel. Like with the floor plan section, the carousel images had to be included in the CMS so they could be updated by the client. We also wanted the images to fade in and out smoothly. The active and inactive button states and fading animations were handled through a combination of JavaScript logic that assigns individualized CSS classes and displays the appropriate images.

Carousel animations

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.

PHP mailer

Conclusion

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.

Incorporating extensive CMS integration, in combination with some of the more complex JavaScript solutions in certain sections, was a fun and rewarding challenge.