A spread of American bar food covers a wooden table with green onions and sauces in the spaces between the main entrees. White text in the center reads Farm To Table Street Food.

Block 16 Website

Full-stack development, CMS design, Animation, Facebook API integrations, video embedding, and performance optimization.
‍
View Live: https://block16omaha.com/
Project Overview:
Block16 is an Omaha-based, farm-to-table restaurant that is famous for its outlandish daily specials and hearty menu options. In 2015 Alton Brown named Block16 as his #1 burger choice in all of America in an article for USAToday. With the influx of attention, they wanted a visually stunning website to help encourage more patrons to choose Block16 while still highlighting their restaurant's values, menu items, and staff.
My role within the team:
As the development lead for this project, my role covered everything from start to finish. Full-stack development including database configuration, CMS design, and front-end development. This included implementing high-quality video backgrounds, building out custom features such as automatically detecting the closing time of the restaurant to alert customers when to stop ordering, as well as pulling the chef's daily specials off of their Facebook page and inlining them directly to the homepage.
An iphone, an ipad, and a macbook show the Block16 website's various pages at different sizes, it is image focused and shows pictures of delicious food.
Technical Challenges
Creating a website that was bursting with imagery, but keeping the site performant was no mere undertaking. Alongside making an easy-to-use, yet robust CMS dashboard.
The biggest challenge of the Block 16 website of the site was to make the food look good, make Block16 look even better, and ensure the CMS remains usable by two chefs who had never touched a website before. This was accomplished by leveraging WordPress along with Advanced Custom Fields to create a pseudo page builder two years before the Gutenberg block system had been implemented. This system allowed our team to create reusable code blocks which could be added, removed, or rearranged within pages at the whim of the restaurant owners without having to worry about them breaking functionality.

The second biggest hurdle was ensuring that the site was performant for mobile devices. Having a content-rich website full of high-resolution food pictures alongside custom illustrations and video content meant that the site was going to be weighty in terms of page load. This was a problem because, as a restaurant site, a very large portion of visitors are going to be viewing the site from their phones (over 70% according to our metrics at the time), meaning we needed the site to load instantaneously over 3G (or slower) speeds on any device. I ensured that this site had a less than one second load time by leveraging progressive enhancement, image lazy loading, server-side caching, and intelligent font handling so that regardless of visitor device the site would be instantly available so that the restaurant wouldn't lose potential business just because the site was taking too long on their phones.
Four images in a grid show a bunch of root vegetables, a close up of a hamburger, the restaurants logo, and of the two chefs with their dog sitting in the grass.
Designed for their specific business needs
The Block16 website was directly designed with one goal in mind: to help this small business succeed. We had to push the site further than just an attractive paint job with high-quality photos and phone-accessible layouts, we needed to ensure that the website was seen as a tool for the restaurant to leverage to bring in and maintain patrons for the next roughly ten to fifteen years. To empower Block16 to accomplish this, we sat down with them and pinpointed two major features that this website needed to truly serve its patrons: we needed to ensure business hours were the most prominent feature on the page, and we needed interactive specials to show off their ever-changing menu.
Clear, Dynamic Hours of Business
According to our research, most people visit restaurant websites first for their menu, and second to see if they're currently open. To provide a clear indication of Block 16's open status, I created a javascript block that checks the guest's local time and cross-references it to the restaurant's hours. If Block 16 is open the website informs the guest for how much longer, and if the restaurant is closed the messaging swaps to indicate when then the next open time will be.
A closeup of the website's store hours is shown, demonstrating what the site looks like when the business is open vs when it is closed.
Automated Daily Specials
Block 16 is renowned for its daily, bizarre culinary specials, from "chicken and waffle cone stuffed burritos" to their "crab rangoon hot dogs". This would require them to interface with the website often to update, so instead, we created an automatic system that pulls their special from social media and formats the special to match the website's homepage– allowing the chefs to focus on making great food while the website automatically reflects their creations.
Two images display what the site's Daily Special feature looks like, with a title and description of what the lunch special is for that day.
Image Focused Layouts
After ensuring that all business needs and accessibility concerns were met, we then got to have fun implementing high-quality photography from a local photography studio to let the beauty of the restaurant, food, and people shine through. Block16 is a farm-to-table restaurant that puts its heart and soul into its menu and at the end of the day, the images of the food itself can do an enormous amount of heavy lifting when it comes to enticing would-be patrons to choose Block16 over other food options. We leveraged progressive enhancement to ensure that embedded videos loaded with minimal impact to mobile visitors, and ensured that all images were loaded to ideal sizes relevant to visiting devices to lower the overall page load weight while keeping speeds optimal throughout.
Three mock phones demonstrate three different areas of the Block16 website, the one on the left demonstrates the home page which shows a large table full of food, the middle one demonstrates the menu showing off the pork roll and chicken thighs, and the final phone demonstrates the about page which shows two people embracing in front of a barn.
Responsive Video Footer
One of my favorite features of the site is its responsive, video footer of a burger getting fried from within the restaurant's kitchen. From a technical perspective, videos can be cumbersome for page weight, especially for mobile visitors, but our team managed to create a short, looping video that is only 2.3MB in size with all of the restaurant's information and social media accessible atop it.

I've rebuilt a version of the footer below, please feel free to resize your current browser and check it out!
The company's logo along with hours of operations and a link to their location via Google Maps.
Links to the restaurant's social media, including Facebook, Instagram, Youtube, and Twitter. Below is credits to the people who worked on the website.
LinkedinCodePenInstagram