As you may or may not have noticed, the WorkingMouse website recently got a bit of a facelift (in a number of ways). We hope you’re as big of a fan of it as we are.
Why we did it
There were two core reasons for building the new and improved website.
1. Brand refresh
The WorkingMouse brand has gone through a number of evolutions as we continue to grow and learn (we’re sure this latest version won’t be the last). While the colour palette has changed slightly, so to have other elements of the brand.
Your vision, our expertise
As a services business our mission is to help our clients reach their goals. The new slogan was created with this in mind.
Every single business and every project has a vision. We want to leverage our expertise to help our clients deliver on their vision. It’s especially important in a complex industry like software development to make the most of previous learnings to guide new projects.
People at the heart of software
As a company, our people are our most valuable asset. We wanted to ensure this was a primary focus for the new brand, with plenty of photography scattered throughout the website. It was important for us to show potential clients the people that will help build their software product. This is reflected in the team page as well as generally throughout the site.
2. Improve performance
The old WorkingMouse website was built a long time ago. As with all technology, there comes a time when something newer and something better is available. That time came for the website. It was no longer necessary (or best practice) for a website to have a server side. Additionally, there were a number of tools that help with load times and hosting of images.
I’m going to do something I’ve been dreading and show you where it hurt. This is a screenshot of our old websites performance as scored by Google Lighthouse.
Let’s look at the bright side, at least SEO was in the 90’s…
Our focus was always on our clients projects but the time had come to dedicate a bit of time to our own website and specifically its performance. With a new tech stack and some talented designers and developers, it should be a breeze.
How did we go building the new and improved version?
We’ll let you be the judge of that. But we like to think the results speak for themselves…
Technology stack
After assessing a number of different options in the market, we ultimately decided to build the web pages with static HTML pages. To create a more user friendly interface and enable the marketing department to take ownership of the site, we implemented Forestry as a way of templating commonly used pages (for example blogs and projects). Working alongside this is Cloudinary - an image hosting tool. The website pulls images from Cloudinary rather than hosting it themselves, the end results being improved performance and reduced hosting costs.
The final piece of the puzzle was Netlify - a serverless platform with built in CI/CD and automated previews. Netlify enables us to move between beta and production easily and has functionality that operates similar to a CDN (content delivery network). A CDN is a geographically distributed group of servers which work together to provide fast delivery of Internet content. Essentially, by distributing content closer to each website visitor through a nearby CDN server, visitors experience faster page loading times.
Our advice if you’re looking to rebuild your website:
- Template early on
You may find that multiple pages share a common design or structure. Rather than building seperate custom pages every time, utilise templating. By creating a template that can be shared across multiple pages, it’ll make your life much easier when you look at optimising performance etc.
- Utilise third party tools when possible
There are so many useful tools that can help when building a website. The best tools to use generally depend on your level of technical familiarity and skill. For example, if you’re a small business owner that’s tech savvy, the best tool would be a website builder like Wix or Squarespace. This answer would be different for a developer who may instead look to use tools like Netlify or Cloudinary.
- CSS performs better than Javascript
Google Lighthouse penalises sites for incorporating too much Javascript (especially when it deems it unnecessary). This is because of the effect Javascript can have on load times and performance. Determine whether you can achieve the functionality you want using CSS rather than Javascript.
- Set yourself up for success down the track
Ensure you have a site that not only works for the next 3 months, but the next few years. This means having control of pages in order to update content as necessary. Your marketing team will want the ability to try new ideas using your digital storefront, the website. Keep them in mind when building the site. For us that meant integrating Hubspot forms and configuring Forestry to reduce any coding necessary.
- Create something that wow’s your audience
Your website is your audiences first impression of your company. Create an experience that wow’s them. Whether it be through an animation or through visuals, it’s important to capture and keep your audiences attention. Take a look at your average session duration to see if you’ve succeeded. I’ll take this opportunity to low-key flex with a before and after shot of our average session times.
Before: Avg Session Duration - 0:46
After: Avg Session Duration - 1:59
Hopefully these tips help with any future website development you have planned. If you’re looking to outsource the development to an agency, give us a buzz.
