This project was a little different because it was our website, and our own website usually falls by the wayside because other client sites come first. With this in mind we decided to treat this project like any other client project and give it the time and workmanship all of our clients enjoy. We’ve been creating, developing, and marketing websites for over a quarter of a century and we felt it was time for a new brand and company.

Name

Our first decision was the name of our company. We wanted a geographic and local name and after some deliberation we chose “Roby Web”. Unfortunately for us, while looking for the name we had checked if the domain was available, and a less than reputable domain provider had purchased the domain and wanted to charge us a premium for it. We declined.

So, we went back to the drawing board and chose “Huyton Web Services”, a name that works well for where we are located geographically and, says exactly what we do. Now we had the name, we had to create our look and feel in the form of the brand.

Brand

When we create a brand, there is a certain procedure we follow that gives us guidelines to for any digital or physical design and our first decision in brand is the tone. In our case we came up with Informative, Positive, Intellectual and Classy. All design from this point forward must adhere to this tone. From this we created the icon, logo, colours, and typography giving us the overall brand. We also wanted to take this a little further and use Illustrated image over photography that will give us a certain look & feel.

With our branding guidelines complete, we wanted to start building a website, but first we had some important decisions to make regarding tech.

Cloud hosting vs Everything else

It was time to look at where and how we would store our website and all the files and data that go with it, we needed to choose a host. With all the different types of hosting like dedicated, shared, VPS, etc. we had a lot of hosting types to choose from, and with all the companies out there doing all these types we had a lot of companies to choose from. In the past we have used Dataflame (TSOHost) for our shared/dedicated/VPS hosting and AWS for our cloud host, and we had no reason to change this. AWS has a ‘Free Tier’ account (this is NOT free; a customer can use some low power services for free) for the first year.

This does come with 2 huge downsides:

1. AWS costs per service can be very expensive.
2. AWS had a new IPv4 cost that meant a new expense.

Edit: Staying on the free tier, the cost would have been nearly $100 per month, so we moved to shared hosting for around $100 per year.

Cloud hosting also comes with another issue, the developers do not have access to the tech, they access the services. For example, we create a bucket to drop files in that can be up-to a size we choose but is only as large as the files in it, we don’t have a hard drive with an allotted space that fills up. This means we only pay for what we use, so we don’t have unused processor, memory or hard drive.

In theory, this is great, we don’t need to learn the tech, and the cost is lower because we only pay for what we use, but from experience, developers and ops need to learn what services do what, for example MySQL is Aroura in AWS but falls under the RDS system. Also, we must use different languages to use the services for example Javascript and a lambda or a yaml config instead of a bash script. Lastly, the cost adds up very quickly and can easily run into thousands.

We have experience in all the different types of hosting and for Huyton Web Services we chose to use cloud hosting because - even with the downsides - it does give access to some interesting architecture very quickly.

Sitemap & Wireframe

We had our new name, brand, domain & hosting so it was time to create the Sitemap & Wireframe. We started with the sitemap and added in the sections and pages we would need, but it quickly became apparent we’d need to separate the project into 3 phases:

Phase 1: Home, Services section (with content), About, Contact and main site.
Phase 2: Knowledge Base (with content) and moving the first content to the correct sections.
Phase 3: Project and Articles (blog) sections.

Next, we created the Wireframe to show the sections and what would be available in each including the home blocks, footer block and main pages heading sections. This was a working document and would be updated as we moved through the sections.

Design & content

We wanted to follow the brand tone here, so we started with the basic pages as a question / answer format which worked with the informative and intellectual traits. We went for strong lines and white backgrounds for the page body that looked classy, but we wanted to brand each of the 4 sections with the 4 main brand colours, so we went for a fade to white using the 4 colours.

For Typography we chose Jost as the font and added quite a bit of space and line spacing, again, classy, but intellectual for the look.

While we created the Web design, we started on the content, and not just the ‘Lorem Ipsum’ we had been using as filler text. From the sitemap we had 19 pages and 6 blocks to create content, plus each of the 4 blocks needed content. We chose to use Word as our 'source of truth' and shared the document between the content creators, so we didn’t have to wait for the Web design or CMS (Content Management System) to start on the content. We created the titles for the pages in the doc and got to work.

Knowing we needed images for each page and knowing we wanted Illustrations not photographs we worked on creating the images using the Adobe suite (and an old version of Fireworks) to create a suite of images.

Build the best

To build this site we wanted the very best tech and decided to have a CMS that the content creators, word smiths and editors could use, but we wanted to have the most performant site we could, so we used a separate front-end to the CMS backend. Having 2 parts like this means 2 separate websites and double the time and effort but gives a lightning-fast experience for the visitor and all the functionality content creators need. The best of both worlds.

For a front-end we chose to use Next.js. This tech can pull in content as it builds on the server - as opposed to the browser having to do it at load time - and send flat HTML/JS/CSS pages to the visitor, the visitor is not waiting for the site to load and then the content, so the system is even more performant. If the CMS has updated content, Next.js can check and re-build the pages, then send the new content to the visitor so changes are live almost immediately.

For the backend we could choose from a huge range of CMSs, we chose Drupal as it can be updated with content types added as needed and configured to view these types in multiple ways. Unlike some other CMSs the admin side is as configurable the front-end and not full of adverts and messages. As simple to use as it to create.

We created this using the AWS cloud with the full development cycle including canary deployment, Gitflow branching strategy and semvar for versioning. We won’t go into this here as it’s too technical, but we’ll create some articles later to show exactly how we did this.

Finishing up

Once phase 1 was up and live we still had phases 2 and 3 to complete and possibly a move to new hosting, but this was for future plans.

For this project phase 1 we created a new brand, a bespoke web design, a bespoke, headless CMS website in Drupal, with a front-end built in Next.js on AWS cloud hosting. We created content pages of around 12,000 words and 20+ new illustrated images. We created 4 animations with layered images and animated gifs.

This project took around 8 months of work while still completing client work. To date this is one of the most challenging and intensive projects we have tackled, and we would like to tackle many more like it.

Looking back and looking at the reports, this site is more performant than competitors and more functional than similar websites. It is the culmination of over 25 years experience and we can reproduce it for any clients.