Web Developer Case Study

They are a highly talented team who are consummate professionals, extremely knowledgeable, and very quick and easy to communicate with despite being on the opposite side of the world. Natalie Howard, Scissors

Scissors build intuitive staffing software. It helps recruiters to save hours on workforce management. They're based in Auckland, New Zealand and found Pendigital through CloudCannon.

It's been great working with Scissors to produce their new website. They're a great team and it was a joy working with them on this project.

Whilst I could talk about the sites fast performance. Or its design that focuses on strong customer messages. And it's highly scoring accessibility. Or how happy they are with the site...

On this occasion, I want to write about two important aspects of the website build. The unique, bespoke (and sometimes complex) components and the image optimisation.

Let's talk about image optimisation first...

Image optimisation - the good and the bad

If you want your website to perform, then you need to nail-down image optimisation. Images are the number one culprit for slowing down your site.

Remember, Google loves fast sites... so if you want to rank well then you need to sort this.

If you run a Google lighthouse performance check on your site and you haven't sorted your images. Then it's likely to highlight images as a fix to speed up your site. Firstly, lighthouse might say: Serve images in next-gen formats.

This means to support other image types as well as jpeg or png. My default goto is the webp image format and then to fall back to jpeg if not supported by the browser.

And if you're not using responsive images, then Google Lighthouse is going to say: Properly size images.

What does this mean? It means, that on mobile you're using images which are way too big for the smaller screen size.

OK, so now we find ourselves in a situation where we need to create an image for desktop and mobile. Plus we need to create a jpeg and a webp version. That's four images per component!

This is what I wanted for Scissors, so that their website would perform. It's essential for speed. That's the good!

What's the bad? Well, this puts an extra burden on editors to create four images for every image-based component. That's definitely not good.

In the early days of working with Scissors we discussed solutions to the above. So I was keen to create a solution that provided the good and removed the bad!

If you have read some of my other articles, you'll know that I love static site generators. Jekyll has been my workhorse since 2017. There are a couple of image compression plugins for Jekyll out there. But when one of them starts of by saying: "Image compression is hard" it makes you feel that it's going to be an uphill struggle.

I started to look at the Eleventy static site generator. I had read that its super-talented creator, Zach Leatherman, had written his own image compressor plugin for Eleventy. Along with built-in pagination, I didn't need much persuasion to present this idea to the Scissors team.

*In fact, I built a Jekyll and an Eleventy site alongside each other -*just in case!

Scissors have in-house javascript developers so they gave me the go ahead to use Eleventy. This was a much better fit for them.

So, I implemented the site using Eleventy and its image optimisation plugin. Scissors' editors can now upload massive jpeg images. And during the build process, they're resized and converted into webp formats as well. So, they don't need to worry about the many images needed. Life is much easier for the editor and Google Lighthouse is happy too.

Actually, Eleventy can't take all the credit. Whilst Eleventy can handle very large images, it's going to affect build times. That's only common-sense... it takes Photoshop longer to resize an 8mb image rather than a 1mb image. So it's not a criticism of Eleventy.

CloudCannon has a configuration option that limits the size of images uploaded. This happens whilst the image is uploading... so you set a max size for the image and then Eleventy does the rest. BTW, CloudCannon is a fantastic content management system for Jamstack built sites.

I would definitely recommend this setup and I will be using this again.

Bespoke components

These days I see a lot of page builder type websites. They're great for quickly producing websites. The trouble is... you have to make do with their component options.

Scissors needed bespoke components that would succinctly get their messages across. Some of the components are complex and needed bespoke javascript to power them.

This is one of the key points that sets Pendigital apart from your everyday web designer. We're very happy to build components from the ground up. So that they totally meet your needs.

Let's have a look at a few of the bespoke components that we built.

Multi-selector Component

This component allows users to navigate from panel to panel. Here, it's used to succinctly communicate how the Scissor's software benefits many people.

The nav changes for mobile users into a slider... allowing users to swipe to the button needed.

Stats Component

You often see stats building as the user scrolls but they nearly all follow the same design format... all in one horizontal banner.

Scissors needed something a little bit different. And you can see the component here in action.

Using the CloudCannon UI Scissors can add as many stats as they like. They can also change the statistic type to all kinds of characters, e.g. %, $, plus other units!

Steps Carousel

Scissors needed to communicate the four steps users take when using their software. The steps needed screenshots and a simple text message: headline, paragraph and some bullet points.

You can see it in action here.

It has lazy loading on the images for speed. And a subtle animation on the image when it becomes active.

If you're reading this and need something a little bit different; drop us a line to have a chat.

Full featured blog

The site also had a blog that includes categorisation and tags... the same functionality as WordPress but without the slowness of a dynamic website.

This is another great feature of Eleventy. Tags are built-in. Tag your blog content and Eleventy automatically creates a listing page for articles with that tag.

Check out the blog here.

It's also worth noting that Jekyll also provides support for tags and categorisation... but the key difference... is that Eleventy has built-in pagination.

Block builder pages

I set up Scissors' website to take full advantage of CloudCannon's structure arrays. Without getting into tech jargon... it means that Scissors can build complex landing pages by choosing blocks from their library of components. Re-order... and also restyle for some components.

Other features include:

• Minimal code - only 13kb and 14kb of gzipped javascript and css respectively.
• Accessibility standards implemented throughout. E.g. skip to content, navigate by keyboard, semantic tags etc.
• Integration with social media OG tags
• Social media sharing from blog posts
• An easy-to-use content management system, courtesy of CloudCannon
• Video mouseovers for the team bios - I love this! Scissors' great idea...
• And more

Read the 5/5 review

You can read the 5 out of 5 Google review here.

Thank you to Scissors for choosing Pendigital to design and build their new site. It was a great experience. And the time difference made us super-effective... as work was being completed right around the clock!