Two shops, one flight up, one foundation

Sublime Hair Studio is a hair studio just off Elgin Street, in Ottawa's Golden Triangle. Up the same stairs, Bijou Boutique sells vintage, designer and everyday clothing, picked one piece at a time. Same address, overlapping customers, very different things for sale.

Businesses like these usually end up with one of two websites, and neither is great. Either the boutique becomes a "Shop" tab on the salon's site, where it's buried and Google can't tell whether it's looking at a salon or a clothing store. Or each business gets its own site from scratch, with its own template, its own fixes and its own bill, and the two slowly drift apart.

We did neither. Here's how, and why it matters well beyond two shops on one staircase.

Every site has two parts

Every site we build is made of two layers, kept apart on purpose:

• The foundation is the design and the building blocks: a header, a hero, a service menu, a gallery, a visit page with hours and a map. It's code, and we write and maintain it.
• The site is everything that's yours: the words, the photos, the prices, the colours, the logo. It's content, and it's what you edit.

Because the two are separate, one foundation can sit under as many sites as you like. Sublime and Bijou share one.

Sisters, not twins

Put the two sites side by side and you can tell they're family. They follow the same house rule: one loud colour set against a wardrobe of warm neutrals, big confident headlines, square corners, photographs matted like prints. But nobody would mistake one for the other.

• Sublime is vermilion. Its name is set in type, its photos sit in arched frames, and its main button books a chair.
• Bijou is a cut-emerald green with a champagne glint. It has a round badge for a logo, a taller header to hold it, gate-shaped frames with a polaroid tucked in the corner, a button that says Visit, and a link back down the stairs to the salon.

None of those differences is a second copy of the code. They're settings in the boutique's own files: a palette, a logo, a frame shape, a label. Even what each business tells Google is its own. Sublime is listed as a hair salon and Bijou as a clothing store, each with its own hours, so both can show up when someone nearby searches.

What the second site actually cost

When Bijou joined, it reused nine of Sublime's building blocks as they were: the header and footer, the hero, the photo-and-text sections, the FAQ, the visit page and more. It needed three new ones, all about clothes: a rack of finds, a "just in" shelf, and a page for a single piece with an Ask about this piece button. Adding a new find now takes one short file and a photo.

So most of the work of the second site was the part that should take work: the logo, the photography, and the words. Very little of it was rebuilding a header that already existed.

Those three new blocks now belong to the foundation, too. If Sublime ever wants to put the product lines on its shelf online, the pieces are already built.

Fix it once, and it's fixed twice

Headlines on both sites mark one phrase with a hand-drawn squiggle. This month we redrew how that squiggle is coloured so it always picks up each site's own colour. It was one change, in one place, and both sites had it the next time they went out: vermilion under Sublime's headlines, green under Bijou's.

That's true of everything that lives in the foundation: an accessibility fix, a speed improvement, a new feature. You pay for it once, and every site on it gets it.

Room to grow

For now, the boutique lives at /shop on the salon's domain. When it's ready for an address of its own, moving it is a change of settings, not a rebuild. Its pages, its finds and its look all go with it.

From two sisters to a network

Two shops sharing a staircase is the smallest version of something much bigger. The same split, one foundation under many sites, fits any group of businesses that belong together but each need to speak for themselves:

• Several locations

  A clinic, a bakery or a studio with three or four locations. Each one gets its own pages, hours, staff and Google listing, so the right location shows up in the right neighbourhood, and every one of them looks unmistakably like you.

• Franchises and dealers

  Head office owns the foundation: the brand, the legal pages, the booking and the checkout. Each owner edits their own words, photos and specials, and can't break the brand by accident, because the design isn't theirs to break.

• Associations and member networks

  A business association, a chamber of commerce or a league can offer every member a proper site built from the same blocks, for a fraction of what each would pay for a custom build, and improve all of them at once.

• Sub-brands and side businesses

  A product line, a café inside the shop, a new venture that isn't ready to stand completely on its own. It gets its own identity without starting from zero, and it can move out to its own address whenever it's ready.

Whatever the size of the group, the same four things hold:

1. Each site stays its own. Its own content, its own people editing it, its own address and its own Google listing. Someone updating one location can't touch another.
2. The family resemblance is built in. Consistency comes from sharing the foundation, not from a style guide everyone has to remember.
3. Every new site costs less than the last. The building blocks are already there, so the work goes into what makes the new site different.
4. Improvements reach everyone. One fix, every site, the same day.

This isn't a new idea we're trying out on a salon. Uniweb was built for groups of sites run by different people, and Proximify uses it to manage more than 100 websites, many of them faculty and research sites within the same university, each run by its own team. Sublime and Bijou are the same idea at the scale of one staircase.