A bespoke, custom-coded website for a leading British building services engineering consultancy - built to showcase 30 years of nationally and internationally significant projects, from RAF bases and Olympic venues to $8 billion airport terminals.
The client
Osborn Associates is a British building services engineering consultancy founded in 1994, delivering MEP engineering, fire engineering, fire protection, project management, sustainability consultancy and building validations across complex built environments. Its portfolio includes Heathrow Airport, the London 2012 Olympic Park, the Royal National Theatre, King Abdulaziz International Airport and GSK's world headquarters. The firm operates from five UK offices - Kent, London, Portsmouth, Manchester and Glasgow - with project reach across Europe, the Middle East and Australasia.
The brief
The firm's previous website was a Squarespace template - functional, but visually underwhelming and not reflective of the calibre of work being delivered. The brief was to build a production-grade website from scratch that positioned the firm as the serious, experienced consultancy it is - premium, architectural and editorial in feel, with every project case study given the space it deserves. The site had to work as hard on a client's phone as on a partner's desktop, with the technical foundations right from day one.
What I built
A complete 42-page custom site coded from scratch in HTML, CSS and vanilla JavaScript - no CMS, no page builder, no framework. It is hosted on Cloudflare Pages with GitHub version control, giving a fast, secure site with zero ongoing platform fees. The visual system is built around a cinematic dark palette of deep charcoals, warm stone and muted blue accents, EB Garamond and Hanken Grotesk typography, and restrained film-grain textures - designed to feel like a premium architecture studio, not a template.
A full consultancy site
A cinematic homepage, five about-section pages, a services landing page with six individual service pages, a filterable projects grid and a contact page - each with its own bespoke layout.
Twenty-five case studies
Every landmark project given its own editorial page, all following one consistent template and linked in a continuous chain that loops through the full portfolio.
Built for every screen
Developed and tested from desktop down to mobile, with dedicated iPad portrait and landscape breakpoints so nothing looks like a broken desktop layout on a mid-size screen.
Every page carries the SEO groundwork - a unique title and meta description, Schema.org ProfessionalService structured data, Open Graph tags with absolute image URLs, canonical tags, a web app manifest and proper heading hierarchy. A submitted sitemap covers all 41 indexable pages with priority weighting, and the 404 page is set to noindex.
Twenty-five case studies, one editorial system
The heart of the site is the project work. Each of the 25 case studies follows the same editorial template: a cinematic hero image, a key-facts strip, then a two-column layout with a sticky sidebar of highlights alongside long-form content covering the scheme, the firm's role and the technical challenges. Each page links straight to the next in a chain that loops through all 25, so a visitor who lands on one project is gently pulled through the rest.
To protect accuracy, the project content was migrated word-for-word from the original pages - the detail on a landmark scheme is not something to paraphrase and risk getting wrong.
Thirty years of landmark work, finally given the space it deserves.
The results
The site launched as a complete replacement for the previous build - a production-grade, fully owned website that finally reflects the scale and quality of the firm's 30-year portfolio. Every page is fast, accessible and search-ready, with no ongoing CMS licence, no platform dependency and no hosting fees beyond the domain.
The build scores near-perfect across the board on Google PageSpeed Insights - the same tool anyone can run against the live site:
Google PageSpeed Insights, desktop - 1 July 2026.
Just as importantly, the site is fully owned by the client - no platform lock-in, no recurring software costs, and a codebase clean enough that any competent developer could pick it up tomorrow. It is fast, it is theirs, and it is built to grow with the consultancy.
If you run an engineering firm, consultancy or professional services business and your current site does not match the quality of the work you deliver, this is the kind of build I do - see more recent work, or read why a site does not rank.