Matthew James Taylor

Web design ›

Responsive House Plan (Web Design Meets Architecture!)

22 Mar 2016 — Updated 8 Jan 2022

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:

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.

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

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

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)

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.