Meridian Homes Realty

The brief

Meridian Homes Realty is a fictional agency. The business, its ten listings, prices, addresses and agents in the demo are placeholder content, written to show how real content would work. Nothing on it is for sale.

The brief we set ourselves: house hunting is a comparing task, so the site should behave like an application. Filters and sorting respond instantly, the map and the list stay in step, and a visitor can keep a shortlist and see what a home would cost each month.

Goals

• Let a visitor narrow ten listings by bedrooms, price, neighbourhood and type, and sort them, with the result count announced to screen readers.
• Keep an interactive map and the listing cards in step, so a pin opens the same home as its card.
• Let visitors save homes and find them again on their next visit, without an account.
• Show a believable monthly payment from a price, deposit, rate and term.
• Stay accessible by keyboard and screen reader, fast on mobile, and free of trackers.

Design decisions

Typography with a point of view

DM Serif Display headlines give the agency an established, editorial voice, while Outfit, a clean geometric sans, keeps prices, filters and forms easy to read at small sizes.

Signature effect: pin drop

Map pins fall onto the map with a small bounce, one after another, and again whenever a filter brings them back. Listing cards slide up as they scroll into view. Both are switched off for visitors who prefer reduced motion.

Map and list as one

Each pin is a real button. Hovering or focusing a pin highlights its card, filters hide cards and pins together, and either one opens the same details dialog.

A dialog that behaves

Details open in a native modal dialog. Focus is held inside it, Escape or the close button closes it, and focus goes back to whichever card or pin opened it.

Illustrated, not stock

Homes are drawn as lightweight inline SVG scenes in a handful of colourways, so the page needs no photo downloads and stays fast.

Mobile-first decisions

• The phone layout was designed first: filters stack in two columns and the map sits above the listings.
• Pins, filters, save buttons and dialog controls are at least 44 pixels tall.
• The dialog fits small screens and scrolls inside itself.
• Nothing scrolls sideways at 390 pixels wide.

Features in the demo

Everything below is actually present in the live concept site, which you can open and try.

• Ten fictional listings rendered from a data array
• Filters for bedrooms, maximum price, neighbourhood and home type, plus a saved-only switch
• Sorting by newest, price (both directions) and size
• A live result count announced politely to assistive technology
• An interactive neighbourhood map with a pin for every visible home
• A details dialog with a three-view illustrated gallery
• Saved homes with a running count, remembered in the visitor's own browser
• A mortgage calculator using the standard amortisation formula, with loan amount and total interest
• Neighbourhood highlights that jump to filtered results
• An agent contact form (nothing is sent in the concept)

Measured Lighthouse scores

• 100Performance
• 100Accessibility
• 100Best practices
• 91SEO

Measured on 2026-10-15 with Lighthouse 12.8.2, mobile form factor. Each demo was audited from a local web server on this machine using Lighthouse's default mobile emulation and throttling, headless Chromium, one run per demo. The server sent the demo's real security headers but not the noindex header used on the showcase, because a real client site would be indexable. Scores vary a few points between runs and machines.

Tech and security

• Hand-coded HTML and CSS with vanilla JavaScript, with no framework, page builder or build step for the demo.
• Listing cards, pins and dialog content are created with safe DOM methods, never injected as HTML strings.
• Saved homes persist only in the visitor's own browser, using local storage with graceful fallback if it is blocked. Nothing is sent to a server.
• Self-hosted fonts and a strict Content-Security-Policy with no inline code, enforced by our build scan.
• No trackers, no cookies and no third-party scripts.

What we'd do for a real client next

• Connect the listings to the agency's real feed or a simple content editor, with real photography.
• Send viewing requests to the agent's inbox or CRM, with spam protection.
• Swap the illustrated map for a tile map if the client wants street-level search.
• Add shareable links for filters and saved lists, and RealEstateListing structured data.
• Add a care plan so listings, prices and content stay current.