We recently released a new version of our site. The goal was to better showcase our skills, personalities and values as a company. It was super fun to design and build, so we thought we would walk you through some details about our favourite bits.
"Marie kondoing" the brand
Before we began redesigning our site, we took the time to tighten up our brand. We still loved our original logo concept and the overall direction of the brand colours but felt they needed tightening up.
Our old logo seemed too fussy, so we simplified it by removing unnecessary details. We think this makes it more memorable and easier to use in different formats.
The brand colours also got some attention. Like the logo, we wanted to remove some cruft, so we cut down the number of colours in our palette and centred everything around our brand pink, which we call "cherry lemonade", and the brand green we call "clean green".
Open with a bang!
First impressions are important, so we wanted a fun and fancy interactive header with animations that immediately captured people's attention. Once the page has loaded, the different elements of the header progressively animate in.
Each letter of the H1 element is animated individually to create a satisfying slidey effect (that's technical terminology, we promise) while the rest of the components build in around them.
"Pixel" is half of our name, so we've built an animated oversized pixel component that transitions in and ripples repeatedly and is used in lots of places throughout the site. The pixels are SVGs making them easy to size and animate and are generated randomly when the page loads. We love generative things, so we couldn't resist sneaking something generative into the site. For those who enjoy clicking around aimlessly, clicking anywhere on the pixel grid causes the pixels to regenerate from your mouse position.
anime.js over GSAP
We chose anime.js for our animations rather than GSAP because anime.js is 6.9kb, and GSAP is 23.2kb. We didn't need all of the power of GSAP, so we always prefer the lightweight option. When choosing between libraries, we use bundlephobia.com to compare the packages. Keeping the bundle size as small as possible helps us to keep the site super quick.
Animating SVG lines with stroke dash offset
Moving down the homepage brings you to our services section, where our services are described. Squiggly dashed SVG lines are drawn between the areas, and the rest of the content is revealed as you reach it.
anime.js makes drawing really easy by animating the stroke dash offset, and we use the browser's built-in intersection observer API to trigger the animations when the elements come into view.
We also added in each of the service icons to add a bit of va-va-voom, give the section a bit of spice and once again show our personalities.
CSS animations
We try to only use libraries when the browsers native APIs aren't enough. In the case of our portfolio item animations, we didn't need anime.js. Instead, each portfolio item is made of a few decorative DOM elements animated using vanilla CSS animations, the same can be said for the testimonials section. Intersection Observer makes an appearance again to trigger the animations when they become visible.
Customised open graph images with Puppeteer
When we link to our content on social media, we now have customised preview images (open graph images) that give you a better idea of the page's content and hopefully make it more appealing to click and more professional.
How we do this is probably worth a blog post in itself, but in summary, we use the same components we have already built for the rest of the site, render a custom page using Puppeteer in a cloud function, and then cache the result in Cloudinary.
Optimising for performance
We always preach the benefits of a fast performant site, so it's crucial our site achieved those goals.
Striking a balance between performance, fun, and interactivity can be very tricky. If performance wasn't an issue, we would be tempted to go mad with animations and interactive elements, but each ingredient you add increases page weight and rendering time.
Using Nuxt in full static mode gave us a great starting point, but we used a few other tricks to eek out those last lighthouse points.
The first was to use the vue-lazy-hydrate package to selectively delay the page hydration in certain sections. If you don't know what "hydrating", it's basically the point where Vue takes over control of the statically generated HTML sent from the server to add interactivity. By default, this happens as soon as the JavaScript finishes loading and can hurt performance. Vue lazy hydrate allows you to tell certain elements to hydrate only when required and can really decrease input latency and time to interactive.
Another trick we found really helped was using the new CSS property content-visibility. This allows you to delay the rendering of specific chunks on the page by adding content-visibility: auto. When you have a long page with lots of elements like our homepage, we found this made a big difference to the time the page spent rendering on load.
Finally, we added a service worker to make loading almost instantaneous once the site has been loaded once before, as well as making it work offline. This is made ridiculously easy by adding the Nuxt PWA module.
Other fun touches
We really wanted this new site to showcase our personality and our work; we don't like to think of ourselves as just another web agency. To help us do this, the superb Alex Slack created us some unique team illustrations with a fun nod to Pixel and Glitch on hover!
We had a great time designing and building our new site, and we hoped you enjoyed reading about it!
Zef and I are constantly talking about different ideas and "things" we want to build and projects we want to start. Over the years we have started countless side projects but have finished only a few. It's hard to keep side project momentum around busy lifestyles and full-time jobs.
To mark the occasion of earth day, we have decided to make any of our future sites or apps carbon neutral by planting trees every month to offset their emissions.
