Following on from last week’s blog post (5 Reasons to Love Our New Brand), it’s now time to take a look at our new website! We officially launched the Adtrak site on 03.02.20 and it’s safe to say we’re big fans. It looks great, functions amazingly and has been designed with our customers in mind.
There are many reasons why you should love our website too. Here are five of them...
It’s Fast
Our website is pretty fast. Looking at its First Meaningful Paint (the time it takes to render the content in a way that provides meaning) we can see that our website loads in 1.0s on a mobile and 0.6s on a desktop. Looking further into our desktop load speed, its Time to Interactive (the time it takes to actually be able to use and interact with a website) is an impressive 1.1s.
Page speed is incredibly important. A slow loading website is likely to put off its visitors. In fact, Google estimates that if a website takes longer than three seconds to load, 41% of people will abandon it completely. Page speed is also a ranking factor, meaning websites with a faster load speed are likely to receive higher spots in the Search Engine Results Pages.
It’s Scalable
One of the main objectives of the new site is to facilitate growth. As a result, it’s important the website is scalable.
With this in mind, the site was built from the ground up using Storybook (https://storybook.js.org/). Storybook (technical jargon incoming...) is an open source tool for developing UI components in isolation for React and a variety of other languages. During the design phase, our developer, Sam Goddard, worked alongside our designer, George Wood, to design component-first, with future scalability and maintainability in mind. These were then built up as React components and tested in isolation in Storybook, ensuring the components were completely flexible with any kind of data we pass into them.
Further to this, we modelled our website on a Dato instance. Dato is a headless CMS (Content Management System) which makes it quick and easy to model new website features and update content. Using GraphQL, Dato allows you to feed content into any platform in an extremely lightweight manner; it also gives us the ability to ask for exactly what we need from the CMS and nothing more, making it easier to evolve our website over time.
Within the site design, we’ve developed pages specifically for scalability and future business development. For example, we’ve used the same service page structure throughout the site and feature two types of case study (creative case studies and digital case studies). These pages, therefore, can be easily updated and added to as required.
It’s Accessible
Web accessibility involves designing and developing a website so that people with disabilities are able to use it. This means people can see, understand and interact with a website effectively. Web accessibility will also benefit people without disabilities, such as older people, people with ‘temporary disabilities’ (such as a broken arm) and people with ‘situational limitations’ (such as bright sunlight or a slow internet connection).
The Adtrak website has been designed to be as accessible as possible. We’ve considered all users throughout the development process and checked many aspects of the site. For example, the colour contrast passes WCAG’s (Website Content Accessibility Guidelines) AA rating. We’ve also ensured the site is fully usable with just the keyboard and have used ARIA roles to make sure our website is screen reader friendly.
It’s Performance-Driven
The Adtrak website has been developed for optimum performance, both in terms of its functionality and in delivering customer acquisition. The new site has been built using the modern JAMstack (Javascript, API and Markup) approach. This is a new way of building websites that focuses on delivering better performance, higher security, lower cost of scaling and a really great developer experience.
Websites built on this type of stack are delivered by pre-rendering files directly from a CDN (Content Delivery Network). This removes the requirement to run or manage bloated web servers. This essentially means performance will be greatly improved compared to a dynamic site, since serving static HTML and CSS has a very low footprint. This, in turn, will have a range of performance benefits for our end users.
In addition, we have built the site using Gatsby (https://www.gatsbyjs.org/). Self described as a “Blazing fast modern site generator for React”, Gatsby can be used to build static sites that follow the latest web standards and are optimised to be highly performant out of the box. With it being built on React, it enabled us to easily integrate our previously mentioned React components from our Storybook instance. Gatsby also has a source plugin for Dato, making data consumption from the CMS a breeze.
It’s User Friendly
Every website we design at Adtrak goes through an intensive User Experience process. We take the time to understand our clients, their business goals and their customers, creating a website reflective of our discovery phase.
Our approach to our own website was no different. We mapped out our users, creating personas and getting to know their needs. We then created a website - including its layout and navigation - which catered to this. The end result is a user-friendly site which, in turn, will generate quality leads.
We will continue to monitor the site’s User Experience, using tools such as click and scroll maps, for example, to give us a better understanding of how our users interact with the website. We can then make changes and adjustments if necessary to provide optimum User Experience.
