Bocoup designed and built a fast, accessible, easy-to-maintain website for everyone’s toughest client: themselves.
The cobblers have new running shoes.
In late 2015, Bocoup.com was not a reflection of the modern design and development practices we were using with our clients. Moreover, the content management interface was long due for an overhaul.
Without harming developer ergonomics or long-term maintainability, we wanted to produce a portfolio with an uncompromising focus on end-user experience. We saw our website as a proving ground to build an accessible layout that feels bespoke for viewports of any size, with blazing fast performance.
Our new site brings together cutting-edge web performance tools and techniques in a flexible, maintainable way.
Powered by WordPress, Bocoup.com acts as a live test case for the responsive images implementation that landed in WordPress 4.4 core shortly after we launched, hand-tuned by the Chair of the group that brought responsive images to the web.
CriticalCSS is generated on the server as an invisible build step during deployment. Its inclusion—along with the corresponding asynchronously loaded stylesheet—is handled entirely by the server on first render. These optimizations, combined with asynchronous application of web fonts, aggressive caching, parallelized requests for static content, and more all add up to a screamingly fast render time.
While the majority of our team members are engineers at heart, it would be naïve to expect our communications team to maintain so many finely-tuned optimizations. As such, we’ve ensured that all the details of our performance features are automated. Our continuous delivery system makes updating the site as seamless as maintaining it—we use a combination of Vagrant and Ansible to ensure our local development environments match our staging and production environments. We use Hookshot to deploy commits and tags as they land in our repository.
The impact of this effort cut across our entire organization, optimizing for user ergonomics at every layer of the process: from content, to design, to development, to deployment.
Our design team brought clarity and direction to show the world what we do. Our development team made sure our content would be viewable on any device, at any connection speed, anywhere in the world. Our ops team ensured that our development team was able to focus on what they do best: development.
Together, we created a tool that empowers our entire company to participate in showcasing our contributions to the Open Web.
More work like this at Bocoup
JSI Research & Training Institute
P.O. Box 961436
Boston, MA 02196