It all started with a message on the Huyton Web Services contact page. 

North Huyton Communities Future (NHCF) contacted Huyton Web Services with a request for a small website and sent a list containing the pages they might like. They also sent a contact number and asked if we could contact them if we could help.

We do get opportunities from clients looking to work with us using the contact page, but more often than not we get spam or, more recently, scams. Most of our work is from word of mouth from clients that we’ve worked with before via phone call, so this was interesting from the start. If you are looking for a web app or website, contact us any way you are most comfortable, and we'll try to help in any way we can.

We took a quick look into the number and email address, and all looked real, so we contacted the client.

The client, NHCF, have been around for almost 25 years and have tried to create a website before, but that was never completed. It seemed the site was not completed due to lack of content, so they didn't want the new site to end up in the same way. When we investigated this a little more, it seemed the client didn't really have the time to create all the content they wanted to add, and the site creation seems to have simply fizzled out and was just left.

This is almost a 'normal' state for a website, most people don't realise the amount of time it takes to create something like a website, even just a few pages is a huge time-sync for the client, especially one that does not write lots. If the first site had this issue, we wanted to make sure from the beginning the new site wouldn’t end the same way so we went over the reasons for the past failure and how we would succeed this time:

1. The client had a person to focus on the website. In the past it was the client simply trying to fit the time to ‘write content’.
2. The site was going to be static; it would not 'wait' for the client to add content before going live, the content was part of the site.
3. We would push for the content and help create where needed.

We can help with content creating sitemaps, lists of pages to create, even a page of headings for the client to fill in, but when it comes to a business, the client is the person to talk about it, not the developer or development team.

With this knowledge, we moved on to design.

Design

The logo and colours, name and straplines had all been created a long time ago and at the time a screen had probably not been the focus, so nothing was web focused.

A few notes on the logo:

1. Text is squashed into a small area, so cannot be read as a small logo.
2. Colours are difficult to look at together (bright red and bright blue), so difficult to read on a screen.
3. Text is in different font weights, so can be difficult to read
4. Text is in different cases, so can be difficult to read
5. Logo could not be broken up and must look as it is, so using the symbol without the text was not possible.

We had a logo, colours, a type of font (not the actual font) and lots of interesting text ready to go, so even though it might not have been exactly perfect for a website, we had the beginnings of a strong brand to work with.

Geography

NHCF was looking to work with someone local, someone they could speak to in person and drop in for a coffee if they wanted to go over something. We have worked with other clients in the local area and are happy for them to drop by and chat about the work, so this was a great start to the relationship.

Also, we always offer a discount for local businesses so if you're in Liverpool or the northwest of England, we can usually beat other prices, even if price isn't the main factor, as was with NHCF.

We now had the design and basic sitemap, we'd worked out the price and why it may have gone wrong in the past and we knew the type of site was a static one. Now we needed to get technical.

Tech

We wanted the most performant website we could create today while making sure the site was SEO friendly and obviously looked good. We are also a proud bunch, so the code had to be correct, SOLID, no 'code smells', etc.

We started with React, because for UI on the web it's the best at the moment. We wanted to take it a bit further and have the server do some of the work, not the client (phone, laptop, desktop, not our customer!). We chose Next.js as that seems the most performant with Server-Side and Client-Side rendering. 

Next, we wanted a UI library. This is the most controversial subject here, but we did not want to use all 'inline' CSS like some libraries have gone with, we wanted to split the style and layout for readability, as good code should be, so we chose Bootstrap and Bootstrap React (not ideal, but still the best option). 

For animations, we went with Framer Motion and CSS, as expected.

We chose to create a brand-new image viewer and meta tags components for this project as the ones we have need some love.

For hosting we chose Google Firebase. We chose this because it is almost free for a small website and works with Next.js very well using the newer App hosting (not the old hosting) and even the automated image sizing is working now so we could have the site create its own thumbnails and resize to best quality. We could have used any number of hosting types (including shared) and service companies (like AWS), but Firebase offers simple integration with Next.js and GitHub (our Version Control Hosting). 

For emails (from the contact page) we went with Mailersend so we could get things up and running quickly with a trial plan and the Free plan is generous at the moment.

Bringing it all together

We created a local version and installed Next.js. We then created the repository on GitHub and connected the local version, so we have backup, version control and ability for teams to work on the project. We created the develop and master branches and made sure we could create feature branches in the IDE (Integrated Development Environment) and merge in correctly (rules in place).

Next, we created the project in Firebase, added the App hosting and setup the GitHub integration in just a few clicks. We could now create a feature, merge it into develop with other features and test, then merge develop into master, and the project would "go live" with the new version. Nice.

To make sure the search engines didn't crawl the site and start indexing the test pages and test data while we developed, we created a 'basic auth' using Next.js middleware so a username and password was needed to see the site, we then told NHCF the username and password so they could see the progress and search engines couldn’t index our ‘fake’ content.

Development started and as content was sent, we created pages around this content. As we developed the client could see the work and give feedback on the fly, while development and testing could happen locally and on the development branch without affecting the completed work.

Domain name

The one issue was the domain name nhcfonline.org.uk. This has been around for a long time and is on a .gov website so we didn’t want to lose that domain. Unfortunately, the domain was in the hands of the previous developer. We created an account on Names.co.uk and sent the details to the previous developer. The previous developer was very helpful and transferred the domain without any fuss, so we simply added the DNS entries for Firebase and Mailersend and we had everything in place.

Finishing touches

Once the content was in and the site was complete, we had a last session with the client to make sure all was correct, and we put the site live by removing the username and password for it. All that was left was to add it to Google Analytics and Google Console and the site was complete.

Next steps

It was then up to NHCF to let people know about the site going live, they chose to do this with a story on LinkedIn and the rest would be up to search engines and AI to get the content to people. If NHCF need help with any other web projects they can rely on Huyton Web Services to be there. If you need anything web, send us a message and we could start working with you today.