Blog

We’re rebuilding our website, starting with the most important part — our team page, where we showcase our talented crew.

Our focus began here for a number of reasons. The first being that our people are our strongest asset — without them, we don’t exist. It’s also one of the first places viewers go when they visit a company website. And it’s the page on our site that has seen the most change over the last five years.

Today, we have departments that are bigger than our entire agency was back then. We’re growing and changing, and so should our website. When we first built our team webpage, we had a total of six staff. Our layout worked really well for a team of that size but not so much for a team of close to 30 now, which is continually growing.

The tactic for our rebuild is a lot different than our usual approach. Typically, we start from scratch with a blank slate. However, we’re currently working with an existing website and there are a lot of challenges that go along with that. This includes stickhandling minuscule technical changes, like removing aspects from the old site while building up the new one. So, we need to be careful that we’re not removing too much at once in a short period of time.

We have to stop, analyze everything we’re doing, then slowly slide out the new site, while stopping again to ensure we’re not breaking anything in the process.

Reaching optimal loading speed

One area of critical importance is speed. Forty-seven per cent of visitors expect a website to load in less than two seconds and 40 per cent of visitors will leave a website if the loading process takes more than three seconds. That’s a big objective. And we’re tackling this by taking our learnings from recent web projects, analyzing what worked and what didn’t and then acting on that.

One way we’re accomplishing this is using the srcset attribute — a method that provides several source images along with hints to help the browser pick the right one, which helps reduce the load speed of the website and its images.

Applying a collaborative approach 

Another unique aspect about this particular web build is our team taking a much more collaborative approach to the work. Quite often developers and designers work in silos — designers design and developers develop.

For example, a few weeks ago we sat down with Jenelle, our lead designer for the team page, and discussed our overall goals at a high level. Then we dispersed, spent some time creating sketches and building ideas on our own and ultimately came together to share those ideas and move forward. As developers, this was a great help because it allowed us to see the big picture — empowering our team to make critical build decisions.

Taking a different track when it comes to JavaScript

We’re also attempting to build this site with as little JavaScript as possible.

Since most modern browsers auto-update themselves and become more uniform in how they run JavaScript, there’s less of a need for libraries such as jQuery. jQuery works well if you are building a project with a large amount of front-end code, like a robust site or application. However, if you’re building a small to medium library like us, Vanilla JS is a more suitable option at this time for this particular project.

Think of it this way, jQuery is akin to buying your dream home while Vanilla JS is akin to building it. Building it yourself means it has exactly what you want and none of what you don’t want — there isn’t a single brick wasted. That’s not to say we don’t utilize jQuery for other projects and don’t intend to in the future. It’s simply our approach at this point in time for the outcome we’re trying to achieve.

Sure it involves a bit more work, but if you haven’t figured it out yet — we’re not not afraid of a little elbow grease.