Matthew James Taylor Matthew James Taylor

Web design ›

Responsive House Plan (Web Design Meets Architecture!)

22 Mar 2016 — Updated 8 Jan 2022

Responsive house plan

Table of contents

Two of my biggest passions in life are small-house architecture and web design.

With architecture, I like to design city houses that fit into narrow gaps or awkward spaces.

And with web design, I'm always building responsive layouts that adjust to fit on any size screen.

Today, we're going to combine the two!

Introducing the world's first responsive house plan:

Responsive House Plan

Adjust the land width by clicking the buttons. Watch the house change design to fit the available space. Full explanation after the floor plan:

4m 5m 6m 7m 8m 9+m

In web design, it's best practice to implement a 'mobile-first' approach. This means you design for small screens first, then progressively add more design complexity as screens get larger.

So to honor this philosophy, let's go through the various features of this responsive house starting at its narrowest.

4 Meter Wide House

4 meters (13 feet) is about the narrowest you can go with a traditional, single-story house. You can go narrower, but you'll need to get creative! (See my 3 meter wide driveway house plans for some examples)

With land this narrow, your house needs to take up the full width of the plot. This means you will often be sharing side boundary walls with the houses next door.

Terrace houses that share boundary walls are quite common in many cities.

A row of joined terrace houses in Sydney, Australia
A row of joined terrace houses in Sydney, Australia

My responsive house is designed like a typical terrace house, it starts with a hallway past two bedrooms.

A lightwell provides ventilation and natural light
A lightwell provides ventilation and natural light

Following the bedrooms, the hallway continues past a bathroom. The bathroom is narrower than the bedrooms to make way for a lightwell.

A lightwell is a small outside area that allows for ventilation and natural light through external windows. Bedroom 2 and the bathroom have external windows into the lightwell.

An open-plan living room is accessed by a door at the end of the hallway. This living room is pushed to the full width of the land to maximize internal space.

A skylight is placed above the kitchen to provide good natural light.

The rear of the house has large glass doors that open onto a deck.

5 Meter Wide House

If we increase the land width to 5 meters (16 feet) we have enough width to join the lightwell to the backyard with a side passage.

With a side passage, we can add external windows to the kitchen and dining room. This means we can remove the kitchen skylight.

6 Meter Wide House

At 6 meters wide (19.5 feet) we can extend the side passage to the full length of the house from front to back. This makes the house a duplex if it is joined by a similar, mirror-reversed house on the left side.

Both bedrooms can now have external windows on the side of the house.

The two bathroom windows can now be replaced with a single, larger window onto the side passage.

7 Meter Wide House

A central hallway flanked by rooms
A central hallway flanked by rooms

At 7 meters (23 feet) we have just enough room for a central hallway flanked by rooms on either side, providing we use the full width of the land again.

This wide design reduces the length of our hallway, saving us precious space.

Is it good to reduce hallways? Read my article to find out: Hallways: Are They a Waste of Space?

This new, wider design also gives us more room in the backyard.

Both bedrooms lose their side windows but now have large, matching front-facing windows.

The bathroom window is moved to the side passage, facing the backyard.

The kitchen skylight is required again because an external window is not possible through the shared boundary wall.

8 Meter Wide House

At 8 meters (26 feet) we can once again extend the side passage along the full length of the house from front to back. This means the house is only sharing a wall on one side so it can be built as a duplex.

Bedroom 1 gets its side window again.

The bathroom windows move to the side wall too.

9+ Meter Wide House

Once we get to 9 meters (29.5 feet) we have enough room for side passages on both sides. We no longer need to share boundary walls with our neighbors.

Bedroom 2 gains a side window.

The kitchen gets its side window back so we don't need the skylight.

We can add a side window to the lounge area too.

Now the house is fully detached it becomes a simple rectangle shape which makes construction easier.

We can continue to widen the land from here but the house doesn't need to respond any further, it's only optional.

Here are all the designs side-by-side: (Click for larger image)

The 6 variations of the house plan at different widths
The 6 variations of the house plan at different widths

How Does the Responsive House Plan Work?

I built the house plan just as I would a website — as a responsive HTML webpage. I then display this webpage in an iFrame within the article.

When you click the different sizes I simply change the width of the iFrame with javascript and the house plan automatically adjusts.

You can view the house plan directly if you are curious to see what it looks like by itself.

Free Download

Download the source file and experiment with responsive house plans for yourself:

Download
(responsive-house-plan.zip 5kb)

Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Direct-to-Brain Augmented Reality (DBAR) with Neuralink & AI

Direct-to-Brain Augmented Reality (With Neuralink & AI)

Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

Graeme Frontbum

Graeme Frontbum (About the Comic Strip & Characters)

An example of a printed MacBook Air

Printable MacBook Air! (4 Easy Steps)

Sepia ink life drawing

Ink Life Drawing (6 Experiments with Nibs & Brushes)

A nice sharp pencil

The Art of Sharpening Pencils (Styles & Techniques)

Ogga surfing

Ogga the Cane Toad (About the Comic Strip & Characters)

How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Small house blueprint

13 Small House Design Principles (The Illustrated Guide)

Flowers growing in a tiny house window flowerbox

12 Small House Benefits: Why Building Tiny Makes Sense!

Lyndal the flower girl

Art by Matthew James Taylor (Paintings, Drawings & Digital Art)

Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor