How we built: Tijgerbrood.nl
by Tim Hereijgers, web developer at Tijgerbrood
Over at Tijgerbrood we have strong opinions about what the web should be. We design and build our websites to be fast, clear and responsive. Websites have been getting bulkier over the years but luckily there’s a growing counterculture of likeminded developers dedicated to a leaner, more sustainable web.
For our company website we set out to create something memorable that’s interactive and fun without compromising speed and ease of use. In this article I’ll
highlight the decisions we made and techniques we used to create a low carbon website.
View the Tijgerbrood website.
Designed to scroll
There’s more to sustainable web development than code optimization and caching. In our view, building a low carbon website starts during the design process. We opted out of using high def images or videos, focussing instead on alternative ways to engage and surprise people. The choices made during the early stages of design had the biggest impact on the eventual speed and size of the site.
We decided that the site should mainly work by scrolling. Scrolling is the most intuitive interaction on any website. Users are used to it and don’t have to think about it. Although our site is predominantly typographic it feels like there’s a lot more going on because of the animations that get triggered on scroll.
Recycling the same few images over and over
Tijgerbrood is a small operation. We work together closely with our clients. To make our site personal, we decided to plaster our own faces all over it.
The low resolution images we use are small in size and have the added bonus of creating a distinct style in the design. We cut up the images for the faces in three layers (top of the head, eyes and mouth) and reconstructed them using CSS. This way the images can be reused in various animations but are downloaded only once. Responsive images and WebP technology compress the images even further. We use SVG images where possible. We prefer to inline the SVG images instead of loading them with an image tag.
Under the hood
The site runs on WordPress, which is a great platform as long as it doesn’t get bogged down by superfluous plugins and excessive themes. We want full control over the frontend code and are picky over what libraries we use. We make sure to strip everything we don’t need from WordPress that gets included by default.
The frontend is made with plain old HTML, CSS and vanilla JavaScript. The bouncy animations are done with anime.js. This small library gives you a lot of milage when animating with JS and CSS. To prevent computing power from being wasted, we track if an element is in the viewport. Animations are paused when the element is no longer on the screen. If you’re interested in this technique check out Chris Ferdinandi’s lesson on the Intersection Observer over at the excellent gomakethings.com.
Avoid state of the art
During development we keep track of network load and CPU usage in the browser’s inspector. We use another unconventional but useful tool to test performance: the computer fan. If we hear a whirring fan it means the site is using too much computing power. At that point we go back to the code and make things more efficient or we simplify the animation.
The site was mainly developed on a 2015 Macbook pro. While this isn’t ideal for workflow it has an upside. By constantly testing the site without using the fastest computer and biggest screen we have a more realistic experience of what other people might have when interacting with our site. For mobile browsing we keep a 2016 iPhone SE on hand to test our sites on the small 4.7-inch screen.
We’re confident that a more sustainable and accessible web is the future. It’s possible to create an engaging site without draining your visitors battery and data bundle. I see a lot of impressive sites on directories like The FWA and Awwwards that unfortunately also trigger my computers fan. We look forward to seeing more web developers finding new ways to innovate with less to create more!
View the Tijgerbrood website.
