VBF Legacy Site (2013-2018)

Site development for Vita Brevis Films

Background

Vita Brevis Films is a Salt Lake City based film production company shooting short videos and commercials for clients such as Red Bull and Adobe. Working closely with the marketing staff at VBF was exciting and collaboration was key as we explored various layouts, features, and functions for the site.
Left: grid as it is on the homepage. Right: drag and drop builder in the backend

Home page grid

The most robust feature is the grid on the home page. Not only does it include complex overlays, I needed to set it up in a way they could manage it themselves. I employed the use of a plugin called Media Grid. This allowed for a drag-n-drop interface in the back end where they could specify the size and positioning of each block in the backend of WordPress. The overlay itself was fairly complex as well. Pulling dynamic data from the back end including post number, category, post link, excerpt, etc. The end result is a beautiful responsive display of their most recent projects. In the process of customizing the overlay, I reached out to the plugin developer for some help. After reviewing my code and seeing the result, he noted that it was the most complex overlay he's seen implemented in his plugin.

Other challenges and functionality

Another feature included a showcase section in which they could list videos when clicked would show up in the player at the top. Since loading 12+ embedded videos on page load is a performance nightmare, each video is loaded only after clicking play on the top poster.
Being a photography company, image quality was very important on this site. JPG compression can be helpful for typical websites but when their clients expect crisp camera work, VBF needed to have high resolution images across the whole site. The challenge with this approach, as with most sites, is mobile performance. There's no need to load a 2,000 pixel wide photo on a phone. To address this, I created options for them to add smaller mobile versions of each featured image, to swap automatically if the user is on mobile.

Conclusion

VBF has seen enormous success with this site. Now on their 41st blog post, they have done an excellent job curating the content and maintaining readers' engagement. This project opened up the door for many more websites with them and their clients, including a site for Redman Movies equiment rental website.