SOFTWARE DEVELOPMENT

Building the new and im­proved WorkingMouse web­site

As you may or may not have no­ticed, the WorkingMouse web­site re­cently got a bit of a facelift (in a num­ber of ways). We hope you’re as big of a fan of it as we are.

Why we did it

There were two core rea­sons for build­ing the new and im­proved web­site.

1. Brand re­fresh

The WorkingMouse brand has gone through a num­ber of evo­lu­tions as we con­tinue to grow and learn (we’re sure this lat­est ver­sion won’t be the last). While the colour palette has changed slightly, so to have other el­e­ments of the brand.

Your vi­sion, our ex­per­tise

As a ser­vices busi­ness our mis­sion is to help our clients reach their goals. The new slo­gan was cre­ated with this in mind.

Every sin­gle busi­ness and every pro­ject has a vi­sion. We want to lever­age our ex­per­tise to help our clients de­liver on their vi­sion. It’s es­pe­cially im­por­tant in a com­plex in­dus­try like soft­ware de­vel­op­ment to make the most of pre­vi­ous learn­ings to guide new pro­jects.

People at the heart of soft­ware

As a com­pany, our peo­ple are our most valu­able as­set. We wanted to en­sure this was a pri­mary fo­cus for the new brand, with plenty of pho­tog­ra­phy scat­tered through­out the web­site. It was im­por­tant for us to show po­ten­tial clients the peo­ple that will help build their soft­ware prod­uct. This is re­flected in the team page as well as gen­er­ally through­out the site.

2. Improve per­for­mance

The old WorkingMouse web­site was built a long time ago. As with all tech­nol­ogy, there comes a time when some­thing newer and some­thing bet­ter is avail­able. That time came for the web­site. It was no longer nec­es­sary (or best prac­tice) for a web­site to have a server side. Additionally, there were a num­ber of tools that help with load times and host­ing of im­ages.

I’m go­ing to do some­thing I’ve been dread­ing and show you where it hurt. This is a screen­shot of our old web­sites per­for­mance as scored by Google Lighthouse.

Let’s look at the bright side, at least SEO was in the 90’s…

Our fo­cus was al­ways on our clients pro­jects but the time had come to ded­i­cate a bit of time to our own web­site and specif­i­cally its per­for­mance. With a new tech stack and some tal­ented de­sign­ers and de­vel­op­ers, it should be a breeze.

How did we go build­ing the new and im­proved ver­sion?

We’ll let you be the judge of that. But we like to think the re­sults speak for them­selves…

Technology stack

After as­sess­ing a num­ber of dif­fer­ent op­tions in the mar­ket, we ul­ti­mately de­cided to build the web pages with sta­tic HTML pages. To cre­ate a more user friendly in­ter­face and en­able the mar­ket­ing de­part­ment to take own­er­ship of the site, we im­ple­mented Forestry as a way of tem­plat­ing com­monly used pages (for ex­am­ple blogs and pro­jects). Working along­side this is Cloudinary - an im­age host­ing tool. The web­site pulls im­ages from Cloudinary rather than host­ing it them­selves, the end re­sults be­ing im­proved per­for­mance and re­duced host­ing costs.

The fi­nal piece of the puz­zle was Netlify - a server­less plat­form with built in CI/CD and au­to­mated pre­views. Netlify en­ables us to move be­tween beta and pro­duc­tion eas­ily and has func­tion­al­ity that op­er­ates sim­i­lar to a CDN (content de­liv­ery net­work). A CDN is a ge­o­graph­i­cally dis­trib­uted group of servers which work to­gether to pro­vide fast de­liv­ery of Internet con­tent. Essentially, by dis­trib­ut­ing con­tent closer to each web­site vis­i­tor through a nearby CDN server, vis­i­tors ex­pe­ri­ence faster page load­ing times.

Our ad­vice if you’re look­ing to re­build your web­site:

  1. Template early on

You may find that mul­ti­ple pages share a com­mon de­sign or struc­ture. Rather than build­ing seper­ate cus­tom pages every time, utilise tem­plat­ing. By cre­at­ing a tem­plate that can be shared across mul­ti­ple pages, it’ll make your life much eas­ier when you look at op­ti­mis­ing per­for­mance etc.

  1. Utilise third party tools when pos­si­ble

There are so many use­ful tools that can help when build­ing a web­site. The best tools to use gen­er­ally de­pend on your level of tech­ni­cal fa­mil­iar­ity and skill. For ex­am­ple, if you’re a small busi­ness owner that’s tech savvy, the best tool would be a web­site builder like Wix or Squarespace. This an­swer would be dif­fer­ent for a de­vel­oper who may in­stead look to use tools like Netlify or Cloudinary.

  1. CSS per­forms bet­ter than Javascript

Google Lighthouse pe­nalises sites for in­cor­po­rat­ing too much Javascript (especially when it deems it un­nec­es­sary). This is be­cause of the ef­fect Javascript can have on load times and per­for­mance. Determine whether you can achieve the func­tion­al­ity you want us­ing CSS rather than Javascript.

  1. Set your­self up for suc­cess down the track

Ensure you have a site that not only works for the next 3 months, but the next few years. This means hav­ing con­trol of pages in or­der to up­date con­tent as nec­es­sary. Your mar­ket­ing team will want the abil­ity to try new ideas us­ing your dig­i­tal store­front, the web­site. Keep them in mind when build­ing the site. For us that meant in­te­grat­ing Hubspot forms and con­fig­ur­ing Forestry to re­duce any cod­ing nec­es­sary.

  1. Create some­thing that wow’s your au­di­ence

Your web­site is your au­di­ences first im­pres­sion of your com­pany. Create an ex­pe­ri­ence that wow’s them. Whether it be through an an­i­ma­tion or through vi­su­als, it’s im­por­tant to cap­ture and keep your au­di­ences at­ten­tion. Take a look at your av­er­age ses­sion du­ra­tion to see if you’ve suc­ceeded. I’ll take this op­por­tu­nity to low-key flex with a be­fore and af­ter shot of our av­er­age ses­sion times.

Before: Avg Session Duration - 0:46

After: Avg Session Duration - 1:59

Hopefully these tips help with any fu­ture web­site de­vel­op­ment you have planned. If you’re look­ing to out­source the de­vel­op­ment to an agency, give us a buzz.

ABOUT THE AUTHOR

Yianni Stergou

Marketing en­thu­si­ast and FIFA ex­tra­or­di­naire

Get cu­rated con­tent on soft­ware de­vel­op­ment, straight to your in­box.

Migration vs Rebuild

12 November 2018

The top tech­nol­ogy frame­works you can use to build a mo­bile app

21 January 2020

How does end of life soft­ware im­pact you?

10 November 2020

Your vi­sion,

our ex­pe­ri­ence

Book an con­sul­ta­tion