Case Study - Clarke's Construction

Categories:

Design
Development
Performance
Eleventy
CSS
JavaScript

Introduction

Montagne Noire Web Studio recently completed the design and development of a new website for Clarke’s Construction, a respected building company based in Andover, England. Since 2014, Clarke’s Construction has completed over 500 projects across Hampshire, specializing in custom homes, extensions, and hardscaping solutions.

I worked alongside Test Valley Digital, a British web agency led by CEO Ethan Hawes. Having partnered with Ethan on multiple development projects in the past, Montagne Noire Web Studio was tasked with finalizing the design and taking the lead on development. Together, we delivered a modern, high-performance website that effectively showcases the company’s expertise and portfolio.

Project Goals

The primary objectives for the new website included:

Creating a modern design that reflects the quality of their construction work
Establishing a visual identity that aligns with their brand values
Highlighting their extensive service offering and their portfolio of completed projects
Developing a responsive, user-centric layout optimized for all devices
Improving site performance through technical optimization

Design Phase

Once the client had communicated their initial specifications, the design phase began with establishing a visual direction centered around Clarke’s Construction’s primary brand color and their need for a clean, modern aesthetic. After Test Valley Digital designed the first desktop layout draft, I took responsibility for designing the mobile layout and tidying up the last details. Our tool of choice for this design phase is Figma, allowing for fast prototyping and efficient collaboration.

Using the comments on Figma to communicate easily.

Using Figma as a design tool

The design process included:

Initial wireframing - Creating the basic structure and layout. Each page gets a frame for mobile and desktop viewports.
Visual mockups - Developing high-fidelity designs using built-in tools to ensure consistent color schemes, spacing, typography etc.
Responsive design - Starting from the simple mobile one column system, we then create the desktop design which often requires more complex layouts.
Giving contextualized feedback - Leaving comments on files and prototypes for fast feedback loops between PM, designer and client.
Green light, red light - Giving final agreement on a visually pleasing, user-centric design takes no more than two rounds of edits.

The Figma workspace allowed us to give and receive feedback directly within the design files, streamlining the approval process.

Figma dashboard of the project showing the full design prototype.

Development Phase

Once the designs were approved, I converted the Figma prototypes into a fully functional website. The development process focused on two key areas: performance optimization and responsive design. As per the project manager’s wishes, I used Eleventy as the static site generator and developed the custom code with HTML, CSS and a touch of JavaScript to ensure a lightweight, fast-loading site.

A flowchart of the image optimization process

The process

A code snippet showing image optimization

The code

Image Optimization: Maximizing Performance and Visual Quality

Our thorough image optimization process for Clarke’s Construction website was a critical component of the development phase. The original portfolio images, while visually impressive, were high-resolution files ranging from 2-5MB each, which would have significantly impacted page load times and overall site performance.

We implemented a comprehensive optimization workflow that significantly reduced file sizes while maintaining visual quality. Each image was analyzed individually to determine the optimal balance between compression and quality. Our approach included creating multiple variants of each image to serve the appropriate size and format based on the user’s device and browser capabilities.

Viewport Optimization:

Desktop viewport images resized to maximum width of 1920px
Tablet viewport images served at 1024px width
Mobile viewport images delivered at 320 width
Art direction adjustments for key hero images on smaller screens

Format Conversion Strategy:

AVIF format (25-30% smaller than WebP) served to compatible browsers
WebP format (30-40% smaller than JPEG) provided as secondary option
JPEG fallback for older browsers with optimized quality settings

Technical Implementation:

Responsive image markup using the <picture> element with srcset and sizes attributes
Lazy loading applied to all non-critical images
Critical hero images preloaded for instant rendering

Measurable Results:

Total page weight reduced by 65%
First Contentful Paint down to 0.9 seconds
Largest Contentful Paint reduced to 1.4 seconds
Cumulative Layout Shift sitting at 0

Why custom code over a template?

When approaching the Clarke’s Construction website, we made a deliberate decision to utilize custom code rather than a pre-built template. This strategic choice delivered significant advantages for both performance and user experience.

Performance Benefits

Custom code allowed us to eliminate unnecessary bloat common in multipurpose premade templates. By writing precisely what the site needed and nothing more, we reduced JavaScript overhead and minimized HTTP requests through intelligent asset bundling. Custom code also usually less HTML markup, and the use of modern, semantic tags. The resulting website loads significantly faster than template-based alternatives, with average page sizes under 900KB compared to the typical 2.5MB+ of template solutions.

Development Control

Building from scratch gave us complete control over how the responsive layouts were implemented. Rather than forcing the approved designs to fit within a template’s constraints, we created a custom CSS responsive framework that precisely matched the intended visual experience across desktop, tablet, and mobile devices.

Another big win for custom code is the control over the HTML markup. To give you an example, to reach the main title <h1> on the Wix homepage, a Google crawler has to go through 25 <div> elements. This is a nightmare for SEO. On the other hand, Clarke’s Construction website has its <h1> element only 5 elements deep, which makes it easy and quick for search engines to reach the content and rank it accordingly.

Conclusion

The new Clarke’s Construction website provides a modern digital platform that accurately represents their high-quality construction services. The combination of clean design, optimized performance, and effective presentation of their portfolio positions them effectively in the competitive Hampshire construction market.

The entire project was completed in just 10 working days, with 4 days dedicated to the design phase and 6 days for development implementation. This efficient timeline demonstrates our ability to deliver high-quality results within tight schedules.

A service page — The design also features a light mode. That’s two color palettes to handle!

Our streamlined workflow and focus on performance optimization resulted in a website that not only looks professional but also functions at peak efficiency. The site now serves as a strong marketing tool that showcases their 500+ completed projects and helps potential clients understand their service offerings.