Web development, the Bigfork FUSION way

colin

Colin Richardson
Digital Design Director
08/08/2024

You have a website spec. The copy is written. Everything has been designed. There’s one problem, your customers can’t see anything yet. 

This is where the third part of our FUSION process comes in: development. It’s during this phase that we turn everything into a living, breathing website. This article explains our process and some of the terms you might come across on the way.

Who does website development?

The first thing development needs is a developer. Sometimes one person will build the website, with a second developer checking it over. Other times we split larger sites into front-end (the bit you see) and back-end (the bits you don’t).

Our development process is in-house and very hands-on. While we have tools and plugins to help, we still code websites to order. We never work from pre-made themes or “no code” platforms. These things have their place, they’re just not a fit for our bespoke offer. 

The developer(s) will review the specification and designs. It won’t be the first time they’ve seen them, so this is a refresher. If they’ve any questions they’ll clear them up with the project manager, then everything is ready to begin.

Starting the development process

A project starts by setting up a “local” development environment. The local environment is usually on a developer's computer. It’s designed to be portable, so anyone can install an exact copy if they need to work on the project.

This environment allows us to write and test code without breaking anything. During development, we store the code in a repository, or repo. 

THE POWER OF GIT

The repo uses a technology called Git. As well as being a backup, the repo is the single source of truth for the website code. Anyone involved in the project will work from the repo.

It allows us to maintain a history of all changes and who did what. And means that more than one person can work on a project at a time.

When we update the staging or production websites, we deploy code from the repo. Deploy is the term for updating the website with the latest code. So, if you hear someone talking about git repos and deployments, that’s what they mean.

The content management system

We underpin all websites we build with a content management system, CMS for short. The CMS is the thing that allows us, and you, to add and edit content on your website. It’s always the first thing we set up.

The two main systems we work with are Silverstripe and WordPress. We work with others too, but these are the main ones. We’ve refined our process over the years to set up the CMS efficiently. This includes tools to help our workflow and our go-to modules to support development. 

  • Silverstripe

    Silverstripe
  • WordPress

    WordPress

We’ll install the CMS and our tools into a development environment as described above. From this point, everything depends on the project. 

But “it depends” isn't very helpful, so I’ve described a typical process.

Templates and content blocks

We can break down a website page structure into two elements:

  • Templates
  • Content blocks

Templates mean fixed parts of the page layout, like the header and footer.

They might have editable parts such as navigation links. But the header is always at the top and the footer always at the bottom.

faraday block cropped

Content blocks are what make up the rest of the page.

Unlike templated areas, a block can be used one or more times on a page, and in any location where it’s allowed. For example, this ar is made up of:

  • 31 blocks in total
  • 6 different types of block

Types of content blocks include:

  • Rich text area
  • Carousel
  • Gallery
  • Columned content
  • Video

This list isn’t exhaustive, we create whatever blocks the design and spec call for. And we include common ones to future-proof the CMS. 

Sometimes you need new content types, no problem, we can build new blocks.

Anatomy of a block

The aim of blocks is to strike a balance between flexibility and user-friendliness.

There are two parts to every block:

  • Front-end (what people see)
  • CMS view (how you edit the block)

The front-end

We build your website front-end using code called HTML for structure, and CSS for styling. If your website was a house, HTML would be the walls and roof. CSS is your choice of kitchen tiles and paint.

There’s also JavaScript, which allows adding extra functionality and interactions. Going back to the house analogy, JavaScript is your smart lights or automatic garage door.

Check out some example content blocks:

  • block nature postive
  • block farady
  • block bateman
  • block greenerhomes

Our developers write the code to make the block match the design. Once it’s built, it’s tested across different web browsers on computer and phones. We want to make sure it’s responsive, and that it works well at different sizes.

Blocks also have in-built logic to integrate with the CMS. For example, if you leave an optional field blank, we automatically hide it on the front-end. If the block has options such as aligning an image left or right, it will cater to both options.

Front-end view of content block with code

We’ll also consider accessibility. Even if your website doesn’t need to meet an accessibility standard, we want to be sure there are no issues. For example, does text remains readable if elements overlap? And you can navigate a block using a keyboard?

And of course, blocks always need to be SEO friendly. They must support headings, alt text if there’s images, schema if it’s relevant, proper markup for anchor text, and so on.

The CMS view

Editing blocks uses the CMS view. Depending on the content, you’ll have different fields and options. But it’s all based on web forms, so if you can fill in an enquiry form, you can use a CMS.

But we understand our clients are not web designers, and they might not use the CMS every day. We always consider CMS users as much as we do website users. Our CMS design philosophy is:

  • people should be able to add content with no hassle
  • everything must be intuitive and easy to use
  • it should be flexible, but not be overwhelming
cms block

It’s important to note the CMS is not a design tool. There are platforms that support this, such as Webflow, or Elementor for WordPress. On the surface, they look like a CMS – they let you edit your website content. The key difference is they ask you to make design decisions. And need skill and knowledge to make the most of them.

Whereas our goal is to let you focus on content. Then leave the CMS to keep your website on-brand and looking the part. No special expertise needed (of course we do provide training and support).

There are other considerations like data relationships. So, strap in for a technical section.

Data relations

A data relation is best explained as when one part of your website talks to another part.

For example, news articles. These normally live on a “latest news” page. But by creating relationships, they can also appear on other pages. For example, a block that shows a “latest news” carousel on your home page.

These can be more complex too. Here are some examples:

Data relations give us a huge amount of flexibility to create custom features. The best bit is you don’t need to understand how they work. That’s for us to worry about. You can focus on what content to add.

Integrations and APIs

Another important part of modern websites is integrations.

An integration we often use is email signup for Mailchimp, a popular email marketing tool. In this case, the form allows people to subscribe to your mailing list via your website.

CRM integrations are also popular. We often build forms that send data to a CRM such as HubSpot. This data can then be collected by sales or marketing teams without having to go onto the website.

Sometimes integrations can be drop-in widgets. We take some supplied code and add it to the website. Simple.

Other times integrations can be more complicated. Many services offer an API, which stands for application programming interface. It’s a way of communicating with a third-party website, usually to send or receive data.

For example, we developed a custom product selector for a client. We wanted the final step to be a form that passed data to HubSpot. But a drop-in form couldn’t capture everything we wanted. So instead, we used the API to control the data we send.

API integrations can be very powerful tools, and we often add them for clients. In some cases, we create APIs so that other websites can speak to our clients’ websites.

This is an area where a bespoke website shines, as we have the freedom to create these kinds of things.

Bringing it all together

Quick recap, at this point we have:

  • CMS in place
  • Templates and blocks created
  • Data relations and integrations set up

The next step is to start building out pages using the blocks and adding content.

This is when it starts looking like a proper website. It also allows us to test that blocks are working together. 

Sometimes we find things like spacing need a tweak. Or we need to adjust font sizes because headlines in the design are too big for the final content.

Designs are often viewed as a whole page at once. But when you browse a website, you see it one screen at a time. So, we need to check that pages flow and make sense.

At this stage we’ll also introduce any scrolling effects. Buttons that animate. Parallax scrolling using elements that stick or move at different speeds to give a feeling of depth. Or items that slide into place as they come into view.

And we create all the pages and add content. Unless you’re adding the content. Either way, it’s ready for the first stage of testing.

Testing and quality assurance

Now everything is looking like an actual website, we deploy it to a staging environment.

Staging lets people other than the developer view the draft website. It will often be password protected to keep unwanted entities out.

Before we send you the link, we will carry out our internal testing. At least two people will test the website, including a developer and the project manager

clickup task list

We’ve a checking process that has been developed over a long time. It’s a mix of automated and manual tests, designed to pick up all sorts of issues. From content and functionality through to ensuring it’s search-engine friendly. At the time of writing, we have 34 specific checks before deploying to staging. We carry out internal user testing too, to pick up anything that doesn’t sit right.

Once we’re happy with everything, we’ll send you a login to the staging site so you can review everything. We’ll also show you the CMS and how to use it, so that you can start adding content (unless we’re doing that for you).

We expect one or two rounds of amends and feedback to get the website finalised. And when it’s set for launch, it’s time for you to sign it off.

The launch

It’s finally here. The big day. Everything is complete and signed off.

This is where the final phase of FUSION begins: deliver. Also known as going live. 

After more testing.

We expect the website to have changed since initial testing, so there’s a set of pre-launch checks. Including another round of internal user testing and finalising SEO migration.

If we’re hosting your website, we’ll also set this up now. This is the production environment, a fancy way of saying the live website.

We have a set of post-launch checks too. To make sure nothing has broken in the transition to production. And that monitoring is in place so we can keep an eye on everything.

help is here

It doesn't end here

The deliver phase is all about ongoing support. After your the site is live, we continue to track it and address anything that might crop up. And we’re on hand for support in case you spot something. Like that typo that hid through three rounds of testing.

We’re there if you need help with the CMS. Or if there’s an issue with the site. And we’ll keep an eye on performance and arrange a catch up a few months down the line to update you on how it’s going.

So, while it’s not the end of our relationship, it is the end of this article.

If you’d like to know more about our FUSION process, or have any questions, feel free to get in touch.

This article was updated on , filed under website development.

Get the latest B2B website news straight to your inbox